A good way to start learning AngularJS is to create the classic application "Hello World!":
1. Create an HTML file using your favorite text editor, for example: helloworld.html.
2. Copy the following source code to your HTML file.
3. Open this HTML file in a web browser.
source code:
The code copy is as follows:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
Please run the above code in your browser to see the effect.
Now let's take a closer look at the code and see what's going on. When the page is loaded, the tag ng-app tells AngularJS to process the entire HTML page and boots the application:
The code copy is as follows:
<html ng-app>
This line loads the AngularJS script:
The code copy is as follows:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
(For details on AngularJS handling the entire HTML page, please see Bootstrap.)
Finally, the body in the tag is the template for the application, showing our greetings in the UI:
The code copy is as follows:
Hello {{'World'}}!
Note that the content of the {{}} tagged with double braces is the bound expression in the greeting, which is a simple string 'World'.
Below, let's look at a more interesting example: bind a dynamic expression to our greeting text using AngularJS.
Hello AngularJS World!
This example demonstrates bi-directional data binding for AngularJS:
1. Edit the helloworld.html document created earlier.
2. Copy the following source code to your HTML file.
3. Refresh the browser window.
source code:
The code copy is as follows:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
Please run the above code in your browser to see the effect.
This example has the following important notes:
1. Text input instruction <input ng-model="yourname" /> is bound to a model variable called yourname.
2. Double brace mark add yourname model variable to greeting text.
3. You don't need to register an event listener or add an event handler for the application!
Now try typing your name in the input box and the name you type will be updated immediately and displayed in the greeting. This is the concept of AngularJS two-way data binding. Any changes to the input box are immediately reflected to the model variable (one direction), and any changes to the model variable are immediately reflected to the greeting text (the other direction).
AngularJS application analysis
This section describes the three components of AngularJS applications and explains how they map to the Model-View-Controller Design Pattern:
Templates
A template is a file you write in HTML and CSS to present the view of the application. You can add new element and attribute tags to HTML as directives for AngularJS compiler. The AngularJS compiler is fully extensible, which means that with AngularJS you can build your own HTML tags in HTML!
Application Logic and Behavior
Application logic and behavior are the controllers you define in JavaScript. AngularJS is different from standard AJAX applications, you don't need to write a listener or DOM controller as they are already built into AngularJS. These features make your application logic easy to write, test, maintain and understand.
Model data (Data)
The model is extended from the properties of AngularJS scoped objects. The data in the model may be a Javascript object, an array, or a primitive type, and it doesn't matter, it's important that they all belong to AngularJS scoped objects.
AngularJS maintains bidirectional synchronization between the data model and the view interface UI through scope. Once the model state changes, AngularJS will immediately refresh the reflected in the view interface and vice versa.
In addition, AngularJS also provides some very useful service features:
1. The underlying services include dependency injection, XHR, cache, URL routing and browser abstract services.
2. You can also extend and add your own specific application services.
3. These services can make it very convenient for you to write WEB applications.