Home > Developer > Web Develop
A few days ago, master let me know Angularjs,angularjs is a front-end framework, the specific advantages and disadvantages and use of the scene I have not yet figured out, for the time being not to do the description, leave to use after the supplement it.
Angularjs four core features: MVC, module (modular), instruction system, two-way data binding.
Here are the four core characteristics of the above, some brief introduction:
1. MVC (Module--control--view)
We should all know that MVC represents: the data model Layer (Module)--business logic and control logic--the view layer, which first looks at a simple Angularjs example:
<!Doctype HTML><HTMLNg-app> <Head> <MetaCharSet= "Utf-8"> <Script> functionHelloangular ($scope) {$scope. Greeting={text:"Hello" }; } </Script> </Head> <Body> <DivNg-controller= "Helloangular"> <P>{{Greeting.text}},angular</P> </Div> </Body> <Scriptsrc= "Js/angular-1.3.0.js"></Script></HTML>
Running Result: hello,angular
Analyzing this simple example, we can clearly distinguish between the layers of MVC, the Ng-controller defined in the DIV is a controller, the controller is defined as a function, and the content of the P tag is obviously the display layer, The Text property of a greeting object is defined in the function, and the value obtained by {{}} before it is shown is obviously the data model layer. This is what the page shows as the value of the data model.
2. Module (Modular)
In the example above we define a global function, but experienced developers know that we should avoid defining global variables and global functions as much as possible during the development process. So we need to understand the modular nature of the angularjs, and we'll modify the above example
<!Doctype HTML><HTMLNg-app= "Helloangular"> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <DivNg-controller= "Helloangular"> <P>{{Greeting.text}},angular</P> </Div> </Body> <Scriptsrc= "Js/angular-1.3.0.js"></Script> <Script> varMyModule=Angular.module ("Helloangular", []); Mymodule.controller ("Helloangular", ['$scope', functionHelloangular ($scope) {$scope. Greeting={text:'Hello' }; } ]); </Script></HTML>
Compared to the above example, a module is defined in the following instance using the Angular module method, and a controller method is called on the defined module, and it is clear that one of the controllers of the MyModule module is defined. The controller's name is Helloangular, and its implementation is the Helloangular function in the above example, so we can modularize the controller instead of using the global function as the controller.
Note: everything is starting from the module , when we use ANGULARJS, we must first think of the module, all things are built on the basis of the module, only define the module to call other methods.
The Ng-app in the above example is equivalent to the main function in Java, so you can define only one Ng-app per page, and he defines the module in which it resides.
3. Instruction System
Angular's command system is one of the most distinctive and attractive features. Let's look at an example:
<!Doctype HTML><HTMLNg-app= "MyModule"> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <Hello></Hello> </Body> <Scriptsrc= "Js/angular-1.3.0.js"></Script> <Script> varMyModule=Angular.module ("MyModule", []); Mymodule.directive ("Hello", function() { return{restrict:'E', Template:'<div>hi everyone!</div>', replace:true } }); </Script></HTML>
There is a hello tag in the HTML code in the instance, but we know that the standard HTML code does not have a hello tag, we look at the specific JS code, such as the last instance, first defined a module MyModule, and then called the directive function on the module, It is obvious that Hello is the name of the instruction, and the corresponding method is obvious, returning a template, and this templte content becomes the content of the Hello tag.
Let's think about it, if we define a lot of instructions, then we can call them on the page.
4. Bidirectional data binding
Most frameworks implement a one-way data binding, one-way data binding means to bind data to a template, and display to the interface, the disadvantage of this mode is displayed, when the data changes, and not timely update to the page, so angular proposed two-way data binding definition.
Let's look at an example:
<!Doctype HTML><HTMLNg-app> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <Div> <inputNg-model= "Greeting.Text"/> <P>{{Greeting.text}},angularjs</P> </Div> </Body> <Scriptsrc= "Js/angular-1.3.0.js"></Script></HTML>
Interface:
This instance, whatever you enter in input, will be displayed in real time in the P tag below, and we can see that we have not written any JS code in this instance, we bind a ng-model on input, It has a value of Greeting.Text, and in the P tag it gets the value, which is displayed in real time in HTML.
Core features of the ANGULARJS
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
