some awesome AngularJS Features
Two Way Data-Binding Data-binding là tính năng thú vị nhất và hữu ích nhất trong AngularJS.Nó có thể giúp bạn tiết kiệm đc khá nhiều code đc viết trogn hệ thống. Việc thay đổi này dựa trên liên kết giữa các model và Dom. Data-Binding được thực hiện 1 cách đồng bộ và thống nhất theo 2 chiều ...
-
Two Way Data-Binding
Data-binding là tính năng thú vị nhất và hữu ích nhất trong AngularJS.Nó có thể giúp bạn tiết kiệm đc khá nhiều code đc viết trogn hệ thống. Việc thay đổi này dựa trên liên kết giữa các model và Dom.
Data-Binding được thực hiện 1 cách đồng bộ và thống nhất theo 2 chiều .Dưới đây là một ví dụ đơn giản, chỉ cách để ràng buộc một giá trị đầu vào cho một thẻ <h1>.
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello, {{yourName}}!</h1>
</div>
</body>
</html> -
Templates
Các template HTML được phân tích bằng các trình duyệt vào DOM. DOM sau đó trở thành đầu vào cho các trình biên dịch AngularJS.AngularJS thông qua các mẫu DOM để thực hiện việc data-binding để hiển thị view.
Một trong những ưu điểm lớn nhất của phương pháp này là nó tạo ra một quy trình làm việc chặt chẽ giữa các designer và các developer ,giúp họ có thể làm việc song song và không ảnh hưởng nhiều đến công việc của nhau.
Dưới đây là ví dụ sử dụng ng-repeat với image
function AlbumCtrl($scope) {
scope.images = [ {"thumbnail":"img/image_01.png", "description":"Image 01 description"}, {"thumbnail":"img/image_02.png", "description":"Image 02 description"}, {"thumbnail":"img/image_03.png", "description":"Image 03 description"}, {"thumbnail":"img/image_04.png", "description":"Image 04 description"}, {"thumbnail":"img/image_05.png", "description":"Image 05 description"} ];
}
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div> -
MVC
AngularJS ko kế thừa mô hình MVC 1 cách truyền thống mà gần giống với mô hình MVVM (Model-View-ViewModel).
The Model
Model chính là dữ liệu trong các ứng dụng.Nó thực hiện việc lưu trữ các biến đểView có thể sử dụng theo yêu cầu cụ thể
ViewModel
$scope là đối tượng của javascript đc sinh ra nhằm lưu trữ hay phát hiện những thay đổi trong ứng dụng
Controller
Controller có trách nhiệm thiết lập trạng thái ban đầu và sinh ra biến $scope cho ứng ụng. Điều đáng chú ý là các controller không lưu trữ các trạng thái và không tương tác với các services đc dùng trong ứng dụng -
Dependency Injection
Dependency Injection (DI) cho phép bạn để yêu cầu phụ thuộc của bạn, thay vì phải đi tìm chúng hoặc làm cho chính mình. Hãy nghĩ về nó như là một cách nói "Này, tôi cần X ', và DI chịu trách nhiệm cho việc tạo ra và cung cấp cho nó cho bạn.
Để truy cập vào các dịch vụ AngularJS chỉ đơn giản là một vấn đề thêínínhm rằng dịch vụ như là một tham số; AngularJS sẽ phát hiện rằng bạn cần dịch vụ đó và cung cấp cho bạn.
function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}
angular.
module('MyServiceModule', []).
factory('notify', ['$window', function (win) {
return function (msg) {
win.alert(msg);
};
}]);
function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}
myController.$inject = ['$scope', 'notify'];
- Directives
Directives có thể được sử dụng để tạo ra các thẻ HTML tuỳ chỉnh.Directives có thể thao tác các thuộc tính DOM và sinh ra các đối tượng HTML riêng biệt 1 cách thú vị.
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
<my-component ng-model="message"></my-component>
