AngularjsIt is a great JavaScript framework that is not only attractive to developers, but also outstanding to UI designers. In this tutorial, we will briefly introduceAngularjsSeveral important essential features, and how it can make your web application more powerful!
Introduction to augularjs
AngularjsIt is a new and powerful client technology that provides you with a way to develop powerful applications. This method exploits and extends HTML, CSS, and JavaScript, and makes up for some of their obvious shortcomings. HTML should be used to implement the dynamic content developed by it.
In this article, we talk about some of the most importantAngularjsFunctions and features. Our goal is to develop interesting applications on your own after reading.
Feature 1: bidirectional data bindingData Binding may beAngularjsThe coolest and most practical features. 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 isAngularjsTo synchronize the Dom and model.
Here is a very simple example to demonstrate a two-way binding between an input box and an
<! 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}}! </ h1>
</ div>
</ body>
</ html>
Feature 2: Template
In AngularJS, a template is an HTML file. But the content of HTML is expanded to include a lot of content that helps you map models to views.
The HTML template will be parsed into the DOM by the browser. The DOM then becomes the input to the AngularJS compiler. AngularJS will traverse the DOM template to generate some guidance, that is, directives. All instructions are responsible for setting data binding for the view.
We need to understand that AugustarJS does not treat templates as Strings. The input to AngularJS is the DOM, not the string. Data binding is a DOM change, not a string concatenation or innerHTML change. Using DOM as input instead of strings is the biggest reason AngularJS is different from other frameworks. Using the DOM allows you to expand the instruction vocabulary and create your own instructions and even develop reusable components.
The biggest benefit is that it creates a tight workflow for designers and developers. Designers can develop tags as usual, and then developers take over to add functionality. Data binding will make this process very simple.
Here is an example, we use the ng-repeat instruction to loop the image array and add the img template, as follows:
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">
<img ng-src = "{{image.thumbnail}}" alt = "{{image.description}}">
</ li>
</ ul>
</ div>
One more thing worth mentioning here, AngularJS does not force you to learn a new syntax or come up with your template from your application.
Feature 3: MVC
Developing AngularJS for client applications incorporates the basic principles of traditional MVC. MVC or Model-View-Controll design patterns can mean different things to different people. AngularJS does not perform MVC in the traditional sense and is closer to MVVM (Moodel-View-ViewModel).
Model
The model is simple data in the application. Generally simple JavaScript objects. There is no need to inherit the framework's classes, use proxy objects to encapsulate them, or use special setter / getter methods to access them. In fact, the way we deal with vanilla javascript is a very good feature, this method makes us use the prototype of the application less.
ViewModel
A viewmodel is an object that provides special data and methods to maintain a specified view.
viewmodel is an object of $ scope and exists only in AnguarJS applications. $ scope is just a simple js object. This object uses a simple API to detect and broadcast state changes.
Controller
The controller is responsible for setting the initial state and parameterizing the $ scope method to control behavior. It should be noted that the controller does not save state or interact with remote services.
View
View is the HTML generated by AngularJS after rendering and binding. This section helps you create the architecture of your web application. $ scope has a reference to the data, the controller defines the behavior, and the view handles the layout and interaction.
Feature 4: Dependency Injection (DI)
AngularJS has a built-in dependency injection subsystem that can help developers to develop, understand and test applications more easily.
DI allows you to request your dependencies instead of finding them yourself. For example, we need something, and DI is responsible for finding it and providing it to us.
In order to get the core AngularJS service, just add a simple service as a parameter, AngularJS will detect and provide you:
function EditCtrl ($ scope, $ location, $ routeParams) {
// Something clever here ...
}
You can also define your own services and have them injected:
angular.
module ('MyServiceModule', []).
factory ('notify', ['$ window', function (win) {
return function (msg) {
win.alert (msg);
};
}]);
function myController (scope, notifyService) {
scope.callNotify = function (msg) {
notifyService (msg);
};
}
myController. $ inject = ['$ scope', 'notify'];
Feature five: Directives
Directives are 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 attributes.
Here is an example, it listens to an event and updates its $ scope accordingly, 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 use:
<my-component ng-model = "message"> </ my-component>
Using a series of components to create your own application will make it easier for you to add, delete and update functions.
Extra features: testing
AngularJS includes test cases to help you execute tests more conveniently. Why not?
JS is a dynamic parsing language, not a compiled type, so it is very difficult to write tests.
AngularJS was developed as a testable framework. It even includes 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.
to sum up
In this tutorial, we have summarized 6 key features of AngularJS. If you are interested in AngularJS, please visit http://angularjs.org
I strongly recommend everyone to join the maillist, you will definitely find a lot of useful information.
Source: 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
