AngularJS introduction to Hello World!
- 2020-03-30 04:32:05
- OfStack
A good way to start learning AngularJS is to create the classic "Hello World!" application. :
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.
The source code:
<!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 boot the application:
<html 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 in the tag is the template for the application, which displays our greeting in the UI:
Hello {{'World'}}!
Note that the content of the {{}}} tag with double braces is the expression bound in the greeting, which 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 the bi-directional data binding of AngularJS:
1. Edit the helloworld.html document you created earlier.
2. Copy the following source code to your HTML file.
Refresh the browser window.
The source code:
<!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.
There are a few important caveats to this example:
1. Text input instruction < Input ng - model = "yourname" / > Bind to a model variable called yourname.
2. Double brace tag adds yourname model variable to the greeting text.
3. You don't need to register an additional event listener or add an event handler for the application!
Now try typing your name in the input box. 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 field 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 the AngularJS application and explains how they map to the model-view-controller design pattern:
Templates
A template is a file that you write in HTML and CSS that presents a view of your application. You can add new elements and attribute tags to HTML as directives to the AngularJS compiler. The AngularJS compiler is fully extensible, which means that with AngularJS you can build your own HTML markup in HTML!
Application Logic and Behavior
Application logic and behavior are controllers that you define in JavaScript. Unlike standard AJAX applications, you don't need to write additional 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 derived from the properties of the AngularJS scope object. The data in the model may be Javascript objects, arrays, or primitive types, and it doesn't matter, they all belong to the AngularJS scope.
AngularJS USES scope to keep the data model bidirectional to the view interface UI. As soon as the model state changes, AngularJS immediately refreshes and reflects it in the view interface, and vice versa.
In addition, AngularJS 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 make it easy to write WEB applications.