Brief discussion on angular (a)--angularjs

　　Angular?　　

As a very good front-end advanced JS Framework, different from jquery encapsulated a lot of DOM operations, ANGULARJS application scenario is more special, mainly for data rendering or interaction. Since the acquisition of Google in 09, angular has been rapidly gaining worldwide popularity, Today's Angular2 have changed in a disruptive style.

Now for a simple discussion on the latest stable version of Angular1.4.9.

Angular is used to quickly build a SPA(Single page application).

A single page application has only one page, which is a carrier of the entire application, and its contents are all presented in the form of Ajax.
We know that the development of traditional Web site is divided into pages, each page uploaded to the server, and then by the service side according to the address we requested, the file back to the local rendering. now provide an application of the portal (that is, a single page), after taking back the file, its script in the course of execution will request the data we need, then we communicate with the server is only the data, the entire page is also stuck in a single page, the process of local refresh, reduce request size, etc. will bring a faster and better experience to the user.

　　

　　Angularjs characteristics?

Angular's authors embed a lot of Java ideas into this framework, including the idea behind MV*,MVVM, to make Web application development easier and faster, leading the front-end into the mv* era. It can be said that starting from the angular, the front-end framework began to focus on the front-end thinking, to stereotypes, Structured.

　　Mvc

Modular

Automating bidirectional data binding

Instruction (Directive) system

　　

　　Angular installation?

　　Download Angular.js's Package https://github.com/angular/angular.js/releases

Using Angular.js http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js on a CDN

Installing Bower install with Bower angular

Installing NPM install angular with NPM

　　

　　Start using?

Basic use:

NG-APP directive--the boundary of the angular application management. Is the entrance to Ng, which indicates that all instructions for the current element will be angular managed (parsed and manipulated). The Ng-app tag should be as small as possible; When you create multiple Ng-app, you can only perform the first one by default. The rear requires manual boot, angular.bootstrap ().

Ng-model bidirectional data binding directives--when angular executes a code fragment, it creates a separate storage space in memory to store the data models needed on the current page. establishes a binding relationship between the Value property of the current element and the property values of the object in the model.

　　Usage Summary:

Minimizing DOM operations on the page, freeing up the cumbersome dom operations in traditional JS, and restoring the nature of JS--the code that allows JS to focus on the business logic.

Combine page structure with logical data with simple instructions

Component-based programming with custom directives

More reasonable code structure and lower maintenance costs

　　

　　Mvc?

　　MVC is an application development idea, not a design pattern, and MVC divides the application into three parts: the Model View controller, which is used by the Organization to dispatch the corresponding processing (initialization) model, which is used to process business logic and data (less), Views are used to present data in a friendly manner.

　　MVC and MVVM

　　In MVC, because view has direct access to model and one-way dependent model, some business logic is also implemented in view, which makes it difficult to change;

MVVM separate the data logic and complete the binding to the UI elements, thus leaving the page. At the same time, MVVM's two-way binding makes it easier to maintain multiple areas on a page that depend on the same segment.

　　

　　Angular basic concepts?　

　　Module

One of the most important features of angular is the implementation of modular programming, which allows us to create a module that divides the functionality of a page into a functional business.

For example: var app = Angular.module (' MyAPP ', []);//two parameters representing the module name and dependencies, and if you do not rely on any module, the second parameter must also pass an empty array; two parameters represent creation, a parameter means get.

If you want the module you create to manage the entire element, you can add ng-app= "MyAPP" after the element.

　　Controller

　　A collection of dispatch logic that, through the App.controller method, creates a controller from the module, which belongs to the MyApp module. It is recommended that all controller names be terminated with the use of the hump naming method.

　　$scope (Context model)

For example: App.controller (' Democontroller ', function ($scope) {}); The second parameter is a function that executes automatically when the controller executes. There is a $scope in the parameters of the controller function, all the data models used on our page are stored in the $scope, so we simply assign the $scope to the controller during the execution.

Now let's add the controller to the view. ng-controller= " Democontroller ", let the view bind to the controller we have written, the created by Democontroller. $scope becomes the data source for this view, and changes are automatically synced to the background $scope.

So, we can think of $scope as a bridge to pass data between views and controllers, exposing data models (data, behavior).

　　Responsibilities of the Controller

Sets the initial state for the model in the application, exposes the data model or data behavior to the view through $scope, monitors the model changes, and makes corresponding actions.

　　The syntax of the controller

When you execute a controller function, the corresponding object is automatically injected according to the name of the parameter. Because of the way in which compression code is often used in a production environment, the name of the parameter is changed, so the standard way to register control is to pass the array through the second argument (the last member of the array is the original controller function, The other members are the object names to be injected, and the object to be entered is determined by the array members.

For example: Angular.module (' MyAPP '). Controller (' Democontroller ', [' $scope ', function ($scope) {}]);

If the functionality is more complex and may involve many models, it is recommended to use objects to store data separately in the model.

Angular basically does not operate the DOM, and if necessary, you can use the jqlite provided by angular.

An $scope is provided in the official API. $watch method, pass two parameters, monitor the change of the first expression, and execute the function in the second argument.

Example: $scope. $watch (' User.username ', function (Fir, sec) {});

　　An expression

{{}} expression--binds the application variable to the innerHTML of a paragraph. You can include numbers, strings, objects, arrays, and basic logical operators. Expressions can also implement one-way data binding, {{::}} Can only be synchronized to the page by the data model. Expressions can be written in HTML; conditional judgment is not supported, loop machine exception, filter is supported.

Because the parsing process of HTML will appear flash, the solution is as follows:

<style>[ng-cloak] {display:none; }</style>// add Display:none to the element at the beginning of execution; hide expression; the Ng-cloak property is automatically removed after the angular has finished executing.

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

Brief discussion on angular (a)--angularjs