Angular.js Study Notes--Concept summary

Long time no update, and now began to learn angularjs, and some of the learning to summarize some of the knowledge to record, convenient to find and hope to give beginners some help! (because I also beginner ng so you understand carefully!) ）

Don't say much nonsense, start!

$rootScope and $scope:

$rootScope is the closest object in angular to the global scope and is the topmost of all $scope objects!

$scope object is a normal JS object, we can arbitrarily modify and add properties on it, and it acts as a data model in angular, it is all properties can be automatically bai view access to, but it is not responsible for data processing and operation!

Directives: Enhancing DOM elements as properties or elements of reusable DOM components

The NG-APP directive specifies the scope of the angular and will not run if no such instruction is angular, only the elements contained by the DOM element with the Ng-app attribute are affected by the angularjs.

Ng-model this directive binds the value of the input box to the $scope model in the controller, and uses the instruction to implement data binding

Ng-init the directive sets an initial value before the program is run, such as:

<b ng-init= ' name = "Ari Lerner" ' >hello, {{name}}</b>

Ng-controller the directive specifies a controller, Ng-controller declares that all the elements it contains belong to a controller, and that the directive creates a new $scope scope for the DOM element and nests it in the $ Rootscope inside!

Ng-click the command registers a click event listener with the DOM element, which can be clicked to trigger the expression, or to invoke a function that is bound to the $scope on the controller.

Ng-repeat This instruction traverses each element in a dataset, you can use p in ARR to variable an array or each value in an object, or use (name, Val) in object to traverse the property names and values in an object

An expression:

Expressions generally refer to parts of {{}}

• All expressions are executed in the context of scope, so you can use variables from all local $scope.

• If the execution of an expression results in a type error or a reference error, these errors will not be thrown.

• Any function that controls the flow of functions (such as if/else, etc.) is not allowed in an expression

• An expression can accept one or more filters that are concatenated together.

Module:

Use the Angular.module () method to declare a module this method accepts two parameters, the first is the name of the module, and the second is a dependency list, which is a list of objects that can be injected into the module.

Angular.module (' name ', [])

Attention:

Using object properties instead of using the object itself for data binding in angular is the best experience, such as:

Replace {{Test.nam}} with {{name}} in html with $scope.test = {name: ' value '} in the controller instead of $scope.name = "value"; This is mainly used to pass the object's reference instead of the value of the variable.

Controller:

The controller is specified in the DOM through the ng-controller instruction, and the controller can be nested between the controllers, and the sub-controller inherits the attributes from the parent controller through the prototype inheritance, methods, etc. Note that DOM operation in the controller is not a good practice, keep the controller as short as possible!

App.controller (' My ', [' $scope ', ' $filter ', function ($scope, $filter) {$scope. test = {name:11};}])

Filter:

The filter is called through the | symbol within the template binding symbol {{}} in HTML. For example:

{{name | uppercase}}//converted to uppercase

Custom filter: (String only leaves A-za-z string)

App.filter (' String ', function () {return function (input) {if (input) return (input+ ""). Replac      E (/\d*\w*/g, "); }})//input string here

Routing:

var app = Angular.module (' app ', [     ' Ngroute ', ' Appctrl ')) app. Config (function ($routeProvider) {     $ Routeprovider.when ('/index ', {          templateurl: ' tuples/index.html ',          controller: ' Indexctrl '      }). otherwise ({         redirectto: '/index '      })})

　　

Service:

var app = Angular.module (' app ', []); App.factory (' MyService ', [' $http ', function ($http) {     var dorequest = function () { }     return {         mot:functions (name) {              return dorequest ()           }      

　　

Angular.js Study Notes--Concept summary