Home > Developer > Web Develop
I. ANGULARJS INTRODUCTION
AngularJS is a structural framework designed for dynamic Web applications. It allows you to use HTML as a template language, extending the syntax of the HTML so you can build your application components more clearly and concisely. Its innovation is that with data binding and dependency injection, it allows you to no longer write large amounts of code. These are all implemented through the browser-side JavaScript, which also makes it perfectly integrated with any server-side technology.
With so much to say, it's estimated you didn't understand anything ... Is that right? Don't worry, let me say some of his features: modular , data bidirectional binding , Dependency Injection , directives . Below we will follow these characteristics to learn.
Two. Angularjs based on the MVC concept
The so-called MVC is the module (data model), view (view), controller
In fact, Angularjs is the combination of these three modules, the following is a picture of my model, the first look at a glance:
Three. Combined interpretation
As mentioned above, Angularjs is characterized by: modularity, Dependency Injection, bidirectional binding, and directives. Now let me combine with you to explain:
Modular : In the following filter,directive ... The four blocks are the module's four representative methods (the following will explain each function's usage and function), but also can be understood as the respective small module, each module function is different, but the division of labor is clear, the structure is clear, realizes the modularization.
Dependency Injection : The four small modules mentioned above appear to be separate, but they have interdependent relationships between the 22 and can be referenced to each other, enabling powerful functions (described later in detail), which is dependency injection.
directive : It can also be seen that the instruction is the directive method in the diagram. There are many commands in the ANGULARJS, such as Ng-app(specifying the scope of the Angularjs),Ng-model(Defining a model of the data, implementing two-way binding),ng-repeat (Repeat a label),Ng-change(the value of the listener tag has not changed), and so on, and here the directive is the most important function is the custom directive (also has the tutorial said is the HTML extension).
two -way binding: two-way binding is the module and view in, that is, data and views are two-way binding. will use the Ng-model instructions just mentioned.
Four. See an example of a simple two-way binding.
Index.html:
1 <!DOCTYPE HTML>2 <HTMLNg-app> 3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 <Scriptsrc= "Angular-1.2.19/angular.js"></Script> <!--introduced the ANGULARJS package -8 </Head>9 <Body>Ten <Div> One <inputtype= "text"Ng-model= "text"> A <b>Hello {{text}}</b> - </Div> - </Body> the </HTML>
You can take the above code to the browser to run (note the address of the reference ANGULARJS), you will be surprised to find that ANGULARJS is really powerful!!
Here is a simple explanation of the above code in the difficult to understand the place:
ng-app Specifies the scope of the application, which means that the entire HTML code can recognize Angularjs.ng-modelTo bind the data model name to text an element, input values are stored in the model.{{text}}This is an expression of the angularjs, that is, the middle of the text is a variable it corresponds to the model name above, the ability to listen to the changes in real-time input values, immediately update the view display.Haha, Angularjs is quite simple, I hope this small note can arouse everyone's interest in Angularjs, and I will continue to update Angularjs's study notes later. Hope to be of help to everyone. If the above notes do not understand the place, although asked me, I will certainly give you answers. I wish you a happy life!
To be Continued ~ ~
Follow me from 0 to learn angularjs-notes 01
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
