TechAlpine – All About Technology

What is AngularJS?

AngularJS là một mạnh mẽ và cấu trúc Khuôn khổ JavaScript đó là dễ dàng hơn để thực hiện trong các ứng dụng web và cho phép tổ chức lớn, client heavy applications into something manageable. It is an open source web application framework, miễn phí và được sử dụng bởi hàng ngàn nhà phát triển trên toàn thế giới.

AngularJS được dựa trên MVC (Model View điều khiển) mô hình được dùng để xây dựng các ứng dụng web internet phong phú và đơn giản hóa cả hai phát triển và thử nghiệm các ứng dụng bằng cách sử dụng kiến ​​trúc MVC và tách ứng dụng Internet phong phú của bạn vào các mô hình, quan điểm và điều khiển. AngularJS tạo ra các ứng dụng trang duy nhất, có nghĩa là trình duyệt sẽ tải một trang duy nhất bất kể kích thước của ứng dụng của bạn.

AngularJS được phát triển bởi Miskohevery và Adam Abron,duy trì bởi Google; được sử dụng trong nội bộ của họ và MIT. Nó được cấp phép theo Giấy phép Apache phiên bản 2.0. Ban đầu nó được phát hành vào 2009 và phiên bản ổn định hiện nay là 1.3.5 (Decemeber 1, 2014).

AngularJS: Trong phần này, chúng ta hãy tóm tắt các vấn đề cơ bản của AngularJS.

• Là một thư viện được viết bằng JavaScript
• Không phải là một nền tảng hay ngôn ngữ
• Không phải là một plug-in hoặc gia hạn
• Nó mở rộng HTML, CSS và JavaScript
• Không phải là một thư viện thao tác DOM như jQuery
• Không yêu cầu jQuery hoặc thừa kế
• Không yêu cầu một cách ràng buộc dữ liệu và mã boilerplate

Tại sao AngularJS?

• Nó được dựa trên mô hình MVC thiết kế, cung cấp nhiều cách để xây dựng ứng dụng web ở phía khách hàng.
• Nó giúp xây dựng các ứng dụng phía khách hàng với mã ít hơn và linh hoạt hơn.
• Nó mở rộng HTML bằng cách sử dụng chức năng của chỉ thị, thuộc tính, biểu thức và các mẫu để HTML.
• AngularJS là một kiến ​​trúc MVC mà đơn giản hóa việc phát triển và thử nghiệm các ứng dụng dễ dàng cho phía khách hàng.
• Nó là tốt để phát triển các ứng dụng trang duy nhất và kết thúc trước cho các ứng dụng dựa trên web.
• Nó có khuôn khổ linh hoạt và tính năng linh hoạt. Vì vậy, nó được sử dụng cho cả hai dự án ứng dụng lớn và các ứng dụng nhỏ nhỏ.

Features:

AngularJS (Khuôn khổ dựa trên JavaScript) tạo ra các ứng dụng một cách nhanh hơn bằng cách sử dụng một số tính năng như:

• Nó là một công nghệ phía khách hàng cung cấp những điều mạnh mẽ để tạo ra các ứng dụng web động.
• Nó là một khung MVC dựa, cho phép người sử dụng để xây dựng kiến ​​trúc thích hợp và các ứng dụng web bảo trì.
• Nó là một khung ứng dụng web mã nguồn mở được sử dụng bởi hàng ngàn nhà phát triển trên toàn thế giới.
• Nó cho phép sử dụng các thành phần tái sử dụng và tái sử dụng mã.
• Nó làm cho việc tạo ra các giao diện người dùng (UI) dễ dàng thông qua các quá trình liên kết dữ liệu.
• Cách tiếp cận HTML Declarative.
• Nó giúp để phân chia ứng dụng của bạn thành những phần nhỏ hơn.

Kiến trúc và thành phần Diagram: Chúng ta hãy có một cái nhìn vào sơ đồ kiến ​​trúc của khung AngularJS và thành phần của nó.

Figure: AngularJS Kiến trúc

AngularJS chứa module mà hành động như là một container với nhiều loại khác nhau của các ứng dụng như bộ điều khiển, lượt xem, chỉ thị, nhà máy vv. Module xác định cách một ứng dụng nên được bootstrapped. Sử dụng các module, quy trình sẽ được dễ dàng hơn để hiểu; bạn có thể sử dụng lại mã, cuối để kết thúc bài kiểm tra sử dụng mô-đun để ghi đè lên cấu hình vv. Đây là nơi để tạo, đăng ký và lấy module góc.

Config thành phần chỉ chấp nhận các nhà cung cấp từ các mô-đun, có nghĩa là mọi dịch vụ, nhà máy vv là trường hợp của nhà cung cấp. Nó cung cấp tất cả các trường hợp đến các tuyến đường.

