• angularjs官网
  • Awesome AngularJS
  • angularjs菜鸟学院
  • angular 中文网
  • angular老手常常会碰到的坑

angularjs外围性能介绍

  • 所有的货色都是绑在module下面的
    angular        .module('app', [])  // module        .factory()          // 工厂        .service()          // 服务        .controller()       // 控制器        .directive()        // 指令        .filter()           // 过滤器

angular配置阶段

angular 过滤器

具体解释

能够通过过滤器来进行各种顺叙插入等操作
  • angular自定义过滤器demo
<!DOCTYPE html><html lang="en"><head>    <title>angular自定义过滤器demo</title>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1"></head><body ng-app="myapp" ng-controller="my">    <ul>        <li ng-repeat="userLayer in userLayers | reverse" ng-bind="userLayer"></li>    </ul></body><script src="https://cdn.bootcss.com/angular.js/1.5.3/angular.min.js"></script><script>    angular.module('myapp', [])        .controller('my', function($scope, $timeout) {            $scope.userLayers = [1, 2, 3, 4, 5, 6, 8];        })        .filter('reverse', function() {            return function(items) {                return items.slice().reverse();            }        })</script></html>

angular 罕用指令

angular所有指令大全

  • ng-app 指令初始化一个AngularJS应用程序
  • ng-init 指令初始化应用程序数据
  • ng-bind 绑定 HTML 元素到应用程序数据
  • ng-model 双向绑定数据
ng-model 指令能够为利用数据提供状态值(invalid, dirty, touched, error)
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">    Email:    <input type="email" name="myAddress" ng-model="myText" required></p>    <h1>状态</h1>    {{myForm.myAddress.$valid}}    {{myForm.myAddress.$dirty}}    {{myForm.myAddress.$touched}}</form>
  • ng-repeat 和 ng-module 生效的时候能够应用$parent 解决，作用域的问题
  • ng-repeat for 循环遍历数据
一些专有变量
$first 第一个
$last 最初一个
$middle 两头值
$index 索引号 从0开始
  • ng-repeat 的一些坑
如果和控制器一起写的话，就会呈现 $index 生效的问题
track by 肯定要放在orderBy之后，否则会影响orderBy的成果；
当繁多数组如["a","a"]有反复元素时，须要应用track by $index来保障两个元素都会渲染，否则只会渲染一个
  • ng-repeat for 优化
<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"><p>循环对象：</p><ul>  <li ng-repeat="x in names">    {{ x.name + ', ' + x.country }}  </li></ul></div>
  • ng-show 和 ng-hide 显示或暗藏 HTML 元素
  • ng-switch api
  • ng-class-odd api
  • ng-class-even 个别用于隔行换色这种性能
  • ng-class
<ANY ng-switch="expression">  <ANY ng-switch-when="matchValue1">...</ANY>  <ANY ng-switch-when="matchValue2">...</ANY>  <ANY ng-switch-default>...</ANY></ANY>
<!--作为属性--><div ng-class="key === isShow ? 'active' : ''"></div>
<!--作为css类--><div class="ng-class:key === isShow ? 'active' : ''"></div>
<!--另一种写法--><div ng-class="{ture: 'active', false: ''}[isShow]"></div>
<!--key/value 的模式--><!-- 如果redStatus 和 greenStatus的值都为真， 则别离增加对应的class，实用于增加多个class --><div ng-class="{'red':redStatus, 'green': greenStatus}"></div>
  • ng-controller 控制器
  • ng-controller 控制器的书写形式
