Home > Developer > JavaScript
AngularJS getting started with Hello World !, Angularjs getting started tutorial
A good way to start learning AngularJS is to create a classic application "Hello World !" :
1. Use your favorite text editor to create an HTML file, such as helloworld.html.
2. Copy the following source code to your HTML file.
3. Open the HTML file in a web browser.
Source code:
Copy codeThe Code 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>
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 the page is loaded, Mark ng-app to tell AngularJS to process the entire HTML page and guide the application:
Copy codeThe Code is as follows:
<Html ng-app>
This line loads the AngularJS script:
Copy codeThe Code is as follows:
<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:
Copy codeThe Code is as follows:
Hello {'World '}}!
Note: The content marked with braces {} is the expression bound to the greeting. This expression 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 ):
1.edit the original helloworld.html document.
2. Copy the following source code to your HTML file.
3. Refresh the browser window.
Source code:
Copy codeThe Code 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>
Run the above Code in your browser to view the effect.
This example has the following important notes:
1. Bind The text input command <input ng-model = "yourname"/> to a model variable named yourname.
2. Add the yourname model variable to the greeting text with double braces.
3. You do not need to register an event listener for the application or add an event handler!
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:
1. Underlying services include dependency injection, XHR, cache, URL routing, and browser abstraction services.
2. You can also expand and add your own specific application services.
3. These services allow you to easily write WEB applications.
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
