AngularJS
1) Module: Cho biết phạm vi sử dụng được Module
html dùng:
ng-app="myApp"
js:
var myApp = angular.Module("myApp", []);
2) Controller: Cho biết phạm vi sử đụng được Controller
html dùng:
js:
var myController = function($scope){
// ... codes
};
3) scope: Là biến đại diện cho các thông tin của controller
html dùng:
{{ person.name }}
js:
var myController = function($scope){
var person = {name: "nucasspro", age: 23};
$scope.person = person;
};
4) ng-src: dùng để áp dụng đường dẫn đến 1 file, vì 1 số trường hợp
đưa link vào scope thì bên html không load ra được.
html dùng:
{{ person.image }}
js:
var myController = function($scope){
var person = {name: "nucasspro", image: "/avata.png"};
$scope.person = person;
};
5) DataBinding 2 chiều: từ model -> view và view -> model.
Nó sẽ lấy giá trị từ model scope để show lên view. Trên view có
chỉnh sửa gì thì nó lại cập nhật xuống cho model scope.
Cách này là thay vì phải bắt sự kiện textChange, ngắn vl luôn
html dùng:
{{ name }}
js:
var myController = function($scope){
$scope.name = "nucasspro";
};
6) ng-repeat: nó là cái foreach thôi
6.1) trường hợp data đơn giản
html dùng:
{{ student.name }}
{{ student.age }}
js:
var myController = function($scope){
var students = [
{name: "nu", age: 23},
{name: "nu", age: 23},
{name: "nu", age: 23},
{name: "nu", age: 23},
];
$scope.students = students;
};
6.2) trường hợp data lồng nhau
html dùng:
{{ student.name }}
{{ student.age }}
{{ name }}
js:
var myController = function($scope){
var students = [
{name: "nu", age: 23, accounts: [{ name: "A", "A1" }]},
{name: "nu", age: 23, accounts: [{ name: "A", "A1" }]},
{name: "nu", age: 23, accounts: [{ name: "A", "A1" }]},
{name: "nu", age: 23, accounts: [{ name: "A", "A1" }]}
];
$scope.students = students;
};
7) Events: bắt sự kiện
html dùng:
js:
var myController = function($scope){
$scope.countNumber = 0;
$scope.incrementNumber = function(){
$scope.countNumber++;
};
};
8) Filters: có 3 dạng sau: chỉnh format, sắp xếp và lọc data.
Dùng dấu " | " để áp dụng filter. Có nhiều cái có sẵn rồi, dùng thôi
{{ student.name | uppercase }}
{{ student.score | number:2 }}
js:
var myController = function($scope){
var students = [
{name: "nu", score: 23},
{name: "nu", score: 23},
{name: "nu", score: 23},
{name: "nu", score: 23}
];
$scope.students = students;
};