//惯例写法app.controller('wolrdCtrl', function($scope, $http){    // ...});// 如果你心愿对JS进行压缩解决，那么参数名就可能发生变化，Angular Injector将不可能正确地注入依赖的Service。于是有另外一种写法app.controller('wolrdCtrl', ['$scope', '$http', function($scope, $http){    // ...}]);
<div ng-app="app" ng-controller='myCtrl'> {{myName}} </div>
angular.moduele('app', []).controller('myCtrl', function ($scope, $rootScope){  $.scope.myName = '我的名字是xxxx';  // $rootScope  能够在多个控制器中应用})

  • ng-include

    如果是要引入内部文件的话，那么 须要把这个门路变成一个字符串类型的，如下
<div ng-app="">    <div ng-include="'example.html'"></div></div>

angular 自定义指令

2017.7.14 试验发现，有时候模版外面的ng-if 不失效，解决办法是把他放到调用的中央即可，原理未知
<div ng-app="angular" ng-controller="Controller">  <div my-customer></div></div>
angular.module('angular', [])    .controller('Controller', function($scope) {        $scope.customer = {            name: 'Naomi',            address: '1600 Amphitheatre'        };    })    .directive('myCustomer', function() {        return {            restrict : 'A',            replace : true,            templateUrl: 'my-customer.html'        };});
  • directive罕用设置
官网API
中文API

(1) restrict

'A' - 仅匹配属性指令
    <!--属性指令-->    <div my-directive></div>
'E' - 仅匹配标签指令
    <!--标签指令-->    <my-directive></my-directive>
'C' - 只匹配类名指令
    <!--类名指令-->    <div class="my-directive"></div>
'M' - 只匹配正文指令
    <!--正文指令-->    <!-- directive:my-directive -->    <div></div>
默认是 'AE', 示意匹配属性或标签名, 能够依据须要进行拼接

(2) replace

true: 生成的html内容会替换掉定义此指令的html
false: 生成的html内容会插入到定义此指令的元素中
默认值是 false

(3) transclude

容许在自定义指令内持续嵌套
在上面的例子中没有tansclude属性的话，hello指令上面的别的标签就都被笼罩了
<body>  <hello>    <p>asdjlkfjaksdfjlsdajf</p>    <div>      123131321    </div>    <strong>54664456</strong>  </hello></body><script>  angular.module('angular', []).directive('hello', function() {    return {      replace: true,      transclude: true,      template: '<h1>hellow  angular <p ng-transclude></p> </h1>',    }  });  angular.bootstrap(document, ['angular']);</script>

(4) controller 外部的控制器，能够把办法裸露到内部，给内部应用

(5) scope 独立的作用域

让指令有本人的作用域
    angular.module('app', []).directive('hello', function (){        return {            scope: {}        }    })

(5.1) scope 的绑定策略

scope 能够取的值：
false为默认，示意没有独立的作用域
true 示意有本人的独立作用域
@ 把以后的属性作为自字符串传递，还能够绑定来自外层的scope的值,在属性之中插入{{}}即可
= 与父元素的属性进行双向绑定
& 传递一个来自父scope的函数，稍后调用
@　和　true的区别　－－

详解

<!-- demo1 -->

(6) link 对dom进行操作 官网api 个别接管的参数

scope 控制器中的 $scope
element 将原始的DOM元素或HTML字符串包装为jQuery元素
反对jquery的办法有
留神：请留神，此函数不会通过标签名称/ CSS选择器找到元素。对于由标签名称查找，尝试代替 或者，也能够应用规范的DOM API，例如。angular.element(document).find(...)$document.find()document.querySelectorAll()
attr attrs 是具备标准化属性名称及其对应属性值

(6) compile 和 link 同时存在的时候，link 代码不执行

(8) require 指令于控制器的交互

（1）require的值用？、^、或者？^润饰。
（2）如果不必任何润饰，则在以后指令中进行查找控制器。
（3）如果用^润饰，则在以后指令的父指令进行查找控制器，若未找到，则会抛出异样。
（4）如果用？润饰，则阐明在以后指令中未找到控制器，此时将以null作为第四个参数。
（5）如果须要交互多个指令，则以数组模式给出，如：1。
鉴于此，为了不抛出异样，咱们个别以^？来进行润饰。

angular 罕用服务(函数) [能够自定义服务]

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 利用中应用, 简略的说，就是angular自带的办法

  • 为啥肯定要应用这些服务

    在很多服务中，比方 $location 服务，它能够应用 DOM 中存在的对象，相似 window.location 对象，但 window.location 对象在 AngularJS 利用中有肯定的局限性。
    AngularJS 会始终监控利用，处理事件变动， AngularJS 应用 $location 服务比应用 window.location 对象更好
  • $location
$location.absUrl() //获取以后页面的地址
  • [$http](https://docs.angularjs.org/api/ng/service/$http)
    angular中ajax申请的办法阐明：    /*    * _http:angularJs中的$http对象    * _url:ajax申请的URL    * _method:申请形式：POST或GET    * _params:GET形式申请时传递的参数    * _data:POST形式申请时传递的参数    * _responseType:在申请中设置XMLHttpRequestResponseType属性,""（字符串，默认）,    * "arraybuffer"(ArrayBuffer);"blob"（blob对象）；"document"（HTTP文档）"json"(从JSON对象解析而来的JSON字符串)；    * "text"（字符串）；"moz-blob"（Firefox的接管进度事件）；"moz-chunked-text"(文本流);"moz-chunked-arraybuffer"（ArrayBuffer流）。    * 这个参数示意的含意就是服务器给页面返回的数据格式    * _successCallback:申请胜利的回调函数    * _failureCallback:申请失败的回调函数    *    */
//AngularJS1.5 以上版本的写法$http({    method: 'GET',    url: 'angular_demo.html'}).then(function successCallback(response){    //申请胜利执行的代码}, function errorCallback(response){    //申请失败执行的代码});
  • [$timeout](https://docs.angularjs.org/api/ngMock/service/$timeout)
$timeout.cancel(定时器的名字);
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $timeout) {    $scope.myHeader = "Hello World!";    $timeout(function () {        $scope.myHeader = "How are you today?";    }, 2000);});
  • AngularJS scope 原理解析
  • AngularJS事件流详解

  • $watch api

    $watch 监听 view层 下面的某一个对象，当他的值产生扭转的时候触发绝对应的代码
    优化： 开释多余的watch: stopWatch()办法

  • $apply api

    $apply把 module层 的变动传到 view层 下面去

  • $on api

    语法 => $on(name, listener);
    用于接管 event 与 data

  • $emmit api

    语法 => $emit(name, args);
    $emit只能向parent controller传递event与data

  • $broadcast api

    语法 => $broadcast(name, args);
    $broadcast只能向child controller传递event与data
  • 阻止事件冒泡 event.stopPropagation
  • angular事件流详解demo
<!DOCTYPE html><html lang="en"><head>    <title>angular 事件流解析</title>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1"></head><body ng-app="app">    <!--父级-->    <div ng-controller="ParentCtrl">        <!--本人-->        <div ng-controller="SelfCtrl">            <a ng-click="click()">点我点我点我</a>            <!--子级-->            <div ng-controller="ChildCtrl"></div>        </div>        <!--平级-->        <div ng-controller="BroCtrl"></div>    </div><br>    <div style="color:green;">        点击实现之后，请在控制台查看相干信息；    </div></body><script src="https://cdn.bootcss.com/angular.js/1.5.3/angular.min.js"></script><script>    var app = angular.module('app', []);    app.controller('SelfCtrl', function($scope) {        $scope.click = function() {            // 向child controller传递event与data            $scope.$broadcast('to-child', 'child');            // 向parent controller传递event与data            $scope.$emit('to-parent', 'parent');        }    });    app.controller('ParentCtrl', function($scope) {        // 用于接管event与data        $scope.$on('to-parent', function(event, data) {            // 父级能失去值            console.log('我是on事件外面的货色哦ParentCtrl', data);        });        $scope.$on('to-child', function(event, data) {            // 子级得不到值            console.log('ParentCtrl', data);        });    });    app.controller('ChildCtrl', function($scope) {        $scope.$on('to-child', function(event, data) {            // 子级能失去值            console.log('ChildCtrl', data);        });        $scope.$on('to-parent', function(event, data) {            // 父级得不到值            console.log('ChildCtrl', data);        });    });    app.controller('BroCtrl', function($scope) {        $scope.$on('to-parent', function(event, data) {            // 平级得不到值            console.log('BroCtrl', data);        });        $scope.$on('to-child', function(event, data) {            // 平级得不到值            console.log('BroCtrl', data);        });    });</script></html>

  • [$interval](https://docs.angularjs.org/api/ng/service/$interval) 同 $timeout 的做法差不多

    勾销定时器 $timeout.cancel(timeName);
  • select angular select[也能够是用ng-repeat来进行for循环]
<div ng-app="myApp" ng-controller="myCtrl">    <select ng-init="selectedName" ng-model="selectedName" ng-options="value for (key, value) in names">    </select></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.names = ["Google", "Runoob", "Taobao"];    $scope.selectdName = names[0];});</script>
  • tabel tabel 的相干应用

angular 罕用全局办法

  • angular 所有的办法
  • angular.lowercase() 转换字符串为小写
  • angular.uppercase() 转换字符串为大写
  • angular.isString() 判断是否是一个字符串，如果是则返回true
  • angular.isNumber() 判断是否是一个数组，如果是则返回false
  • angular.toJson() 把数组或者对象变成字符串
  • angular.fromJson() 把字符串变成对象
  • angular.isNumber() 判断是否是一个数组，如果是则返回false
  • angular.element($(element) || 'js原生获取元素办法') 判断是否是一个数组，如果是则返回false
angular.module('', []).controller('', function ($scope){    $scope.name = 'string';    $scope.name = angular.lowercase($scope.name); //把以后字符串转换为小写})

  • angular.bootstrap 手动启动AngularJS 程序

    官网API
    angular.bootstrap(element, [modules], [config]);
    其中第一个参数element:是绑定ng-app的dom元素；
    modules：绑定的模块名字
    config：附加的配置
  • angular service service 外面是不能间接注入$scope的
    //定义一个service, 依照api 的说法，service的第二个参数放的是一个构造函数，当angular 调用service的时候会本人去实例化它    angular.module('app', []).service('getName', GetName).controller('myCtrl', function($scope, getName){        getName.showName();//ben    })    function GetName (){        this.name = "ben"    }    GetName.prototype.showName = fuunction (){        console.log(this.name)    }

  • angular factory

    //定义一个factory, angular.module('app', []).factory('getName', function (getName){     var getName = {             showName: function () {                 alert(1);             }         }         return getName; })

Service和Factory等的区别

stack_overflow的答复

angular 依赖注入

angular 路由

  • __ngRouter和ui-router__的区别

具体攻略

  • ui-view 的三种调用形式
  • angular 应用 iframe 报错解决方案

计划1

(1) <ui-view></ui-view>
(2) <div ui-view></div>
(3) <div class="ui-view"></div>

  • ui-router 的一些应用

    官网API
angular ui-router通过url传值的办法：
 $scope.toDiy = function(item) {     // 实用于 两个我的项目中进行切换应用， 如果是一个我的项目之间切换请应用 $state.go(xx);            window.location.href = window.location.pathname + '?item=' + item +'#/shop/classifiedList';        }    // ui-router带值传输    // module-config 中的配置    $state('shop.xx', {         url:'/classifiedList/:id/:book',    })    // 之后在控制器中设置    $state.go('shop.classifiedList', {id:id, book:'xx'})
<!doctype html><html ng-app="myApp"><head>  <script src="js/angular.js"></script>  <!-- Include the ui-router script -->  <script src="js/angular-ui-router.min.js"></script>  <script>    // ...and add 'ui.router' as a dependency    var myApp = angular.module('myApp', ['ui.router']).config(function ($stateProvider, $urlRouterProvider){        $stateProvider        .state('box', {            url: '/box', // 父路由,门路调用的模式  #/box            templateUrl: 'example.html',            controller: 'myCtrl', //这里能够放一个控制器的名称或者是一个办法        })        .state('box.children', {            url: '/children',            templateUrl: 'children.html', //子路由，门路调用的模式  #/box/children            controller: 'childrenCtrl'        })    });  </script></head><body></body></html>
  • $cacheFactory 具体阐明
    堆栈溢出的解释
如果您有一个申请检索常量数据，例如城市列表。每次用户进入他必须抉择城市的表单时，从服务器获取此列表并不是一个好的模式！所以你必须缓存这个列表。cacheFactory是为此实现的！
值的留神的是，这是应用程序的缓存服务，而不是浏览器本地的缓存。所以当你刷新浏览器，初始化整个应用程序的时候，之前的缓存数据都会失落。那么问题就来了，怎么能力刷新/初始化应用程序而不失落之前保留的数据呢，这个能够应用localStorage或者cookies
  • angular.extend
angular.extend(DST, SRC) 顺次将第二个参数及后续的参数的第一层属性（不论是简略属性还是对象）拷贝赋给第一个参数的第一层属性，即如果是对象，则是援用的是同一个对象，并返回第一个参数对象
  • $q, defer, promise
    具体解释
    另一个版本

  • angular.fromJson

    angular.fromJson({a:'11', b:'cc'}) ==> Object {a: "11", b: "cc"}

  • angular.toJson

    angular.toJson({a:'11', b:'cc'}) ==> "{"a":"11","b":"cc"}"

angualr 入坑不齐全指南

  • (1) ui.router 和 angular 一起被 require 援用的时候，会报错
起因解析
required 原理引入机制没有具体钻研，起因就是 router 必须在 angular 框架之后引入
解决办法
独自先引入 angular 解决问题
  1. ?a，^?b ↩