Angular from 0 to 1:function (UP)

1. Preface

As the most Popular front-end mv* framework, angular occupies an important position in web development. Next, let's step through the official API and combine the practice process to learn about this powerful framework.

Note: The key level of the function is indicated by the ★ after each function description title (the "star").

2, function (ON)

Angular encapsulates a series of public methods that help us to use JS more simply. These are the function of angular.

2.1, Angular.bind (★)

Angular.bind is similar to Function.prototype.bind, which implements the function of curry and returns a function proxy. eg

函数原型angular.bind(/*this对象*/self, /*要封装的function*/fn, /*参数列表*/args);//原始函数function fun(arg1, arg2, arg3) {  console.log(this);  console.log(arg1);  console.log(arg2);  console.log(arg3);}fun(‘arg1‘, ‘arg2‘, ‘arg3‘);//如果几个常用参数都是固定的，而且该函数被调用频繁，那么就可以包装一下var fun2 = angular.bind(window, fun, ‘arg1‘, ‘arg2‘);//新的调用方式fun2(‘arg3‘);

2.2, Angular.bootstrap (★★★★)

Used to perform render elements using angular. is also the angular startup method, if you do not specify Ng-app on the page, you must manually invoke the function to start.

angular.bootstrap(/*Dom元素*/element, /*Array/String/Function*/[modules], /*Object*/[config]);//常规用法angular.bootstrap(document, [‘app‘])//带配置项angular.bootstrap(document, [‘app‘], {strictDi: true/*Defaults: false*/})

2.3, Angular.copy (★★★★★)

Angular.copy is used to copy objects, because of the bidirectional binding characteristics of Angular, then if the direct Operation $scope object, then it is easy to change the UI display, this time need to use Angular.copy to create a copy of the object, and to operate.

//原型angular.copy(source, [destination]);var obj = {a: 1};var obj2 = angular.copy(obj);var obj3;angular.copy(obj, obj3);console.log(obj2 === obj) //falseconsole.log(obj3 === obj) //falsevar obj4;//第二个和参数和返回值是相等的，而且第二个参数不管以前是什么，都会被重新赋值var obj5 = angular.copy(obj, obj4);console.log(obj4 === obj5); //true

2.4, Angular.element (★★★★)

Equivalent to the jquery selector, if jquery was not introduced before angular, then the Jqlite wrapper is used.

angular.element(‘body‘);//等价于$(‘body‘);//用法var $body = angular.element(‘body‘);

2.5, Angular.equals (★)

Used to compare whether two objects are equal, the following example rules and JS are different, note the recognition.

var obj1 = {a: 1};var obj2 = obj1;//引用一致，则相等console.log(angular.equals(obj1, obj2)); // trueobj2 = {a: 1};//引用不一致，对象表现一致，则相等console.log(angular.equals(obj1, obj2)); // trueobj2 = {a: 1,$a: 2};//对象比较时，忽略以$开头的属性console.log(angular.equals(obj1, obj2)); // trueobj1 = /aa/;obj2 = /aa/;//正则表达式表现相等，则相等console.log(angular.equals(obj1, obj2)); // true//NaN与NaN比较，则相等console.log(angular.equals(NaN, NaN)); // true

2.6, Angular.extend (★)

Not much difference in function and jquery.extend

//原型-第一个参数为目标，之后的参数为源，同时返回dstangular.extend(dst, src);//示例var obj1 = {a: 1};var obj2 = angular.extend(obj1, {a: 2}, {b: 3});console.log(obj1)console.log(obj1 === obj2); //true

2.7, Angular.foreach (★★★★★)

Angular.foreach is used to iterate over an object or array, similar to a ES5 Array.prototype.forEach

//原型angular.forEach(obj, iterator, [context]);var values = {name: ‘misko‘, gender: ‘male‘};var arr = [‘misko‘, ‘male‘];angular.forEach(values, function (value, key) {  console.log(key + ‘ = ‘ + value);});angular.forEach(arr, function (value, i) {  console.log(i + ‘ = ‘ + value);});//还可以传递thisvar obj = {};angular.forEach(values, function (value, key) {  obj[key] = value;}, obj);console.log(obj);

2.8, Angular.fromjson (★)

Angular.fromjson the JSON string to a JSON object, note that the JSON format must be strictly met, such as the attribute must be double quotes, the function internal implementation is the use of Json.parse ().

//原型angular.fromJson(/*string*/ jsonString)var jsonString = ‘{"p1": "xx", "p2": 1, "p3": true}‘;var jsonObj = angular.fromJson(jsonString);console.log(jsonObj);

2.9, Angular.tojson (★)

Angular.tojson can convert objects, arrays, dates, strings, and numbers to JSON strings

//原型angular.toJson(obj, pretty);var obj = {p1: 1, p2: true, p3: ‘2‘};var jsonString = angular.toJson(obj);console.log(jsonString);//美化输出格式（设置为true，默认采用2个字符缩进）jsonString = angular.toJson(obj, true);console.log(jsonString);//还可以设置缩进字符数jsonString = angular.toJson(obj, 10);console.log(jsonString);

2.10, angular.identity (★)

Angular.identity returns the first value of the function parameter. Useful when writing functional code (to be used).

//官方示例function transformer(transformationFn, value) {  return (transformationFn || angular.identity)(value);};//简单演示var value = angular.identity(‘a‘, 1, true);console.log(value); // ‘a‘

2.11, Angular.injector (★)

Angular.injector can create a injector object that can be used to retrieve services and for dependency injection.

//原型，[strictDi]默认false，如果true，表示执行严格依赖模式，//angular则不会根据参数名称自动推断类型，必须使用[‘xx‘, function(xx){}]这种形式。angular.injector(modules, [strictDi]); //定义模块Avar moduleA = angular.module(‘moduleA‘, [])  .factory(‘F1‘, [function () {    return {      print: function () {        console.log(‘I\‘m F1 factory‘);      }    }  }]);var $injector = angular.injector([‘moduleA‘])$injector.invoke(function (F1) {  console.log(F1.print());});//此种写法会报错，因为是严格模式var $injector2 = angular.injector([‘moduleA‘], true)$injector2.invoke(function (F1) {  console.log(F1.print());});//可以采用如下写法$injector2.invoke([‘F1‘, function (F1) {  console.log(F1.print());}]);

2.12, Angular.module (★★★★★)

Angular.module can be said to be the most commonly used function. Through it, we can realize the definition of module and get the module.

//定义模块Avar moduleA = angular.module(‘moduleA‘, []);//定义模块B，模块B依赖moduleAvar moduleB = angular.module(‘moduleB‘, [‘moduleB‘]);//可以在第三个参数上设置配置函数var moduleB = angular.module(‘moduleB‘, [‘moduleB‘], [‘$locationProvider‘, function ($locationProvider) {  console.log($locationProvider);}]);//等价于var moduleB = angular.module(‘moduleB‘, [‘moduleB‘]).config([‘$locationProvider‘, function ($locationProvider) {  console.log($locationProvider);}]);//获取模块angular.bootstrap(document, [‘moduleB‘]);

Angular from 0 to 1:function (top)