Home > Developer > Web Develop
A good way to start learning Angularjs is to create a classic app "Hello world!" ：
Source
<!DOCTYPE HTML><HTMLNg-app> <Head> <Scriptsrc= "Http://code.angularjs.org/angular-1.0.1.min.js"></Script> </Head> <Body>Hello {{' World '}}! </Body></HTML>
Please run the above code to see the effect in your browser.
Now let's take a closer look at the code and see what's going on. When the page is loaded, the markup ng-app tells Angularjs to process the entire HTML page and boot the app:
This line loads the Angularjs script:
<src= "Http://code.angularjs.org/angular-1.0.1.min.js"></ Script >
(For details on how ANGULARJS handles the entire HTML page, see Bootstrap.) ）
Finally, the body of the tag is the applied template that displays our greeting in the UI:
Hello {{‘World‘}}!
Note that the content marked with the double curly braces {{}} is the expression that is bound in the greeting, which is a simple string ' world '.
Let's look at a more interesting example: use Angularjs to bind a dynamic expression to our greetings language book.
Hello AngularJS world!This example demonstrates two-way data binding for ANGULARJS, which is bi-directional:
Source
<!DOCTYPE HTML><HTMLNg-app> <Head> <Scriptsrc= "Http://code.angularjs.org/angular-1.0.1.min.js"></Script> </Head> <Body>Your Name:<inputtype= "text"Ng-model= "Yourname"placeholder= "World"> <HR>Hello {{Yourname | | | ' World '}}! </Body></HTML>
Please run the above code to see the effect in your browser.
This example has several important considerations:
<input ng-model="yourname" /> are bound to a named yourname model variable.yourname adds the model variable to the greeting language book.Now try typing your name in the input box, and the name you type will be immediately updated to appear in the greeting. This is the concept of ANGULARJS bidirectional data binding. Any changes to the input box are immediately reflected in the model variable (One Direction), and any changes to the model variable are immediately reflected in the greeting text (the other side).
Analysis of ANGULARJS ApplicationThis section describes the three components of a ANGULARJS application and explains how they map to the model-view-Controller design pattern:
Templates (Templates)Templates are files that you write in HTML and CSS to show the view of your app. You can add new elements and attribute tags to HTML as instructions for the Angularjs compiler. The ANGULARJS compiler is fully extensible, meaning that by angularjs you can build your own HTML markup in HTML!
Application logic and Behavior (Behavior)The application logic and behavior are the controllers that you define with JavaScript. Angularjs Unlike standard AJAX applications, you do not need to write listeners or DOM controllers separately because they are already built into the ANGULARJS. These features make your application logic easy to write, test, maintain, and understand.
Model dataModels are derived from the properties of Angularjs scope objects. The data in the model is probably a JavaScript object, an array, or a primitive type, which is not important, and it is important that they belong to the Angularjs scope object.
ANGULARJS maintains a bidirectional synchronization of the data model and the view interface UI through scopes. Once the model state changes, ANGULARJS is immediately refreshed and reflected in the view interface, and vice versa.
In addition, ANGULARJS provides some of the most useful service features:Original: http://www.angularjs.cn/A002
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
