Shulou(Shulou.com)05/31 Report--

This article will explain in detail what is the use of AngularJS for you. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

AngularJS was born in 2009 and is used in many well-known Google applications, such as Gmail and Maps. It is mainly dedicated to building AJAX applications quickly. The address of the sample library in Github is: https://github.com/shyamseshadri/angularjs-book.

The most basic concepts are as follows:

Client template: in the multi-page application we used in the past, we mixed html and data assembly to generate a page and sent it to the browser, while the single-page AJAX application sent the html template and data directly to the browser and assembled by the client.

MVC, the concept is basically used in all Web applications.

Data binding, which supports two-way binding, is actually the implementation of the observer pattern, which is very convenient.

Dependency injection, through $scope, $location and other built-in objects, so that we only need to care about the actual needs, but not their dependencies, following the Demeter rule (least knowledge principle, Law_of_Demeter).

Directives, the framework provides a number of instructions that extend html and Dom, such as ng-controller specifying a part of the controller view and ng-model used to bind input data to model properties.

A simple example is as follows, the main note is that the entry demo in many places will omit the parameters behind ng-app, the Controller form of Angular, and the binding of related modules, the browser is willing to report errors, beginners need to be careful. In addition, the download and use of VS's IntelliSense plug-in for AngularJS is also a common problem.

View Code

In the above example, we can see that the boundary is declared through ng-app, that is, telling the framework which part is managed by it, the above are div elements; the double parenthesis interpolation syntax of `greeting.`text` and ng-bind with the same function are recommended; the use of ng-app namespaces to control the valid scope of the angular framework is well compatible with legacy programs; ng-repeat iterates the data Ng-model binds data, which is a two-way binding, changes in View affect model, and then an example of form input reinforces this concept; ng-click binds click event handlers.

Generally speaking, the flow of a request from the Angular program: the user requests the start page of the application; the browser initiates a http connection to the server to load the index.html template page; Angular is loaded into the page, waiting for the page to load, and then looks for the ng-app instruction to define the template boundary; then Augular traverses the template, looks for instructions and binding relationships, triggers the registration listener, performs DOM operations, and gets server initialization data Finally, connect to the server to request additional data (Ajax). This method of complete separation of template and data is very suitable for browsers to cache data and improve application performance.

Form input

It is very simple to use form elements in the framework. You can bind form elements to model attributes through ng-model, which is consistent with the effect of data binding in .NET; when the form is submitted, ng-submit automatically blocks the browser's default POST operation; $watch can monitor specific properties and fields in Model, while ng-change is mainly used to view form elements Ng-show and ng-hide are used for explicit and hidden elements, and are widely used in menu scenes.

View Code

Tip:

I believe you have been exposed to the concept of non-intrusive javascript for a long time, but through the above example, we will find that the use of angularJS does not do so, but the html template and related control code are mixed, which means that the framework is not reasonable. In fact, the previous extraction of the concept of non-intrusive was also due to the pain points of front-end development at that time: different browsers supported js differently and ran differently; event handlers all referred to functions of the global namespace, and there were naming conflicts during integration; event listeners bound data structures and behaviors, which were difficult to maintain. But for JS, it solves compatibility issues through the framework itself, integration issues through namespaces, and last but not least, all event handlers do not reference any DOM elements and events.

Module, controller, and data binding: no dependency module angular.module ('firstModule', [])

Scope and Event:scope are built-in objects, which are mainly used to deal with the data model. The scope of action is the same as the scope declared on the page $scope.greeting='Hello', `greeting`. When the scope of use is different and communication is needed, you need to use Event. The sample code is shown below.

$.scope. $emit ('event_emit',' message'); / / Child scope sends $.scope. $on ('event_emit', function (event, data) {}); / / parent scope accepts $.scope. $broadcast (' event_broad', 'message'); / / parent scope sends $.scope. $on (' event_broad', function (event, data) {}); / / Child scope accepts

Multi-view and routing: need to introduce angular-route.js

View Code

Dependency injection: angular.module ('firstModule') .controller (' diController', ['$scope',function ($scope) {}])

Service and Factory:Angular have built-in classes such as $location, $timeout, $rootScope and other services, and can provide additional services on their own. There are two ways to use Service. New is required when Service is used, while Factory is not needed.

View Code

Http operations: support ajax operations, including $http.get (url), $http.post (url, data), $http.put (url, data), $http.delete (url), $http.head (url).

Custom instructions: built-in many instructions, such as ng-repeat, ng-show, ng-model, etc., you can use a short instruction to implement a front-end component, such as.

Angular.module ('myApp', []) .directive (' helloWorld', function () {return {restrict: 'AE', replace: true, template:' Hello, Worldwide'};}) This is the end of this article on "what's the use of AngularJS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.