Angularjs Quick Start

Source: Internet
Author: User
Tags event listener

Http://www.angularjs.cn/A002Hello world!

A good way to start learning Angularjs is to create a classic app "Hello world!" :

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

Source

<!doctype html> ng-app>  <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>  <body> Hello {{‘World‘}}! </body>

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:

 ng-app>

This line loads the Angularjs script:

<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:

    1. Edit the helloworld.html document that you created earlier.
    2. Copy the following source code to your HTML file.
    3. Refreshes the browser window.

Source

<!doctype html> Ng-app>  <script src=></script> <body> Your name: <input type= "text"   Ng-model= "yourname"  placeholder = "world" >  Hello {{Yourname | | ' World '}}! </body></HTML>       

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

This example has several important considerations:

    • Text input directives <input ng-model="yourname" /> are bound to a named yourname model variable.
    • The double curly brace tag yourname adds the model variable to the greeting language book.
    • You don't need to register an event listener or add an event handler for the app!

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 Application

This 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 data

Models 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:
    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 app services.
    3. These services make it easy for you to write Web apps.

Angularjs Quick Start

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.