First knowledge of angular

One Angularjs Introduction

1.AngularJS uses a different approach, and it tries to make up for the drawbacks of HTML itself in building applications.     Angularjs allows the browser to recognize the new syntax by using the structure we call Identifiers (directives). 2. Core features: MVVM, modularity, automated bidirectional data binding, semantic tagging, dependency injection, and more. Angularjs directly using the Web page itself as a template.

Ii.directives of the Angularjs

The ng-app directive marks the scope of the Angularjs script, and adding the Ng-app attribute in it means that the entire ANGULARJS script scope. You can use it directly, or you can specify a name.

Ng-controller = "str" specifies a ANGULARJS controller, which is equivalent to the component under the Ng-app module, and its greatest effect is to bind a scope ($scope) and HTML tags on the template together, qualifying $ Scope of Scope

ng-model= "" gets and modifies values with the Value property, two-way binding of the data

ng-bind= "" modifies a label inside the innerHTML, setting the value does not exist for the label element is not displayed, the data is not bidirectional

The {{}} interpolation syntax is the rendering data to the page. The interpolation symbol {{}} cannot replace the name of the property, and the value of the text content and property can be replaced.

ng-click= "Fun" Angularjs The Click event that comes with

ng-dblclick= "Fun" Angularjs the double-click event that comes with

ng-focus= "Fun" Get Focus event Angularjs comes with

ng-blur= "Fun" Angularjs The Lost Focus event

ng-change= "Fun" Angularjs of the event that comes with it

ng-submit= "Fun" Angularjs The form submission event that comes with

......

ng-class= "{Class style 1:true, class style 2:false}" Angularjs set State style

ng-style= "{Attribute 1: Value, Attribute 2: Value}" Angularjs Setting the state style

ng-readonly= "Boolean" Angularjs set read-only state, can submit data

ng-disable= "Boolean" Angularjs setting is not active, data cannot be submitted

ng-hide= "Boolean" Angularjs set the hidden state without changing the DOM structure

ng-show= "Boolean" Angularjs setting the display state without changing the DOM structure

ng-if= "Boolean" Angularjs set the If decision process, change the DOM structure, true to show that the dom,false hides the DOM element

ng-switch= "Value" Angularjs Setting the branch judgment process will change the DOM structure

ng-switch-when= " Judging value" shows the DOM of the corresponding value

Ng-switch-default The default value

ng-repeat Angularjs loops the flow of arrays and objects, and it re-qualifies a scope under which there is an object (containing various information).

Ng-view implements the hosting of the route, depending on the path, renders the corresponding page to the Web page, where Ng-view is located

Third, theuse of Angularjs

1, ANGULARJS package recommendations to the head section

2, using a Angularjsbatarang browser plug-in can assist the development

3. In the script tag

var app = Angular.module (' demo ', []);

Parameter one: The name of the module

Parameter two: Other module names to depend on

Function: Created a ANGULARJS module

App.controller (' Tian ', function ($http, $scope) {

$scope. Name = ' bound value ';

$scope. Click = function () {

$scope. Name = ' Bind method, rebind value inside method '

};

$http. Get (' Lisi.json ')

. Success (function (data) {

Console.log (data);

})

});

Parameter one: The name of the controller

Parameter two: a function with $scope, $http, $parse, $rootScope and other fixed parameters (no order)

Role: Create a controller and qualify the scope of the function

Iv.Dependency Injection in Angularjs

In the callback function, ANGULARJS will provide the object service corresponding to the parameter, and what function will be used to pass what parameters.

$scope the scope of the controller, an object can be internally bound to any property

$scope. $watch ("expression", function (Newvalue,oldvalue,scope) {}) is a method on the $scope that listens for changes in the value of an expression

$http is the ANGULARJS Ajax package.

$parse effect: Converting a ANGULARJS expression into a function

$rootScope can access the controller's root (parent) scope

$timeout is Angularjs's package for native timeout

$location is Angularjs's package for window native location

$location. Path () is a property of the $location object that can get the routing path

V.two-way data binding in Angularjs

Two-way binding: To bind our data and HTML documents, we just need to focus on the data, Dom operation by Angularjs to manage, one convenient, two can improve security (programmer write code bug probability decrease)

Vi.MVVM in the Angularjs

In angular, the MVVM pattern is divided into four main parts:

1.View: It focuses on the display and rendering of the interface, and in angular is a view template that contains a bunch of declarative directive.

2.ViewModel: It is the bond of view and model, which is responsible for the interaction and collaboration between view and model, it is responsible for providing the display data to view, and provides the way of the Command event operation model in view; in angular $ The scope object acts as the ViewModel role;

3.Model: It is the encapsulation carrier of the data related to the business logic of the application, it is the object of the business domain, the model does not care how it will be displayed or manipulated, so the models will not contain any interface to display related logic. In the Web page, most of the model is from the AJAX server to return data or global configuration objects, while the service in angular is to encapsulate and process these model-related business logic of the site, This type of business service is a domain service that can be reused by multiple controllers or other service providers.

4.Controller: This is not the core element of the MVVM pattern, but it is responsible for initializing the ViewModel object, which combines one or more services to get the business domain model placed on the ViewModel object. Enables the application interface to reach a usable state when it starts loading.

View cannot interact directly with the model, but by $scope the ViewModel to interact with the model. For interface form interaction, the Ngmodel instruction is implemented to synchronize the view and ViewModel. The Ngmodelcontroller contains the $parsers and $formatters two converter pipelines, which respectively implement the format of the view form input values to the model data type conversion and the model data to the View form data. The interactive command events for the user interface (such as Ngclick, Ngchange, and so on) are forwarded to the ViewModel object, and the change to the model is achieved through ViewModel. However, any changes to the model will also be reflected on the ViewModel and will be updated to view through the $scope "dirty Check Mechanism" ($digest). Thus, the separation of view and model is achieved, and the hierarchical architecture of the front-end logical MVVM is achieved.

Vii. What is a single page application

Essence: No refresh of the single page, when the user operation Ajax request data, the local update of our page, all the operations are done on this page, are controlled by JavaScript.

Philosophy: Better user experience, no pauses in user interaction

Problem: It's very troublesome to write.

Wen/I Am xiaoying (author of Jane's book)
Original link: http://www.jianshu.com/p/1d7b450ff967
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

First knowledge of angular