Angular JS usage record

jquery itself is not a framework, but just a tool to manipulate the DOM, its core is the operation of the DOM;

At present the front-end frame of the fire: backbone, Angularjs, React, Avalon, Vue;

ANGULARJS is a framework developed by Google and maintained, especially for the framework of the SPA (single page) application development, but does not support on-demand loading; mv*;

The MVVM framework reaches the View and logic (module) at the same time, while updating;

1.ng-app--directives that enable the document to have the ability to angularjs (view and logic blending);

The core of angular is the simultaneous binding and updating of the view and logic;

Angularjs can greatly reduce the DOM's operation, but it does not affect its hybrid application with jquery. But the ideal development, is not want to angular.js in the jquery code, because to maintain the unity of the framework ;

Angular.js the most basic and also the most important part

Directives--"directive ng-*

custom command show = ';

Data Binding--"(to achieve the view and data binding, greatly reduce the DOM operation;) {{*}}: For example {{name}} is located under the scope of a controller module;

Core Data binding $scope.itemlist = ItemList;

Filter is filtered by a single pipe;　name | Uppercase---->>>----|---->>> Data Pipeline

<ul ng-repeat= "Item in Carlist | Num_nice: {num:5} "></ul>//filter out a quantity of 5, or expressed as | Filter:{num:5};

App.filter (' Num_nice ', function (arr, param) {

Arr to filter the array, Parma represents the incoming object;

});

Controller-"Control layer"

Each control layer has its own scope, so that their data binding is independent of their own scope;

Angular three major functions:

1. The view real-time reaction data changes, greatly reduces the DOM operation;

2.directive implementation component; (Templateurl property can implement asynchronous request)

3. Routing;

Routing configuration for ———— angular

1 varApp = Angular.module ("Mytodo", [' Ngroute ']);2 //configuration of the route:3App. Config (function($routeProvider) {4     //we implemented a route on the I want You project,5     //here Angular.js to help us achieve a route6     7     varRouteconfig = {8Templateurl: "Body.html",//view Area v9Controller: "Mytodoctrl"//Control Area CTen         /*controller: ' Mytodoctrl '*/ One     } A  -     varOhter_config = { -Templateurl: "Other.html" the     } -     //If the route does not match to a hash, let it jump to body.html -     //If the hash that the router is with is Index.html#/all or -     //Index.html#/comp Index.html#/status +     //assuming that the router's matching path is Index.html#/!/allssssssssss -     //match fails, it is automatically redirected to Index.html#/all via otherwise + $routeProvider. AWhen ("", routeconfig). at       //Status: It corresponds to our page's Hash:all completed active -       //The priority of routing rules is determined in the order in which they are written -When ("/other", ohter_config). -When ("/:status_id", routeconfig). -Otherwise ({redirectto: "/all" }); -});

———— Get Local Storage

1 functionStore (namespace, data) {2     if(Arguments.length > 1) {3 Localstorage.setitem (namespace, json.stringify (data));4}Else {5         varobj =Localstorage.getitem (namespace);6         return(obj && json.parse (obj)) | |NULL7     }8}

Examples of ———— core data structures

1 //---of core data structures2 varCoreobj = {3     //is complete4Completed:false,5Title: ' I didn't finish the headline '6 }7 varSobj = {8Completed:true,9Title: ' I was to finish the headline 'Ten } One varItemList = [];

———— Control Layer C

1App.controller ("Mytodoctrl",function($scope, $routeParams, $filter) {2 3         //$filter the filter module in the--->ng, there are some simple ways to define it, and you can use it directly4         //$scope The core scope of---> Controller, and implement data and view binding function--$scope. Variable (variable name) is set at the view level, binding and logical operations are performed at the control level, and the view layer updates the variable in real time. 5         //$routeParams--Router parameters6         //a global control layer that controls everything in it, data binding and logical operations (implementation of various functions, operation of data);7         //because my Mytodo module is bound to the HTML of the root element,8         //so the control layer listens to the scope of all content in the page9$scope. ItemList = Store (' Mytodo ') | | ItemList;//To bind the core data, get Mytodo data from Localstorage, if not present, the default value itemlist;Ten$scope. Routname = "All"; One$scope. Newtodo = "; A                 ... -$scope. $on (' $routeChangeSuccess ',function () { -             //the use of this real-time monitoring function is conditional, the             //You must configure the Router object to listen for changes to the router.  -Console.log (' hash value changed '); - Console.log ($routeParams. status_id); -             if($routeParams. status_id = = = "All") { +$scope. Filterstatus = {}; -$scope. Routname = "All"; +}Else if($routeParams. status_id = = = "Active") { A$scope. Filterstatus = {completed:false}; at$scope. Routname = "Active"; -}Else { -$scope. Routname = "Completed"; -$scope. Filterstatus = {completed:true}; -             } -             //This function can listen to the change of the hash value in the scope of the module in real time. in         }); -});

Use of ———— instruction Ng-repeat

 in Itemlist|filter:filterstatus track by $index
The item in Itemlist is equivalent to the item in the Itemlist track by $id (item), and the ID is not allowed to be duplicated.
Therefore, the simplest way to customize track by is to tack by $index and perform the index values of the array;

Use of ———— instruction Ng-class

<li ng-class= "{completed:item.completed, editing:item.edit_status}" ></li>
An object is stored in the Ng-class, and classname is the property of the object. When the class value is true, the class works, otherwise it is an invalid classname;

———— the use of Ng-model

<input class= "Toggle" type= "checkbox" ng-model= "item.completed" >
Ng-model can replace the value of the input tag, which can be used to react to the change of input value in real-time, and to facilitate the transmission of data, while value generally needs to get the corresponding DOM node;

———— instructions related to various view events

<label ng-dblclick= "Edittodo (item)" >{{item.title}}</label>
Ng-dbclick Double-click event, double quotation marks to handle the double-click event of the Custom function;
<button class= "Destroy" ng-click= "remove (item)" ></button>
Ng-click Click event <form ng-submit= "Saveedit (item)" >
Ng-submit form Submission Event <input todo-focus= "Item.edit_status" class= "edit" ng-blur= "Saveedit (item)" Ng-model= " Item.title ">
Ng-blur Lost Focus Event </form>

Use of ———— component directive

App.directive (' Todofocus ',function(){    varLinkfunction_nice =function(scope, element, attr) {//Console.log (attr, Element);Scope. $watch (Attr.todofocus,function(newval) {setTimeout (function() {element[0].focus (); //delayed execution, otherwise unable to focus}, 100);    });    }; return{restrict:"A",//an element of exposure, if ' a ' is an attribute, and if ' E ' is an elementlink:linkfunction_nice//link:Registering events on specific elements, and using the scope parameter to implement some of the behavior of DOM elements;

    };})
Compared with compile
Reference Links:
http://hellobug.github.io/blog/angularjs-directive-2-compile-vs-link/

Angular JS usage record