Angular authoritative guide Study Notes

Chapter 1.Angular-- Angular is the JS framework of mvw.

Chapter 2.Data Binding-- Viewmodel can contain both variables and events. You can use events to control variable value changes. The view is bound to variables and events in the VM.

Chapter 3.Module-- You can use angular. Module () to declare a module.

For example, angular. Module ('myapp', []) is equivalent to setter; angular. Module ('myapp') is equivalent to getter.

Chapter 4. Scope -- function: Listen for changes, notify changes, isolate data, and provide the environment.

$ ScopeLifecycle:

1. Create:When creating controllers and commands. Use $ inject to create a new scope. And passed in when the new controller and command are running.
2. Link:Add the scope to your own view and create events to detect changes in the scope variables.
3. Update:Dirty values are detected in each sub-scope. When changes are detected, the specified function is called back.
4. Destruction:Time not used, destroyed.

Chapter 5. Controller -- can be nested, so the scope contains the scope. Demohttp: // jsbin.com/uruyog/1/edit

Chapter 6. Expressions-manual and automatic Parsing. Automatically passed $ digest. For example {{}}. You can manually control the expression in the Controller so that it does not play according to the rule.

$ Parse is used to access data and functions in the scope.

Chapter 7. Filters-built-in filters, custom filters, and form verification.

1. 1. 1. Two built-in filter usage methods: {name | uppercase} and $ filter ('lowercase') ("ACB ")
      2. Time Filter {time | Date: 'Y-mm-dd hh: mm: ss'} 17:04:05
      3. Filters can be followed by strings, objects, and functions.

{{ [‘Ari‘,‘Lerner‘,‘Likes‘,‘To‘,‘Eat‘,‘Pizza‘] | filter:‘e‘ }} <!-- ["Lerner","Likes","Eat"] -->{{ [{‘name‘: ‘Ari‘,‘City‘: ‘San Francisco‘,‘favorite food‘: ‘Pizza‘},{‘name‘: ‘Nate‘,‘City‘: ‘San Francisco‘,‘favorite food‘: ‘indian food‘}] | filter:{‘favorite food‘: ‘Pizza‘} }}<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

4. Convert the filter object to JSON

VaR person = {};

Person. Age = 12;

Person. Name = "hehe ";

VaR P = $ filter ('json') (person );

5. The limitto intercepts the string, starting from the beginning and starting from the end.

6. Number retains n decimal places

7.OrderbyThe following example not only shows how to sort by object fields, but also shows how to use the filter of two parameters.

{{ [{‘name‘: ‘Ari‘,‘status‘: ‘awake‘},{‘name‘: ‘Q‘,‘status‘: ‘sleeping‘},{‘name‘: ‘Nate‘,‘status‘: ‘awake‘}] | orderBy:‘name‘:true }}<!--[{"name":"Q","status":"sleeping"},{"name":"Nate","status":"awake"},{"name":"Ari","status":"awake"}]-->

8.Uppercase lowercase

Custom filter:

下面是自定义函数angular.module(‘myApp‘, []).filter(‘capitalize‘, function(){   return function(input){      if (input) {        return input[0].toUpperCase() + input.slice(1);      }   };}).controller(‘MyController‘,function(){});引用方式{{ ‘ginger loves dog treats‘ | lowercase | capitalize }}

7.2Form

Verifiable input options: required, NG-minlength, NG-pattern, name = "email", type = "Number", custom.

Formname. inputfieldname. propertyy.

1.Not modified:Formname. inputfieldname. $ pristine

2.Modified:Formname. inputfieldname. $ dirty

3.Valid form:Formname. inputfieldname. $ valid

4.Invalid form:Formname. inputfieldname. $ invalid

5.Error:Formname. inputfieldname. $ Error

TheCSSClass

. Ng-pristine {}

. Ng-dirty {}

. Ng-valid {}

. Ng-invalid {}

$ Parsers is usually used with commands. When the $ setviewvalue () method in ngmodelcontroller is used. $ Parser is called one by one.

Demo:

 

Angular. Module ('myapp ')
. Directive ('onetoten ', function (){
Return {
Require :'? Ngmodel ',
Link: function (scope, ELE, attrs, ngmodel ){
If (! Ngmodel) return;
Ngmodel. $ parsers. unshift (
Function (viewvalue ){
VaR I = parseint (viewvalue );
If (I> = 0 & I <10 ){
Ngmodel. $ setvalidity ('onetoten ', true );
Return viewvalue;
} Else {
Ngmodel. $ setvalidity ('onetoten ', false );
Return undefined;
}

$ Formatters

When the bound ngmodel value changes and is processed by the parser in the $ parsers array, this value is passed to the $ formatters pipeline.

Demo

Angular. Module ('myapp ')
. Directive ('onetoten ', function (){
Return {
Require :'? Ngmodel ',
Link: function (scope, ELE, attrs, ngmodel ){
If (! Ngmodel) return;
Ngmodel. $ formatters. unshift (function (v ){
Return $ filter ('number') (v );
});
}
};
});

7.3 The following is a common example of Form Verification:

1. asynchronous Verification

app.directive(‘ensureUnique‘, function ($http) {    return {        require: ‘ngModel‘,        link: function (scope, ele, attrs, c) {            scope.$watch(attrs.ngModel, function (n) {                if (!n) return;                $http({                    method: ‘POST‘,                    url: ‘/api/check/‘ + attrs.ensureUnique,                    data: {                        field: attrs.ensureUnique,                        value: scope.ngModel                    }                }).success(function (data) {                    c.$setValidity(‘unique‘, data.isUnique);                }).error(function (data) {                    c.$setValidity(‘unique‘, false);                });            });        }    };});

<button type="submit"ng-disabled="signup_form.$invalid"class="button radius">Submit</button>

Display verification information after defocus

app.directive(‘ngFocus‘, [function () {    var FOCUS_CLASS = "ng-focused";    return {        restrict: ‘A‘,        require: ‘ngModel‘,        link: function (scope, element, attrs, ctrl) {            ctrl.$focused = false;            element.bind(‘focus‘, function (evt) {                element.addClass(FOCUS_CLASS);                scope.$apply(function () {                    ctrl.$focused = true;                });            }).bind(‘blur‘, function (evt) {                element.removeClass(FOCUS_CLASS);                scope.$apply(function () {                    ctrl.$focused = false;                });            });        }    };}]);

If you use 1.3, you can use ngmessage.

Chapter 8 instructions

The command is defined by the keyword direve ve.

Angular authoritative guide Study Notes