Angularjs extends HTML through new properties and expressions. Angularjs is also very easy to learn.
1.AngularJS is the Holy
Angular JS (angular.js) is a set of frames, templates, and data binding and rich UI components that are used to develop Web pages. It supports the entire development process, providing a framework for Web applications without the need for manual DOM operations.
Angularjs is designed to overcome the lack of HTML in building applications. HTML is a good declarative language for static text presentation, but it is weak to build a Web application. Here Angularjs, make up for the natural defects of HTML, used for component Web applications.
2. How to Understand Angularjs
Angularjs was born in 2009, by Misko Hevery and other people to create, after the acquisition of Google.
ANGULARJS Official website: http://www.angularjs.org (generally will be the wall off, so you can visit the following website)
Angularjs Chinese Website: http://www.ngnice.com
Books: "Angularjs Authority Course", "develop next generation Web application with Angularjs" and so on. Personal opinion, for your information
Note: Video tutorials, recently saw the desert teacher's Angularjs tutorial, feel good, but feel no basis to understand, or to see several times (not advertising)
3. Why to understand Angularjs
A new technology can be published, for the public to know, and then out of the lead, certainly not groundless, there must be some of the extraordinary, there are the following:
(1) The idea of MVC (or MVVM)
(2) modularity and Dependency Injection
(3) Bidirectional data binding
(4) Instruction
Each feature can be a large space, obviously, the current capacity is not enough, can not be launched, interested in online search, generally understand.
Today, the main angularjs three instructions "@", "=", "&" Usage and difference (this problem bothers me for a long time, and frank exchange many times, I understand)
1. Directive Scope @
The function is to pass the current property as a string.
First code, front interface:
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink water="{{pureWater}}"></drink>
</div>
</body>
<script src="../js/angular.js">
<script src="ScopeAt.js"></script>
</html>
js code:
var myModule = angular.module ("MyModule", []);
myModule.controller ('MyCtrl', ['$ scope', function ($ scope) {
$ scope.pureWater = "Pure water";
}])
myModule.directive ("drink", function () {
return {
restrict: 'AE',
scope: {
water: '@'
},
template: "<div> {{water}} </ div>"
}
});
The result of the execution is prosaic, but the mystery is hidden:
(1) In an HTML page, declare a label <DRINK></DRINK>, which defines a property name: Water property Value: Purewater (Here's {{}}} is a common expression of angularjs. Similar to Ng-model, for value binding)
(2) JS file, first from the module, and then create a controller row 2~ line 4, and then define a directive, the main implementation is to replace "<drink></drink>" with "<div>{{water}}</div > "Label display
(3) Focus on this
scope:{
water: ' @ '
}
The expression is equivalent to:
Link:function (scope,element,attrs) {
scope.water=attrs.water;
}
The specific meaning is to define a property name on the scope of the instruction: water, the value of which is the value of the water attribute in the foreground interface, that is, "{{purewater}}";
At the same time {{Purewater}} values we can see from the declared controller:
$scope. purewater= "Pure water";
So the final page shows the "Pure water", the main process is:
A. In the instruction, the HTML page element is associated with the @ implementation instruction;
B. In the controller and to achieve the link with the page;
C. Thus, the use of HTML pages to establish the relationship between the controller and instructions, but also a means of communication.
See the following figure in detail:
2. Instruction scope =
A function is a two-way binding to a property in the parent scope.
<! doctype html>
<html ng-app = "MyModule">
<head>
<meta charset = "utf-">
<link rel = "stylesheet" href = "../ css / bootstrap.css">
</ head>
<body>
<div ng-controller = "MyCtrl">
Ctrl:
<br>
<input type = "text" ng-model = "pureWater">
<br>
Directive:
<br>
<drink water = "pureWater"> </ drink>
</ div>
</ body>
<script src = "../ js / angular.js"> </ script>
<script src = "ScopeEqual.js"> </ script>
</ html>
var myModule = angular.module ("MyModule", []);
myModule.controller ('MyCtrl', ['$ scope', function ($ scope) {
$ scope.pureWater = "Pure water";
}])
myModule.directive ("drink", function () {
return {
restrict: 'AE',
scope: {
water: '='
},
template: '<input type = "text" ng-model = "water" />'
}
});
Here = the means are similar, through the page to set two input boxes, respectively, representing the scope of the command and controller, in the JS code to achieve a two-way binding, so that the controller and instructions in their respective scopes can affect each other, that is, two-way communication, concrete ideas and @ similar, do not repeat, above:
3. & In the directive scope
The primary role is to pass a function from the parent scope, which is called later.
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeAnd.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