The Các tuyến đường được sử dụng để liên kết URL để điều khiển và quan điểm.

The Lượt xem được sử dụng để thêm xử lý tinh vi của sự kiện người dùng. Nó sử dụng ng-viewchỉ bổ sung cho dịch vụ đường bởi mẫu của các tuyến đường hiện tại để bố trí chính (index.html) tập tin.

The người điều khiển kiểm soát các dữ liệu của AngularJS ứng dụng mà các đối tượng JavaScript thường xuyên. AngularJS định nghĩa ng-điều khiểnchỉ thị mà tạo ra các đối tượng điều khiển mới bằng cách sử dụng chức năng điều khiển. Và con mới là có sẵn cho các chức năng điều khiển như $phạm vinhư thể hiện trong sơ đồ.

The lượt xem gửi phần hoặc thuộc tính vào chỉ thị mà nói với trình biên dịch HTML AngularJS của chú hành vi cụ thể cho các phần tử DOM và con của nó.

The Nha may được sử dụng để xác định các dịch vụ AngularJS và nó được gọi khi một dịch vụ cần phải được khởi tạo.

Bắt đầu với AngularJS:

AngularJS là dễ dàng để bắt đầu với. Nó cung cấp các tính năng như hai dữ liệu theo cách ràng buộc mà làm cho các thẻ tùy chỉnh, thuộc tính mà gói gọn được xây dựng trong chỉ thị mà làm cho mở rộng chức năng của HTML dễ dàng hơn.

• Nó được phân phối tập tin JavaScript và có thể được sử dụng trong một trang web bằng cách bao gồm thư viện AngularJS như hình dưới đây:

[đang]

<script src=”http:// angularjs ajax.googleapis.com/ajax/libs/ /1.2.26/ angular.min.js”>

 

</script>

 

[/đang]

 

Bạn cũng có thể kiểm tra phiên bản mới nhất của AngularJS trên trang web chính thức của họ.

• Bạn có thể tạo các ứng dụng AngularJS như hình dưới đây:

[đang]

<htmlng-app></html>

Hoặc là

<html ng-app = "MyApp"></html>

Hoặc là

<divng-app></div>

Hoặc là

<div ng-app = "MyApp"></div>

[/đang]

The ng-app thuộc tính là các phần tử gốc của ứng dụng AngularJS.

• Bộ điều khiển có thể được định nghĩa như hình dưới đây:

[đang]

<div ng-app = "" ng-controller = "MyController">

<input type = "text" ng-model = "tin nhắn">

</div>

[/đang]

The ng-điều khiểnChỉ thị xác định các điều khiển ứng dụng. The ng-mô hìnhChỉ thị liên kết với các giá trị của các điều khiển HTML như các lĩnh vực đầu vào, chọn vv để các dữ liệu ứng dụng.

• Thực hiện điều khiển bằng cách sử dụng $phạm vi đối tượng như bên dưới:

[đang]

functionMyController($phạm vi){

$scope.message = "Nhập tên của bạn";

}

[/đang]

The $phạm vi đối tượng đề cập đến mô hình ứng dụng mà gọi bộ điều khiển tạo lời nhắn tài sản trong phạm vi.

 

Các khái niệm cốt lõi:Trong phần này chúng ta sẽ có một cuộc thảo luận chi tiết về các thành phần cốt lõi và các khái niệm đằng sau chúng.

• Modules
• Chỉ thị
• Phạm vi
• Bộ điều khiển
• Expressions
• Templates
• định tuyến
• Bộ lọc

Modules:

Modules cung cấp cơ chế tuyệt vời để chia ứng dụng thành các thành phần nhỏ thể tái sử dụng và chỉ định cách một ứng dụng nên được bootstrapped. Modules chỉ định cách bạn xác định các thành phần trong các ứng dụng và làm cho ứng dụng dễ đọc hơn. Mỗi mô-đun được xác định bởi một tên độc đáo.

Chỉ thị:

Chỉ thị là khối xây dựng cốt lõi của AngularJS được sử dụng để tạo ra các thẻ HTML tùy biến và có thể được đặt trong các tên phần tử, thuộc tính và bình luận. Chỉ thị có thể được sử dụng như là chỉ thị HTML mà xây dựng widget phức tạp với các chức năng lớp.

Phạm vi:

Phạm vi là một đối tượng có liên kết với một cái nhìn với bộ điều khiển. Trong cấu trúc MVC, nó đề cập đến mô hình ứng dụng. Lĩnh vực có thể xem biểu thức và tuyên truyền các sự kiện khi chúng được sắp xếp theo cấu trúc phân cấp.

