Chúng tôi rất vui mừng chia sẻ kiến thức về từ khóa Angularjs la gi và hy vọng rằng nó sẽ hữu ích cho bạn đọc. Bài viết tập trung trình bày ý nghĩa, vai trò và ứng dụng của từ khóa này trong việc tối ưu hóa nội dung trang web và chiến dịch tiếp thị trực tuyến. Chúng tôi cung cấp các phương pháp tìm kiếm, phân tích và lựa chọn từ khóa phù hợp, cùng với các chiến lược và công cụ hữu ích. Hy vọng rằng thông tin mà chúng tôi chia sẻ sẽ giúp bạn xây dựng chiến lược thành công và thu hút lưu lượng người dùng. Xin chân thành cảm ơn sự quan tâm và hãy tiếp tục theo dõi blog của chúng tôi để cập nhật những kiến thức mới nhất.
I. AngularJS Introduction (Giới thiệu)
Bạn Đang Xem: Tổng quan về AngularJS
1. AngularJS là một framework của JavaScript.
- AngularJS là một framework của JavaScript. Nó là 1 trong những thư viện được viết trong JavaScript.
- AngularJS được phân phối như một file JavaScript, và có thể được thêm vào 1 trang HTML với thẻ “`<scriptvàgt;
### “`OpenSCAD <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></scriptvàgt;
Ưu điểm :
- Cấu trúc của nó cực tốt (rất tiện lợi khi làm single page với service routing)
- Code ngắn gọn, phát triển ứng dụng single page rất nhanh(Nếu ko cần server thì người code cứng tay có thể phất triển ứng dụng trong vòng 10 ngày cả html + css + angularjs).
**Nhược điểm : **
Vấn đề về hiệu suất sẽ là 1 trong những vấn đề lớn so với những ứng dụng có khối lượng data cực lớn. Nếu như app của bạn có rất nhiều tài liệu ( ví dụ nếu như bạn có rất nhiều model cần xử lý) thì angular trở thành rất chậm chạp( thời kì có thể tính bằng giây). Cách xử lý nó là bạn cũng có thể tích hợp nó với ReactJS.
2. AngularJS mở rộng tính chất của HTML bởi Directives, và liên kết tài liệu với trang HTML bằng Expressions
-
AngularJS mở rộng HTML bằng ng-directives
-
ng-app directive(hướng dẫn) xác định một ứng dụng AngularJS.
-
ng-model directive liên kết với những giá trị của không ít tinh chỉnh và điều khiển HTML (input, select, textarea) với tài liệu ứng dụng.
-
ng-bind directive kết nối tài liệu ứng dụng với HTML view.
- Ví dụ về sử dụng ng-directives
<!DOCTYPE htmlvàgt; <htmlvàgt; <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></scriptvàgt; <bodyvàgt; <div ng-app=””> <pvàgt;Name: <input type=”text” ng-model=”name”></pvàgt; <p ng-bind=”name”></pvàgt; </divvàgt; </bodyvàgt; </htmlvàgt;
Trong ví dụ trên :
AngularJS tự động hóa phát động khi website đã được nạp.
ng-app cho AngularJS biết thành phần <divvàgt; là chủ thể (owner) của ứng dụng AngularJS.
ng-model liên kết giá trị của trường nguồn vào (input field) với biến ứng dụng name.
ng-bind kết nối innerHTML của thẻ <pvàgt; với biến ứng dụng name.
Tất cả chúng ta sẽ đi vào tìm hiểu 1 số đặc điểm của AngularJS ở các mục ở đây.
II. AngularJS Expressions
AngularJS liên kết tài liệu với HTML bằng phương pháp sử dụng Expressions
1. AngularJS Expressions
Các biểu thức của AngularJS được viết trong cặp dấu ngoặc nhọn : {{ expression }}.
Các biểu thức của AngularJS kết nối tài liệu với HTML theo cùng một cách giống với thông tư trong ng-bind.
AngularJS sẽ trả về tài liệu “output” là kết quả sau thời điểm thực hiện phép toán trong biểu thức.
AngularJS expressions giống với Javascript expressions : có thể chứa các ký tự, phương thức hoặc các biến.
Ví dụ : {{ 5 + 5 }} or {{ firstName + ” ” + lastName }}
- Ví dụ về 1 đoạn AngularJS :
<!DOCTYPE htmlvàgt; <htmlvàgt; <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></scriptvàgt; <bodyvàgt; <div ng-app=””> <pvàgt;My first expression: {{ 5 + 5 }}</pvàgt; </divvàgt; </bodyvàgt; </htmlvàgt;
Kết quả in ra màn hình hiển thị sẽ là kết quả của biểu thức trong cặp ngoặc {{ 5 + 5 }}, giống hình ở đây :
- Nếu như bạn xóa khỏi ng-app trong đoạn code trên :
… <divvàgt; <pvàgt;My first expression: {{ 5 + 5 }}</pvàgt; </divvàgt; …
Kết quả biểu thức khi hiện ra màn hình hiển thị sẽ không còn được tính toán, kết quả sẽ trở thành như sau :
2. AngularJS Numbers (biến là số)
AngularJS numbers giống với JavaScript numbers:
Ví dụ :
<div ng-app=”” ng-init=”quantity=1;cost=5″> <pvàgt;Total in dollar: {{ quantity * cost }}</pvàgt; </divvàgt;
ng-init dùng làm khai báo biến. Khi khái niệm biểu thức thì viết biểu thức với biến tương ứng, ở đây là {{ quantity * cost }}
Có thể dùng ng-bind đặt trong cặp thẻ <span ng-bind=” expression “>…</spanvàgt; để thay thế cho cặp ngoặc {{ }} bao ngoài biểu thức. Như sau :
<div ng-app=”” ng-init=”quantity=1;cost=5″> <pvàgt;Total in dollar: <span ng-bind=”quantity * cost”></spanvàgt;</pvàgt; </divvàgt;
Cả hai cách viết trên đều trả về 1 kết quả ra màn hình hiển thị :
Xem Thêm : Thông điệp là gì? Cách viết thông điệp truyền thông
Total in dollar: 5
3. AngularJS Strings (biến là String)
AngularJS strings giống với JavaScript strings:
Ví dụ :
<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe'”> <pvàgt;The name is {{ firstName + ” ” + lastName }}</pvàgt; </divvàgt;
biến trong đoạn code này còn có dạng String : ‘John’, ‘Doe’.
Có một cách viết nữa sử dụng ng-bind :
<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe'”> <pvàgt;The name is <span ng-bind=”firstName + ‘ ‘ + lastName”></spanvàgt;</pvàgt; </divvàgt;
Cả hai cách viết trên đều trả về kết quả ra màn hình hiển thị :
The full name is: John Doe
4. AngularJS Objects (biến là 1 trong những object)
AngularJS objects giống với JavaScript objects:
Ví dụ :
<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”> <pvàgt;The name is {{ person.lastName }}</pvàgt; </divvàgt;
Ở đây, biến là 1 trong những object person với 2 tính chất là firstName và lastName. Khi muốn lấy ra giá trị tính chất của đối tượng người sử dụng thì chỉ việc sử dụng cú pháp object.attribute như thông thường. Trong ví dụ trên thìa là lấy ra giá trị lastName của person : person.lastName
Sử dụng ng-bind :
<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”> <pvàgt;The name is <span ng-bind=”person.lastName”></spanvàgt;</pvàgt; </divvàgt;
Kết quả trả ra màn hình hiển thị :
The name is Doe
5. AngularJS Arrays (biến là Array)
AngularJS arrays giống với JavaScript arrays. Ví dụ :
<div ng-app=”” ng-init=”points=[1,15,19,2,40]”> <pvàgt;The third result is {{ points[2] }}</pvàgt; </divvàgt;
Trên đây sử dụng 1 biến points có kiểu là mảng. Khi muốn lấy giá trị thành phần thứ i trong mảng points thì cứ viết theo cú pháp thông thường points[i-1], trong ví dụ trên thìa là thành phần thứ 3 : points[2].
Thay thế {{ }} bằng ng-bind :
<div ng-app=”” ng-init=”points=[1,15,19,2,40]”> <pvàgt;The third result is <span ng-bind=”points[2]”></spanvàgt;</pvàgt; </divvàgt;
Kết quả in ra màn hình hiển thị :
The third result is 19
6. So sánh biểu thức trong AngularJS và biểu thức trong JavaScript
- Giống với biểu thức trong Javascript thì biểu thức trong AngularJS có thể chứa ký tự, phương thức và các biến.
- Khác với Javascript, biểu thức trong AngularJS có thể được viết trong HTML.
- Khác với Javascript, biểu thức trong AngularJS không tương trợ toán tử tham gia (if…else, …), lặp hoặc các trường hợp ngoại lệ (exceptions).
- Khác với Javascript, biểu thức trong AngularJS tương trợ filters (các bộ lọc).
III. AngularJS Directives
AngularJS cho bạn mở rộng HTML với tính chất mới gọi là Directives.
1. AngularJS Directives
AngularJS directives là tập các tính chất mở rộng của HTML với tiền tố ng- :
ng-app khởi tạo 1 ứng dụng AngularJS.
ng-init khởi tạo tài liệu ứng dụng (là nơi khai báo biến).
ng-model liên kết giá trị của không ít HTML controls (input, thẻ select (checkbox, radio button, select tag…), textarea) với tài liệu ứng dụng.
Ví dụ :
<div ng-app=”” ng-init=”firstName=’John'”> <pvàgt;Name: <input type=”text” ng-model=”firstName”></pvàgt; <pvàgt;You wrote: {{ firstName }}</pvàgt; </divvàgt;
Trong ví dụ trên, giá trị của trường input bạn nhập vào sẽ tiến hành gán cho biến firstName nhờ vào ng-model :
<pvàgt;Name: <input type=”text” ng-model=”firstName”></pvàgt;
được gán vào kết quả in ra, ở chỗ nào có biểu thức chứa firstName thì sẽ tiến hành thay thế bằng giá trị tương ứng đó.
Xem Thêm : Tuyển Tú Nữ Là Gì ? Nghĩa Của Từ Nữ Tú Trong Tiếng Việt Tuyển Tú Thời Thanh
Kết quả của đoạn code trên :
Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_directives
2. Data Binding (ràng buộc tài liệu)
Biểu thức {{ firstName }} trong ví dụ trên là 1 trong những biểu thức ràng buộc tài liệu AngularJS.
Ràng buộc tài liệu trong AngularJS là đồng bộ hóa các biểu thức AngularJS với tài liệu AngularJS :
{{ firstName }} được đồng bộ hóa với ng-model=”firstName”.
Trong ví dụ sau đây, 2 trường text field được đồng bộ hóa với 2 ng-model directives :
<div ng-app=”” ng-init=”quantity=1;price=5″> Quantity: <input type=”number” ng-model=”quantity”> Costs: <input type=”number” ng-model=”price”> Total in dollar: {{ quantity * price }} </divvàgt;
- Có 2 field để nhập giá trị cho quantity và price
- output của biểu thức là tích của {{ quantity * price }}
Kết quả :
Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_binding
3. Repeating HTML Elements
ng-repeat tái diễn 1 thành phần HTML
- Ví dụ :
<div ng-app=”” ng-init=”names=[‘Jani’,’Hege’,’Kai’]”> <ulvàgt; <li ng-repeat=”x in names”> {{ x }} </livàgt; </ulvàgt; </divvàgt;
ng-repeat giúp tái diễn các giá trị bên trong biến names thông qua dòng lệnh : <li ng-repeat=”x in names”>
Kết quả :  Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_array
- Sử dụng ng-repeat trong một mảng các object :
<div ng-app=”” ng-init=”names=[ {name:’Jani’,country:’Norway’}, {name:’Hege’,country:’Sweden’}, {name:’Kai’,country:’Denmark’}]”> <ulvàgt; <li ng-repeat=”x in names”> {{ x.name + ‘, ‘ + x.country }} </livàgt; </ulvàgt; </divvàgt;
Ở đây lặp trong mảng names““ thì thành phần lặp là từngobject“` bên trong mảng đó, tất cả chúng ta có thể truy xuất các tính chất bên trong object đó một cách thông thường.
Kết quả :
Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_object
4. Tổng kết
4.1. ng-app Directive
ng-app xác định root element (thành phần gốc) của một ứng dụng AngularJS.
ng-app sẽ auto-bootstrap (khởi tạo tự động hóa) ứng dụng khi một website được load.
4.2. ng-init Directive
ng-init xác định các giá trị khởi tạo cho một ứng dụng AngularJS.
Thường nhật không nên sử dụng ng-init thay vào đó sử dụng 1 controller hoặc module.
4.3. ng-model Directive
ng-model kết nối giá trị của không ít HTML control với tài liệu ứng dụng.
ng-model có thể :
- Cung cấp các loại xác nhận cho những tài liệu ứng dụng (số, email, required).
- Cung cấp trạng thái cho tài liệu ứng dụng (invalid, dirty, touched, error).
- Cung cấp các class CSS cho những HTML element.
- Kết nối các HTML element với những HTML form.
4.4. ng-reapeat Directive
ng-repeat clone HTML element cho từng item trong một collection (1 mảng).
IV. AngularJS Controllers
Các ứng dụng AngularJS được tinh chỉnh và điều khiển bởi các controller.
ng-controller khái niệm application controller.
1 controller là 1 trong những JavaScript Object được tạo bởi 1 chuẩn Javascript object constructor (xây dựng đối tượng người sử dụng).
Ví dụ :
<div ng-app=”myApp” ng-controller=”myCtrl”> First Name: <input type=”text” ng-model=”firstName”><brvàgt; Last Name: <input type=”text” ng-model=”lastName”><brvàgt; <brvàgt; Full Name: {{firstName + ” ” + lastName}} </divvàgt; <scriptvàgt; var app = angular.module(‘myApp’, []); app.controller(‘myCtrl’, function($scope) { $scope.firstName = “John”; $scope.lastName = “Doe”; }); </scriptvàgt;
Trong ví dụ trên :
Ứng dụng AngularJS được xác định bởi ng-app=”myApp”. Ứng dụng chạy bên trong thẻ
