Home > Developer > JavaScript
AngularJS is a JS framework created by Google. It can be used to expand HTML vocabulary in applications and declare Dynamic Content in web applications.
AngularJS allows you to extend the HTML syntax to clearly and concisely express components in the application, and allows you to use standard HTML as your template language, angularJS can automatically synchronize data from the UI (View) with JavaScript (model) through bidirectional data binding.
Feature 1: bidirectional data binding
Data Binding may be the coolest and most practical feature of AngularJS. It helps you avoid writing a large amount of initial code, thus saving development time. A typical web application may contain 80% of the Code for processing, querying, and listening to the DOM. Data Binding requires less code and you can focus on your applications.
Let's imagine that Model is a simple fact in your application. Your Model is the part you use to read or update data. The Data Binding command provides a method for you to project a Model to a view. These projections can be seamlessly applied to web applications without any impact.
Traditionally, the model changes. Developers need to manually process DOM elements and reflect attributes to these changes. This two-way process. On the one hand, changes in the model drive changes in the DOM element, on the other hand, changes in the DOM element will also affect the Model. This is more complex in user interaction because developers need to process and parse these interactions, integrate them into a model, and update the View. This is a complicated manual process. When an application is very large, it will be very difficult.
There must be a better solution here! That is, AngularJS's two-way Data Binding can synchronize DOM and Model.
Here is a very simple example to demonstrate a two-way binding between an input box and an
[Html]
<! Doctype html>
<Html ng-app>
<Head>
<Script src = "http://code.angularjs.org/angular-1.0.0rc10.min.js"> </script>
</Head>
<Body>
<Div>
<Label> Name: </label>
<Input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
<Hr>
<H1> Hello, {yourName | 'World '}}! </H1>
</Div>
</Body>
</Html>
<! Doctype html>
<Html ng-app>
<Head>
<Script src = "http://code.angularjs.org/angular-1.0.0rc10.min.js"> </script>
</Head>
<Body>
<Div>
<Label> Name: </label>
<Input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
<Hr>
<H1> Hello, {yourName | 'World '}}! </H1>
</Div>
</Body>
</Html>
1. Mark ng-app to tell AngularJS to process the entire HTML page and guide the application:
[Html]
<Html ng-app>
<Html ng-app> 2. Load the AngularJS script in this line:
[Html]
<Script src = "... angular. js"> </script>
<Script src = "... angular. js "> </script> 3. Bind the input command <input ng-model =" yourname "/> to a model variable named yourname:
[Html]
<Input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
<Input type = "text" ng-model = "yourName" placeholder = "Enter a name here"> 4. Finally, the body of the label is the template of the application, display our greetings in the UI:
[Html]
<H1> Hello, {yourName | 'World '}}! </H1>
<H1> Hello, {yourName | 'World '}}! </H1> note that the content marked with braces {} is the expression bound to the greeting.
Feature 2: Template
In AngularJS, a template is an HTML file. However, HTML content is extended and contains a lot of content that helps you map models to views.
> The HTML template is parsed to the DOM by the browser.
> DOM is then input by AngularJS compiler.
> AngularJS will traverse the DOM template to generate some guidance, namely, directive (directive ).
> All commands are responsible for setting data binding for views.
We need to understand that AuguarJS does not operate on the template as a String. The input of AngularJS is DOM rather than string. Data Binding is a DOM change, not a string connection or innerHTML change. Using DOM as input rather than strings is the biggest reason AngularJS differs from other frameworks. Using DOM allows you to expand command vocabulary and create your own commands, or even develop reusable components.
The biggest benefit is creating a tight workflow for designers and developers. The designer can develop tags as usual, and then the developer will take them to add functions. Data Binding will make the process very simple.
Here is an example. We use the ng-repeat command to loop the Image array and add the img template, as shown below:
[Javascript]
Function AlbumCtrl ($ scope ){
Scope. images = [
{"Image": "img/image_01.png", "description": "Image 01 description "},
{"Image": "img/image_02.png", "description": "Image 02 description "},
{"Image": "img/image_03.png", "description": "Image 03 description "},
{"Image": "img/image_04.png", "description": "Image 04 description "},
{"Image": "img/image_05.png", "description": "Image 05 description "}
];
}
<Div ng-controller = "AlbumCtrl">
<Ul>
<Li ng-repeat = "image in images">
</Li>
</Ul>
</Div>
Function AlbumCtrl ($ scope ){
Scope. images = [
{"Image": "img/image_01.png", "description": "Image 01 description "},
{"Image": "img/image_02.png", "description": "Image 02 description "},
{"Image": "img/image_03.png", "description": "Image 03 description "},
{"Image": "img/image_04.png", "description": "Image 04 description "},
{"Image": "img/image_05.png", "description": "Image 05 description "}
];
}
<Div ng-controller = "AlbumCtrl">
<Ul>
<Li ng-repeat = "image in images">
</Li>
</Ul>
</Div>
Feature 3: MVC
AngularJS for client applications incorporates the traditional basic MVC principles. The MVC or Model-View-Controll design pattern varies with people. AngularJS does not execute MVC in the traditional sense, but is closer to MVVM (Moodel-View-ViewModel ).
Model
Model is simple data in applications. It is generally a simple javascript Object. There is no need to inherit the classes of the framework here. It can be accessed using proxy object encapsulation or special setter/getter methods. In fact, our method for processing vanilla javascript is a very good feature, which makes it easier to use the prototype of the application.
ViewModel
Viewmodel is an object that provides special data and methods to maintain a specified view.
Viewmodel is an object of $ scope and only exists in AnguarJS applications. $ Scope is just a simple js object, which uses simple APIs to detect and broadcast status changes.
Controller
The controller sets the initial state and parameterized $ scope method to control the behavior. The controller that needs to be pointed out does not save the status or interact with the remote service.
View
View is the HTML generated after AngularJS parses and renders and binds. This section helps you create a web application architecture. $ Scope has a reference for data, the controller defines behavior, view processing layout and interaction.
Feature 4: Dependency Injection (DI)
AngularJS has a built-in dependency injection subsystem that helps developers develop, understand, and test applications more easily.
DI allows you to request your dependencies, rather than searching for them by yourself. For example, we need something. DI is responsible for finding and providing it to us.
To get the core AngularJS service, you only need to add a simple service as the parameter. AngularJS will detect and provide it to you:
[Javascript]
Function EditCtrl ($ scope, $ location, $ routeParams ){
// Something clever here...
}
Function EditCtrl ($ scope, $ location, $ routeParams ){
// Something clever here...
} You can also define your own services and inject them:
[Javascript]
Angular.
Module ('myservicemodule ', []).
Factory ('window y', ['$ Windows', function (win ){
Return function (msg ){
Win. alert (msg );
};
}]);
Function myController (scope, policyservice ){
Scope. callpolicy = function (msg ){
NotifyService (msg );
};
}
MyController. $ inject = ['$ scope', 'movie y'];
Angular.
Module ('myservicemodule ', []).
Factory ('window y', ['$ Windows', function (win ){
Return function (msg ){
Win. alert (msg );
};
}]);
Function myController (scope, policyservice ){
Scope. callpolicy = function (msg ){
NotifyService (msg );
};
}
MyController. $ inject = ['$ scope', 'movie y'];
Feature 5: Directives (command)
Do you also want the browser to do something interesting? AngularJS can do this.
Command can be used to create custom labels. They can be used to decorate elements or manipulate DOM attributes.
Here is an example. It listens to an event and updates its $ scope, as shown below:
[Javascript]
MyModule. directive ('mycomponent', function (mySharedService ){
Return {
Restrict: 'E ',
Controller: function ($ scope, $ attrs, mySharedService ){
$ Scope. $ on ('handlebroadcast', function (){
$ Scope. message = 'ctive ve: '+ mySharedService. message;
});
},
Replace: true,
Template: '<input>'
};
});
MyModule. directive ('mycomponent', function (mySharedService ){
Return {
Restrict: 'E ',
Controller: function ($ scope, $ attrs, mySharedService ){
$ Scope. $ on ('handlebroadcast', function (){
$ Scope. message = 'ctive ve: '+ mySharedService. message;
});
},
Replace: true,
Template: '<input>'
};
});
Then, you can use this custom directive:
[Javascript]
<My-component ng-model = "message"> </my-component>
<My-component ng-model = "message"> </my-component> using a series of components to create your own applications makes it easier to add, delete and update functions.
Additional features: Testing
AngularJS contains test cases to help you perform the test more conveniently. Why not?
JS is a dynamic compile language, not a compilation type, so it is very difficult to write and test.
AngularJS is developed into a testable framework. It even contains point-to-point unit test runner. If you like this feature,
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