Bộ điều khiển:

Bộ điều khiển là các đối tượng JavaScript rằng định nghĩa hành vi thực tế của ứng dụng của bạn. Đó là trách nhiệm thiết lập các thuộc tính mô hình và chức năng bằng cách sử dụng $phạm vi object. Bộ điều khiển không lưu trữ nhà nước và không tương tác với các dịch vụ từ xa.

Expressions:

Biểu thức được viết trong dấu ngoặc nhọn "{{ }}"Biểu thị các ràng buộc mà dẫn đến nhiều mô hình ứng dụng của chúng tôi. Biểu thức không hỗ trợ báo cáo kiểm soát dòng chảy. AngularJS chí đầu ra các dữ liệu mà chúng được sử dụng.

Templates:

Mẫu chỉ là cổ đồng bằng HTML mà không bao gồm bất kỳ góc cạnh cụ thể tập tin mẫu. Nó đi kèm với một bộ các mẫu sống để tạo ra bộ điều khiển vv bằng cách sử dụng mẫu động cơ. Mẫu được sử dụng để hiển thị thông tin từ các mô hình và bộ điều khiển.

định tuyến:

Nó được sử dụng để liên kết của URL để điều khiển và quan điểm. Định tuyến được đưa về chăm sóc bởi các nhà cung cấp dịch vụ gọi $nhà cung cấp đường để xử lý định tuyến đó là các nhà cung cấp của $tuyến đường dịch vụ. Nói cách khác, nó tải của phụ mẫu tùy thuộc vào các URL của trang.

Bộ lọc:

Các bộ lọc được sử dụng với các biểu thức để biến đổi hoặc sửa đổi dữ liệu từ các mô hình. Chúng ta có thể thêm các biểu thức hoặc chỉ thị nhân vật sử dụng đường ống. AngularJS có một số các bộ lọc thường được sử dụng như:

• tiền tệ: chuyển đổi số sang định dạng tiền tệ.
• hoa: Chuyển đổi chuỗi sang chữ hoa.
• chữ thường: Chuyển đổi chuỗi thành chữ thường.
• bộ lọc: chọn tập hợp con của các mục từ mảng.
• orderby: đơn đặt hàng mảng bằng các biểu hiện như ra lệnh theo thứ tự abc cho chuỗi và số lượng cho các số.

Thí dụ:

Hãy tạo ra một ví dụ đơn giản bằng cách sử dụng thư viện AngularJS và tạo một file HTML như FirstExample.html như hình dưới đây:

Listing1: Ứng dụng AngularJS đơn giản

[đang]

<!DOCTYPE html>

<html>

<head>

<script src= “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>

</head>

<body>

<div ng-app =”” ng-controller =”MyController”>

Nhập tên: <input type =”text” ng-mô hình =”userName”><br>

<br>

Họ và tên: {{userName}}

</div>

<script>

functionMyController($phạm vi) {

$scope.userName = “David”;

}

</script>

</body>

</html>

[/đang]

Như đã thảo luận, chúng tôi đã bao gồm AngularJS tập tin JavaScript trong trang HTML được định nghĩa trong <head> tag. Các phần tiếp theo chứa ứng dụng AngularJS được xác định bằng cách sử dụng ng-app thuộc tính chạy bên trong <div> tag.

The ng-điều khiển Chỉ thị xác định các điều khiển ứng dụng. Các AngularJS sẽ gọi "MyController” cùng với $phạm vi đối tượng mà tạo ra tài sản gọi là "Tên người dùng” trong phạm vi.

Xác định tên mô hình sử dụng ng-mô hìnhChỉ thị quy định tại các <nhập vào> tag. Nó liên kết với các lĩnh vực đầu vào để điều khiển tài sản "Tên người dùng”.

Mở FirstExample.html trong trình duyệt và xem kết quả như thể hiện trong hình bên dưới:

Figure: Ví dụ AngularJS

Kết luận: Chúng tôi đã thảo luận về tất cả các khía cạnh của AnguarJS. Trước khi chúng tôi kết luận, chúng ta hãy tóm tắt những điểm. AngularJS (còn được gọi là góc)là một mã nguồn mở khung ứng dụng web. Nó cung cấp kiến ​​trúc MVC phía khách hàng cùng với các thành phần thường được sử dụng cần thiết cho các ứng dụng Internet phong phú. AngularJS sau mô hình lập trình khai báo để xây dựng giao diện người dùng. Mục tiêu chính của khuôn khổ này là để làm cho phát triển và thử nghiệm dễ dàng hơn.

Hy vọng bạn đã có một sự hiểu biết rõ ràng về khung AngularJS. Thưởng thức đọc trong www.techalpine.com