AngularJS introductory tutorial Hello World!_AngularJS

A great way to start learning AngularJS is to create the classic application "Hello World!":

1. Using your favorite text editor, create an HTML file, for example: helloworld.html.
2. Copy the source code below to your HTML file.
3. Open this HTML file in a web browser.

Source code:

Copy code The code is as follows:

            


Hello {{'World'}}!

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 loads, the tag ng-app tells AngularJS to process the entire HTML page and bootstrap the application:

Copy code The code is as follows:

This line loads the AngularJS script:

Copy code The code is as follows:

(For details on how AngularJS handles the entire HTML page, see Bootstrap.)

Finally, the body text in the tag is the template applied to display our greeting in the UI:

Copy code The code is as follows:

Hello {{'World'}}!

Note that the content marked with double curly braces {{}} is the expression bound in the greeting. This expression is a simple string 'World'.

Next, let’s look at a more interesting example: using AngularJS to bind a dynamic expression to our greeting text.

Hello AngularJS World!

This example demonstrates bi-directional data binding in AngularJS:

1. Edit the helloworld.html document created previously.
2. Copy the source code below to your HTML file.
3. Refresh the browser window.

Source code:

Copy code The code is as follows:

            


Your name:
                                                                                        Hello {{yourname || 'World'}}!

Please run the above code in your browser to see the effect.

There are a few important things to note about this example:

1. The text input command is bound to a model variable called yourname.
2. Double curly brace tag adds yourname model variable to the greeting text.
3. You don’t need to register an additional event listener or add event handler for this application!

Now try typing your name in the input box, the name you type will be updated and displayed in the greeting immediately. This is the concept of two-way data binding in AngularJS. Any changes to the input box are immediately reflected in the model variables (one direction), and any changes to the model variables are immediately reflected in the greeting text (the other direction).

Analysis of AngularJS applications

This section describes the three components of an AngularJS application and explains how they map to the Model-View-Controller design pattern:

Templates

Templates are files you write in HTML and CSS that represent the views of your application. You can add new elements and attribute tags to HTML as instructions to the AngularJS compiler. The AngularJS compiler is fully extensible, which means with AngularJS you can build your own HTML markup in HTML!

Application logic (Logic) and behavior (Behavior)

Application logic and behavior are controllers you define in JavaScript. AngularJS is different from standard AJAX applications in that you do not need to write additional listeners or DOM controllers as they are already built into AngularJS. These features make your application logic easy to write, test, maintain, and understand.

Model data (Data)

Models are derived from properties of AngularJS scope objects. The data in the model may be Javascript objects, arrays, or primitive types. It doesn't matter. The important thing is that they all belong to AngularJS scope objects.

AngularJS uses scope to maintain two-way synchronization between the data model and the view interface UI. Once the model state changes, AngularJS will immediately refresh the view interface and vice versa.

In addition, AngularJS also provides some very useful service features:

1. The underlying services include dependency injection, XHR, caching, URL routing and browser abstraction services.
2. You can also extend and add your own specific application services.
3. These services allow you to write WEB applications very conveniently.