Home > Developer > Web Develop
Our entire series of study will go to write a simple blog prototype, if you have the energy to perfect landscaping.
But this is going to start with HelloWorld.
Angular.js file Loading We choose a CDN service provided by Bootstrap Chinese network.
http://www.bootcdn.cn/
We found 1.3.8 's Angular.js CDN address, referring to the page index.html
Http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js
Primary knowledge Angular.js:
It is a front-end MVC framework that corresponds to models, views, and controllers.
The page is run according to the instruction, the angular.js has a lot of instructions, the subsequent learning will be gradually applied, but also can define their own instructions.
The simplest single page is as follows:
<! DOCTYPE html>This simple page is ready to run Angular.js
We first see the top command Ng-app, which tells us angular.js to take over the parts between
Then all the instructions we have between the nodes will be processed.
Come down to a simple Hello world!, very simple.
Between <body>....</body> is the view area.
The data between {{}} 2 {} defined in Angular.js is model data, that is, the data defined between {{model data}} is from the model, and the data between them can also be changed, which is the meaning of two-way binding, the model can change the view, the view can change the model.
Since we don't have a controller defined on this simple page, how do we get the data from the current model? There's no way to take it.
However, because it is a two-way binding, we can change the model by assigning a value to the model.
<body><span>{{name= ' Hello world! '}} </span></body>We add a span in the body tag, the content area of the span defines a property name for the current model, and assigns the value Hello World.
Since it is a two-way binding, are we assigning variables that can be used directly in the view?
<body><span>{{name= ' Hello world! '}} </span><a style= "color:red;" >{{name}}</a></body>See, we use the {{name}} variable directly in the a tag to directly display the "Hello world!" above the assigned value
Let's look at a two-way binding, Ng-model specify model parameters.
<body><input type= "text" ng-model= "name"/> Display text,{{name}}</body>We see that input is bound to the model name parameter, so the value change of input directly causes the name value in the model to change. This is similar to {{name= ' Hello world! '}}.
Instead, we use {{name}} to bind the view to the model, because changes in the model cause the view to change in real time.
However, the above view binding is a little bit of a disadvantage, that is, when the page load lag or load augular.js failure, resulting in the middle of the Ng-app node binding is not angular.js timely processing. Results The user will see this descriptor {{name}} directly on the page, which is unfriendly , let's look at another binding ng-bind directive below.
<body><input type= "text" ng-model= "name"/> display text, <span ng-bind= "name" ></span></body>It also achieves two-way binding effect, which changes in real time.
All of this, we actually did not through JS to operate a DOM, this is angular.js attractive place.
Angular.js Quick Start Hello World
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
