Home > Developer > Web Develop
Hello World!
A good way to start learning AngularJS is to create a classic application "Hello World !" :
Source code
<!doctype html> Run the above Code in your browser to view the effect.
Now let's take a closer look at the code and see what's going on. When this page is loaded, Markng-appTell AngularJS to process the entire HTML page and guide the application:
This line loads the AngularJS script:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
(For details about how AngularJS processes the entire HTML page, see Bootstrap .)
Finally, the text in the label is the template of the application, and our greetings are displayed in the UI:
Hello {{'World'}}!
Note: Use double braces to mark{{}}The content is the expression bound to the greeting, which is a simple string 'World '.
Next, let's look at a more interesting example: Use AngularJS to bind a dynamic expression to our greeting text.
Hello AngularJS World! This example demonstrates the bidirectional data binding of AngularJS (bi-directional data binding ):
- Edit the original helloworld.html document.
- Copy the following source code to your HTML file.
- Refresh the browser window.
Source code
<!doctype html>
Run the above Code in your browser to view the effect.
This example has the following important notes:
- Text input command
<input ng-model="yourname" />Bind toyourname.
- Double braces mark
yournameAdd model variables to greeting text.
- You do not need to register an event listener or add an event handler for the application!
Now, try to enter your name in the input box. The name you entered will be updated and displayed in the greeting. This is the concept of two-way Data Binding in AngularJS. Any changes in the input box are immediately reflected in the model variable (in one direction), and any changes to the Model Variable are immediately reflected in the greeting text (in another direction ).
AngularJS Application Analysis This section describes the three components of AngularJS applications and explains how they are mapped to Model-View-controller design patterns:
Templates) A template is a file written in HTML and CSS to display the view of an application. You can add new elements and attribute tags to HTML as instructions of AngularJS compiler. AngularJS compiler is fully scalable, which means that you can build your own HTML Tag in HTML through AngularJS!
Application Logic and Behavior) The logic and behavior of the application are controllers defined by you using JavaScript. AngularJS is different from standard AJAX applications. You do not need to write listeners or DOM controllers because they are already built into AngularJS. These features make your application logic easy to write, test, maintain, and understand.
Model Data) The model is extended from the attributes of AngularJS scope objects. The data in the model may be Javascript objects, arrays, or basic types. This is not important. Importantly, they all belong to AngularJS scope objects.
AngularJS maintains bidirectional synchronization between the data model and the UI of the View Interface through the scope. Once the model status changes, AngularJS will immediately refresh and reflect it in the view interface, and vice versa.
AngularJS also provides some useful service features:
- Underlying services include dependency injection, XHR, cache, URL routing, and browser abstraction services.
- You can also expand and add your own specific application services.
- These services allow you to easily write WEB applications.
If you do not have this http://code.angularjs.org/angular-1.0.1.min.js link, you can go to my csdn my download center to download!
Angular-1.0.1.min.js address: http://download.csdn.net/detail/confidence68/7586335
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
