AngularJS is an awesome JavaScript framework that is not only attractive to developers, but also good for UI designers. In this tutorial, we'll simply introduce some of AngularJS 's heavyweight features and how it can make your web app more powerful!
Augularjs Brief IntroductionAngularJS is a new and powerful client-side technology that provides a way for you to develop powerful applications. This approach leverages and expands html,css and JavaScript, and compensates for some of their very obvious shortcomings. Something that should have been implemented using HTML and now developed by it.
In this article, we describe some of the most important AngularJS features and features. Our goal is to read and you can start developing some interesting apps yourself.
Feature one: two-way data bindingData binding is probably the coolest and most practical feature of AngularJS . It helps you avoid writing large amounts of initial code to save development time. A typical Web application might contain 80% of the code used to process, query, and listen to the DOM. Data binding is less code and you can focus on your application.
Let's imagine that model is a simple fact in your application. Your model is the part you use to read or update. The data binding directive provides a way for your model to project to view. These projections can be seamless, without compromising the application to the Web application.
Traditionally, when model has changed. The developer needs to handle the DOM elements manually and reflect the attributes into those changes. This is a two-way process. On the one hand, model changes drive the change of elements in the DOM, and on the other hand, changes in DOM elements affect the model. This is more complex in user interaction, as developers need to process and parse these interactions, then fuse into a model and update the view. This is a manual and complex process, and when an application is very large, it can be a very laborious task.
There must be a better solution here! That's AngularJS 's bidirectional data binding, which synchronizes the DOM and model, and so on.
Here is a very simple example that shows a two-way binding of an input box and a
<!doctype html>Feature Two: Templates
<script src= "Http://code.angularjs.org/angular-1.0.0rc10.min.js" ></script>
<body>
<div>
<label>Name:</label>
<input type= "text" ng-model= "YourName" placeholder= "Enter a name Here" >
</div>
</body>In AngularJS , a template is an HTML file. But the HTML content has expanded to include a lot of content that helps you map the model to the view.
The HTML template will be parsed into the DOM by the browser. The DOM then becomes the input of the AngularJS compiler. AngularJS will traverse the DOM template to generate some guidance, namely, Directive (directives). All instructions are responsible for setting data bindings for the view.
We have to understand that AUGUARJS does not manipulate the template as a string. The input AngularJS is Dom rather than string. Data binding is a DOM change, not a connection to a string or a innerhtml change. Using the DOM as input, rather than as a string, is the biggest reason AngularJS differs from other frameworks. Using the DOM allows you to extend the instruction vocabulary and create your own commands, and even develop reusable components.
The biggest benefit is creating a tight workflow for designers and developers. Designers can develop tags as usual, and then developers come up with the ability to add features, and data binding will make the process very simple.
Here's an example where we use the Ng-repeat directive to loop through an array of images and add an IMG template, as follows:
function Albumctrl ($scope) {
Scope.images = [
{"Image": "Img/image_01.png", "description": "Image description"},
{"Image": "Img/image_02.png", "description": "Image description"},
{"Image": "Img/image_03.png", "description": "Image description"},
{"Image": "Img/image_04.png", "description": "Image description"},
{"Image": "Img/image_05.png", "description": "Image description"}
];
}
<div ng-controller= "Albumctrl" >
<ul>
<li ng-repeat= "image in Images" >
</li>
</ul>
</div>Here's one more thing to mention, Angularjs doesn't force you to learn a new grammar or to present your template from your app.
Feature Three: MVCDeveloping AngularJS for client applications absorbs the traditional MVC fundamentals. MVC or Model-view-controll Design patterns may mean different things to different people. Angularjs does not perform the traditional MVC, which is closer to MVVM (Moodel-view-viewmodel).
ModelModel is a simple data in the application. It is generally a simple JavaScript object. There is no need to inherit the classes of the framework, use the proxy object encapsulation, or use a special Setter/getter method to access it. In fact, our approach to vanilla JavaScript is a very good feature, and this approach allows us to use fewer prototypes of the application.
ViewModelViewModel is an object that provides special data and methods to maintain the specified view.
ViewModel is an object of $scope and exists only in ANGUARJS applications. $scope is just a simple JS object that uses a simple API to detect and broadcast state changes.
ControllerThe controller is responsible for setting the initial state and parameterized $scope method to control the behavior. The controller that needs to be noted does not save the state or interact with the remote service.
ViewView is the HTML that is generated after AngularJS parsing and after rendering and binding. This section helps you create the architecture of your Web App. $scope has a reference to the data, the controller defines the behavior, the view handles the layout, and the interaction.
Feature Four: Dependency Injection (Dependency injection, DI)AngularJS has built-in dependency injection subsystems that can help developers develop, understand, and test applications more easily.
DI allows you to ask for your dependence instead of looking for it yourself. For example, we need a thing that DI is responsible for creating and providing to us.
In order to get the core AngularJS service, just add a simple service as a parameter,AngularJS will detect and provide to you:
function Editctrl ($scope, $location, $routeParams) {
Something Clever here ...
}You can also define your own services and let them inject:
Feature five: directives (instruction)Angular.
Module (' Myservicemodule ', []).
Factory (' Notify ', [' $window ', function (Win) {
return function (msg) {
Win.alert (msg);
};
}]);
function Mycontroller (scope, notifyservice) {
Scope.callnotify = function (msg) {
Notifyservice (msg);
};
}The directive is my personal favorite feature. Do you also want the browser to do something interesting? Then AngularJS can do it.
Directives can be used to create custom labels. They can be used to decorate elements or manipulate DOM properties.
Here is an example that listens for an event and updates its $scope, as follows:
Mymodule.directive (' MyComponent ', function (Mysharedservice) {
return {
Restrict: ' E ',
Controller:function ($scope, $attrs, Mysharedservice) {
$scope. $on (' Handlebroadcast ', function () {
$scope. Message = ' Directive: ' + mysharedservice.message;
});
},
Replace:true,
Template: ' <input> '
};
});You can then use this custom directive to:
<my-component ng-model= "Message" ></my-component>Using a series of components to create your own app will make it easier for you to add, remove and update features.
Additional Features: TestingAngularJS includes test cases to help you perform your tests more easily. Why not?
JS is a dynamic, analytic language, not a compilation type, so it's very difficult to write tests.
The AngularJS is opened as a testable framework. It even contains a point-to-point unit Test Runner. If you like this feature, check out this project: Https://github.com/angular/angular-seed
Once you run this project, you can see the following output:
The API documentation is a complete point-to-point test that explains how the entire architect works. By looking at these tests, you will have a deeper understanding of AngularJS .
SummarizeIn this tutorial, we summarize the key features of the 6 AngularJS . If you are interested in Angularjs, please visit http://angularjs.org
I strongly encourage you to join maillist and you will definitely find a lot of useful information.
JavaScript Tutorial: Five cool features of Angularjs
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
