19、angular1全局方法、五種服務類型、過濾、重要指令（ng-）、單選框|復選框|下拉框三者聯合案例展示、下拉表格嵌套、子組件向父組件傳值、directive自定義標簽、獲取不到新value、[].forEach|$.each|angular.forEach用法示例、undefined+1、ui.router路由模塊、ui.router實際執行步驟、jqLite的API參考、前端路由、類

一、全局方法
1、config 配置模塊。在提供者注冊和配置階段執行。只能注入提供者和常量配置塊。在config階段，注入 provider 的時候需要加上 provider 后綴，可以調用非 $get方法。
2、run 運行模塊。執行后創建了發射器和用於啟動應用程序。只能注入運行實例和常量。返回的方法在 run 階段注入的時候，無需加 provider 后綴，只能調用 $get 返回的方法。
3、執行的先后順序：provider(定義默認)>config(修改默認)>run(最后執行)
（1）定義服務calc
 app.provider('calc',function () {this.currency = '&';console.log(1);});
（2）配置服務calc
 app.config(function (calcProvider) { calcProvider.currency = '錢';console.log(2);});
（3）運行服務calc
 app.run(function (calc) { console.log(3);});

二、五種服務類型
來源：https://blog.csdn.net/qq_33587050/article/details/52138069
1、constant服務:constant不可以修改，可以注入到config里。
（1）app.constant("name",obj)
（2）name為服務的名字,obj為一個json對象.
（3）constant創建服務返回一個json對象(也就是第二個參數中傳入的對象)。
2、value服務:value可以修改，不可以注入到config里。
（1）app.value("name",obj)
（2）name為服務的名字,obj為一個json對象.
（3）value創建服務返回一個json對象(也就是第二個參數中傳入的對象)。
3、service服務
（1）app.service("name",constructor)
（2）name為服務的名字,第二個參數是一個構造函數，它的實例是實際被注入的服務。
4、factory服務
（1）app.factory("name",function(){return obj})
（2）name為服務的名字,第二個參數是一個普通函數,函數返回對象obj,obj是實際被注入的服務.
5、provider服務
（1）App.provider("myConfig", function () { this.$get= function () { return lastObj }});
（2）name為服務的名字,第二個參數是一個構造函數,其內要有$get方法,$get方法要返回對象lastObj,lastObj是真正被注入的服務。this.$get中的this不是myConfig，lastObj中的this才是myConfig。
6、裝飾服務
（1）app.config(function($provide){ $provide.decorator("name",function($delegate){ return $delegate }) });
（2）同樣是通過config,在參數函數中注入$provider服務,$provider服務有個decorator方法,它接受兩個參數,第一個參數"name",是要被裝飾的服務的名字,第二個參數是一個函數,函數中注入$delegate,$delegate就是被裝飾的服務的實例,然后在函數中操作$delegate,就相當於操作了該服務的實例。
（3）示例：
app.config(function ($provide) {//通過config,在參數函數中注入$provider服務
    $provide.decorator('name',function ($delegate) {//$provider服務有個decorator方法,它接受兩個參數,
        var fn = $delegate; //先保存以前的$delegate
        $delegate = function () {//在外面套一層函數
            var list = Array.from(arguments);
            list[1] = list[1]+2000;
            fn.apply(null,list);
        };
        return $delegate;//在函數中返回$delegate;
    })
});

三、過濾
1、表達式中添加過濾器
<p>姓名為 {{ lastName | uppercase }}</p>
<p>姓名為 {{ lastName | lowercase }}</p>
<p>總價 = {{ (quantity * price) | currency }}</p>
2、向指令添加過濾器
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
  <input type="text" ng-model="test">
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
3、自定義過濾器
app.filter('reverse', function() { //可以注入依賴
    return function(text) {
        return text.split("").reverse().join("");
    }
});
4、filter使用規則:
（1）用來處理一個數組，然后可以過濾出含有某個子串的元素，作為一個子數組來返回。
（2）可以是字符串數組，也可以是對象數組。
（3）如果是對象數組，可以匹配屬性的值。
（4）如果是字符串數組，可以匹配字符串的組成部分。

四、重要指令（ng-）  
1、ng-if、ng-hide、ng-show的用法
（1）ng-if 如果條件為 false時； “移除” HTML 元素。
（2）ng-show 如果條件為 false時； “隱藏” HTML 元素。
（3）ng-hide 如果條件為 true時； “隱藏” HTML 元素。
（4）ng-trim="false"，自動去掉（input）前后空格。
另外：<span> {{protoNum}} </span>
<img src="" ng-hide="protoNum==undefined? false:protoNum+1"/>
（1）在HTML里，undefined+1的運行結果是字符串“undefined1”，
（2）在js里，undefined+1的運行結果是數字NaN。
2、ng-repeat:用於遍歷數組或對象，
（1）<tr ng-repeat="(key,value) in arrayOrObject"><td>{{key}}{{value}}</td></tr>，
用這種格式遍歷數組，key是每一項的索引，value是每一項的值。
用這種格式遍歷對象，key是每一項的屬性名，value是每一項的屬性值。
（2）<tr ng-repeat="item in arrayOrObject"><td>{{item}}</td></tr>，
用這種格式遍歷數組，item是數組中的每一項；
用這種格式遍歷對象，item是對象中的每一項的屬性值。
3、ng-model
以<input type="text" ng-model="name">{{name}}為例：
（1）如果input所在的作用域內已經聲明name並給name賦值了，那么ng-model會把該值獲取到，並在input里輸出。同時{{name}}也會把該值取到頁面上。當input里面的值改變時，ng-model把作用域內的name值進行修改，同時{{name}}也會用修改后的name值覆蓋原來頁面上的name值。 
（2）如果input所在的作用域內沒有聲明name，那么ng-model會在作用域內聲明一個name。當input里面輸入值后，ng-model會對作用域內的name進行賦值，同時{{name}}也會在頁面上輸出。
（3）原理：ng-model根據input標簽的type屬性值的不同，監聽用戶的輸入事件如onchange，onkeyup，onkeydown。
（4）type="radio"，ng-model的值就是選中的那個radio所對應的ng-value的值；初始化單選框，yesOrNo=1，則前者選中，yesOrNo=2，則后者選中，此單選框被選中；點擊1單選框，則1單選框被選中，賦值yesOrNo=1
<input type="radio" name="inlineRadioOptions" ng-model="yesOrNo" ng-value="1">。//ng-value：設置輸入框的值。
<input type="radio" name="inlineRadioOptions" ng-model="yesOrNo" ng-value="2">。//ng-value：設置輸入框的值。
（5）type="checkbox"
<input type="checkbox" ng-model="all"> Check all<br><br>
<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes
（6）<select ng-model="myLog.resultDo" ng-options="item.value as item.key for item in resultDo"></select>
$scope.resultDo = [
  { value: '', key: '全部' },
  { value: '已讀', key: '已讀' },
  { value: '未讀', key: '未讀' }
]
https://blog.csdn.net/mydtudysy/article/details/78040969
4、ng-bind-html，如果沒有$sce或$sanitize的輔助，它是不會生效的。
（1）內置的$sce.trustAsHtml()，它不經過凈化，直接將html綁定給元素,保留所有的屬性和事件。
（2）注入第三方模塊ngSanitize就行了，不用注入$sanitize服務，$sanitize會自動對html標簽進行凈化，並會把標簽的屬性以及綁定在元素上的事件都移除，僅保留了標簽和內容。
（3）$sce用法示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtl">
<div ng-bind-html="content">
</div>
</body>
</html>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtl',function($scope,$sce){
        $scope.temporaryContent="My name is: <h1 style='color:red'>John Doe</h1>";
        $scope.content = $sce.trustAsHtml($scope.temporaryContent);
    });
</script>
（4）ngSanitize用法示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
    <script src="https://cdn.bootcss.com/angular-sanitize/1.5.9/angular-sanitize.js"></script>
</head>
<body >
<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-bind-html="myText"></p>
</div>
</body>
</html>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1 style='color:red'>John Doe</h1>";
});
</script>
5、ng-class(三元、數組、對象)、ng-bind(三元、數組)、ng-style(三元)與ng-src(三元雙括號)用法示例
<!DOCTYPE html>
<html lang="en" ng-app="myModel">
<head>
  <meta charset="UTF-8">
  <title>樣式</title>
  <style>
    .red{color:red}
    .green{color:green}
  </style>
  <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
</head>
<body>
<div ng-controller="firstCtrl">
  <div ng-class="isTrue?'red':'green'">class布爾</div>
  <div ng-class="['red','green'][num1]">class數組</div>
  <div ng-class="{'red':isTrue,'green':!isTrue}">class對象</div>
  <div ng-style="isTrue?{'color':'green','width':'200px'}:{'color':'red','width':'300px'}">style布爾</div>
  <div ng-style="{'width': width? width:'400px','height': height? height:'400px', }">style對象</div>
  <div><span ng-bind="isTrue?'連接':'未連接'"></span><span>--bind布爾</span></div>
  <div><span ng-bind="['未連接','連接'][li.status]"></span><span>--bind數組</span></div>
</div>
</body>
</html>
<script>
  var app = angular.module('myModel', []);
  app.controller('firstCtrl', function ($scope) {
    $scope.isTrue=true;
    $scope.num1=1;
    $scope.width='200px';
    $scope.height='20px';
  });
</script>
<img ng-src="{{isTrue?path1:path2}}" alt=""/>

五、單選框|復選框|下拉框三者聯合案例展示
說明：單選框與復選框在點擊事件發生時的區別
1、單選框在點擊后：呈現選中狀態，把ng-value賦值給ng-model(初始化時，如果兩者都有默認值，相等則選中);
2、復選框在點擊后：呈現相反狀態，把ng-checked賦值給ng-model(初始化時，如果兩者都有默認值，那么前者將覆蓋后者);
<!DOCTYPE html>
<html lang="en" ng-app="myModel">
<head>
  <meta charset="UTF-8">
  <title>聯合案例展示</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
</head>
<body>
<div ng-controller="firstCtrl">
  <input type="checkbox" ng-checked="checkboxCheck" ng-model="checkboxModel" ng-click="checkbox()">
  <input type="radio" name="towRadio" ng-model="yesOrNo" ng-value="'man'" ng-click="selectRadio()">
  <input type="radio" name="towRadio" ng-model="yesOrNo" ng-value="'woman'" ng-click="selectRadio()">
  <select ng-model="myLog.resultDo" ng-options="item.back as item.front for item in resultDo" ng-change="selectOption()"></select>
</div>
</body>
</html>
<script>
  var app = angular.module('myModel', []);
  app.controller('firstCtrl', function ($scope) {
    $scope.myLog={resultDo:"全部后台"};
    $scope.resultDo = [{ back: '全部后台', front: '全部前端' },{ back: '已讀后台', front: '已讀前端' },{ back: '未讀后台', front: '未讀前端' }];
    $scope.yesOrNo = 'man';
    $scope.checkboxCheck = false;/*永遠不變*/
    $scope.checkboxModel = true;/*交替改變*/
    $scope.checkbox = function () {
      console.log($scope.checkboxCheck);
      console.log($scope.checkboxModel)
    };
    $scope.selectRadio = function () {
      console.log($scope.yesOrNo)
    };
    $scope.selectOption = function () {
      console.log($scope.myLog.resultDo)
    };
  });
</script>
附：下拉框分組
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
</head>
<body ng-app="myapp">
  <div ng-controller="mainCtrl">
    <div>
      <p>你的選擇是：{{selectedOption}}</p>
      <select ng-options="item.id as item.name group by item.sex for item in resultDo"
        ng-model="selectedOption"></select>
    </div>
  </div>
  <script type="text/javascript">
    var myapp = angular.module('myapp', []);
    myapp.controller('mainCtrl', ['$scope', function ($scope) {
      $scope.selectedOption ="hanmeimei";
      //定義包含對象的數組 resultDo
      $scope.resultDo = [
        { "id": "lilei", "name": "李雷", "sex": "man" },
        { "id": "hanmeimei", "name": "韓梅梅", "sex": "woman" },
        { "id": "jack", "name": "傑克", "sex": "man" }
      ];
    }])
  </script>
</body>
</html>

六、下拉表格嵌套
<table class="table">
  <thead>
    <tr>
      <th>
        <button>序號</button>
      </th>
      <th ng-repeat="li in title track by $index">
        <button>{{li}}</button>
      </th>
    </tr>
  </thead>
  <tbody ng-repeat="li in list__detail track by $index">
    <tr>
      <td>
        <div>
          <img ng-src="{{''}}" alt=""/>
        </div>
      </td>
      <td ng-bind="li.name"></td>
      <td ng-bind="li.name"></td>
      <td ng-bind="li.name"></td>
      <td ng-bind="li.name"></td>
    </tr>
    <tr ng-if="li.is_show">
      <td colspan="9999"><!-- 這點很重要，td下面放div -->
        <div id="JSONData">
          <div>此處可以通過jquery.json-viewer.js，格式化JSON數據</div>
          <div>js代碼為$('#JSONData').jsonViewer(JSON.parse(data))</div>
        </div>
      </td>
    </tr>
    <tr ng-if="li.is_show">
      <td colspan="9999"><!-- 這點很重要，td下面放table -->
        <table>
          <thead>
            <tr>
              <th>文字</th>
              <th>文字</th>
              <th>文字</th>
              <th>文字</th>
              <th>文字</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in list track by $index">
              <td ng-bind="item.name"></td>
              <td ng-bind="item.name"></td>
              <td ng-bind="item.name"></td>
              <td ng-bind="item.name"></td>
              <td ng-bind="item.name"></td>
            </tr>
            <tr>
              <td colspan="9999" ng-if="list.length<1">暫無數據可顯示。</td>
            </tr>
          </tbody>
        </table>
        <!-- 此處分頁組件 -->
      </td>
    </tr>
  </tbody>
</table> 

七、子組件向父組件傳值
思路：在父組件定義一個函數，在函數體里，將函數的參數賦值給父組件$scope的一個屬性；通過屬性傳參的方式把這個函數傳給子組件。在子組件里，給這個函數傳參並執行，實現子組件向父組件傳值！
<!DOCTYPE html>
<html lang="en" ng-app="appModule" ng-controller="thisCtrl">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body>
  <div>父級:{{value}}</div>
  <this-div inner-add='outerAdd'></this-div>
</body>
</html>
<script>
  var app = angular.module('appModule', []);
  app.controller("thisCtrl", function ($scope) {
    $scope.value=1;
    $scope.outerAdd= function (result) {
      $scope.value=result;
    }
  });
  app.directive('thisDiv', function () {
    var str = '';
    str += "<div>";
    str += "<button ng-click='inner()'>子組件</button>";
    str += "</div>";
    return {
      template: str,
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {
        innerAdd: '='
      },
      controller: function ($scope) {
        $scope.num = 1;
        $scope.inner = function () {
          $scope.num++;
          $scope.innerAdd($scope.num)
        }
      }
    }
  });
</script>
</script>

八、directive自定義標簽
1、基本案例
<!DOCTYPE html>
<html lang="en" ng-app="appModule" ng-controller="thisCtrl">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body>
  <this-div outer-function='outerFunction'>
    <button ng-click="slotFunction()">這是插槽-可以讀取當前頁的內容</button>
  </this-div>
</body>
</html>
<script>
  var app = angular.module('appModule', []);
  app.controller("thisCtrl", function ($scope) {
    $scope.slotContent = "這是組件的插槽內容！";
    $scope.slotFunction = function () {
      console.log($scope.slotContent)
    };
    $scope.outerFunction= function () {
      console.log($scope.slotContent)
    };
  });
  app.directive('thisDiv', function () {
    var str = '';
    str += "<div>";
    str += "<div ng-transclude></div>";
    str += "<button ng-click='innerFunction()'>這是組件-可以讀取當前頁的內容</button>";
    str += "</div>";
    return {
      template: str,
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {
        outerFunction: '='
      },
      controller: function ($scope) {
        $scope.innerFunction = function () {
          $scope.outerFunction()
        }
      }
    }
  });
</script>
2、嵌套
<!DOCTYPE html>
<html lang="en" ng-app="appModule" ng-controller="ancestorCtrl">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body>
<my-parent>
    {{ancestorName}}
    <my-child selfAttr="myAttr">{{childName}}</my-child>
</my-parent>
</body>
</html>
<script>
    var app = angular.module('appModule', []);
    app.controller("ancestorCtrl", function ($scope) {
        $scope.ancestorName = "我所處的位置，表明我只能在ng-transclude里出現。";
        $scope.childName = "變量必須定義在作用域里，myParent和myChild的作用域我進不去。";
    });
    app.directive('myParent', function () {
        return {
            template: "<div><p>第一段</p>" + "<div ng-transclude></div>" + "<p>第二段</p>" + "<div>{{parentName}}</div></div>",
            //template: '<div>我是指令生<div ng-transclude></div>成的內容</div>'，//templateUrl導入自定義元素的模板
            restrict: 'E',//指令類型  E：element A：attribute M：comment C: class
            replace: true,//模板放在<my-parent>內部還是取代它,默認是false,放在其內部
            transclude: true,//是否保留自定義指令開閉標簽之間的內容，該內容插入模板中使用ng-transclude屬性的地方,默認為false,如上。<div ng-view></div>通過路由放入數據
            scope: {
                //獲取自定義標簽的屬性值//false：繼承父作用域；true：繼承父作用域且創建獨立作用域；{}：不繼承父作用域且創建獨立作用域。
                //scope:{name:'@name'，綁定字符串  name:'=name'，綁定變量  name:'&name'，綁定函數}。傳進來的變量，在值改變后，父作用域的該變量的值也隨之改變。
            },
            controller: function ($scope) {/*左邊的controller是上面template的控制器*/
                //指令的controller和link可以進行互換。controller可進可出，主要特征或作用（1）導入ng內置或自定義服務；（2）提供可在指令間復用的行為。
                $scope.focusAAA = function () {
                };
                $scope.parentName = "定義在myParent里的變量。";
                this.parentMethod = function () {
                    console.log('這個方法是給子作用域調用的。');
                }
            },
            /* compile: function(element, attributes) {
             //compile和link是相斥的。如果同時設置了兩項，compile返回的函數會被當作鏈接函數把后面定義的link函數所取代，也就是說，后面的link函數將起不到作用。controller先運行，compile后運行，link不運行
             },*/
            link: function (scope, element, attr, ctrl, linker) {
                //指令的controller和link可以進行互換。link不進不出，主要特征或作用（1）不能導入ng內置或自定義服務；（2）不能提供可在指令間復用的行為。
                //scope：指令所在的作用域
                //element：指令元素的封裝，可以調用angular封裝的簡裝jq方法和屬性，如element.css()
                //attr：指令元素的屬性的集合，如attr.selfAttr
                //ctrl：用於調用其他指令的方法,指令之間的互相通信使用，需要require配合，如下面myChild內部、link中的ctrl.parentMethod()。
                //linker：用於操作transclude里面嵌入的內容；linker函數有2個參數,第1個參數scope,第2個參數是函數,函數接受參數clone,clone就是transclude里面被嵌套的內容。
            }
        }
    });
    app.directive('myChild', function () {
        return {
            template: "<div><span>這里是span1;</span><span>這里是span2。</span><div ng-transclude></div></div>",
            restrict: 'E',
            replace: true,
            transclude: true,
            scope: {},
            require: '?^myParent',//?不要拋出異常；^允許查找父元素的controller
            controller: function ($scope) {
             
            },
            /*compile: function(element, attributes) {},*/
            //'myParent':在當前指令中查找控制器；'^myParent'在上游指令中查找控制器；'?^myParent'：當前指令若沒有，就向上游查找
            link: function (scope, element, attr, ctrl, linker) {
                ctrl.parentMethod();
                linker(scope, function (clone) {
                    console.log(clone.text())
                })
            }
        }
    })
</script>

九、獲取不到新value
症狀：angular對象數據的value被更改后，獲取的仍然是舊value
原因：在第三方插件或原生JS里進行的變化，沒法觸發臟值檢測。
angular.module('myApp', []).controller('MessageController', function ($scope) {
  $scope.getMessage = function () {
    setTimeout(function () {
      $scope.$apply(function () {
        $scope.message = 'Fetched after 3 seconds';
        console.log('message:' + $scope.message);
      });
    }, 2000);
  }
  $scope.getMessage();
});
$scope.getMessage = function () {
  setTimeout(function () {
    $scope.message = 'Fetched after two seconds';
    console.log('message:' + $scope.message);
    $scope.$apply(); //this triggers a $digest
  }, 2000);
}
angular.element(document).ready(function () {
  var config = {
    elem: '#' + $scope.dateInputId,
    theme: '#007bff',
    trigger: 'click',
    done: function (value) {
      $scope.dateModel = value;
      $scope.$apply();//在此處執行
      angular.isFunction($scope.updata) ? $scope.updata() : '';
      //在此處執行無效
    }
  };
  laydate.render(config);
});

十、[].forEach|$.each|angular.forEach用法示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
本代碼不能運行
</body>
</html>
<script>
  //[].forEach
  [3, 3, 3].forEach(function (a, b, c, d) {
    //3 0 [ 3, 3, 3, 3, 3 ] undefined
    console.log(a, b, c, d)
  })
  //$.each
  $.each([3, 3, 3, 3], function (a, b, c) {
    console.log(a, b, c)
    //0 3 undefined

  })
  $.each({ a: 'b' }, function (a, b) {
    console.log(a, b)
    //a,b
  });
  //angular.forEach
  angular.forEach([3, 3, 3], function (a, b, c, d) {
    console.log(a, b, c, d)
    //3 0 Array(6) undefined
  });
  angular.forEach({ a: 'b' }, function (a, b) {
    console.log(a, b)
    //b,a
  });
</script>

十一、undefined+1
在HTML里，undefined+1的運行結果是字符串“undefined1”，
在js里，undefined+1的運行結果是數字NaN。

十二、ui.router路由模塊
1、提供$stateProvider對象，
（1）用$stateProvider.state(stateNameString, stateConfigObject)配置路由。
（2）用template去替換<ui-view></ui-view>或<div ui-view></div>。
（3）stateConfigObject包含以下內容：
（3-1）template： string/function，html模板字符串，或者一個返回html模板字符串的函數。
（3-2）templateUrl：string/function，模板路徑的字符串，或者返回模板路徑字符串的函數。
（3-3）templateProvider：function，返回html模板字符串或模板路徑的服務。
（3-4）controller：string/function，新注冊一個控制器函數或者一個已注冊的控制器的名稱字符串。
（3-5）controllerProvider：function，返回控制器或者控制器名稱的服務
（3-6）controllerAs：string，控制器別名。
（3-7）parent：string/object，手動指定該狀態的父級。
（3-8）resolve：object，將會被注入controller去執行的函數，<string,function>形式。
（3-9）url：string，當前狀態的對應url。
（3-10）views：object，視圖展示的配置。<string,object>形式。
（3-11）abstract：boolean，一個永遠不會被激活的抽象的狀態，但可以給其子級提供特性的繼承。默認是true。
（3-12）onEnter：function，當進入一個狀態后的回調函數。
（3-13）onExit：function，當退出一個狀態后的回調函數。
（3-14）reloadOnSearch：boolean，如果為false，那么當一個search/query參數改變時不會觸發相同的狀態，用於當你修改$location.search()的時候不想重新加載頁面。默認為true。
（3-15）data：object，任意對象數據，用於自定義配置。繼承父級狀態的data屬性。換句話說，通過原型繼承可以達到添加一個data數據從而整個樹結構都能獲取到。
（3-16）params：url里的參數值，通過它可以實現頁面間的參數傳遞。params:{params1:null,params2:null...}
2、提供$urlRouterProvider對象，
（1）用$urlRouterProvider.when(url,otherUrl/handler)配置匹配的前端路由，
（2）用$urlRouterProvider.otherwise('/login')配置不匹配的前端路由。

十三、ui.router實際執行步驟
$stateParams.params;
$state.go('page',{ thisParams: '123'})
附1：ngRoute模塊提供$routeProvider服務
1、$routeProvider.when('/bookDetail/:bookId',{}).when()
2、<a class="btn btn-default" href="#/bookDetail/{{book.id}}">//實參
3、var bookId = $routeParams.bookId;//獲取實參
附2：ui.router和ngRoute的區別
1、ui.router模塊提供$urlRouterProvider、$stateProvider、$stateParams服務
2、ngRoute模塊提供$routeProvider、$routeParams服務
以下是流程
1、定義路由狀態；
$stateProvider
 .state('page2', {
   url: '/event-safe/:thisParams',
   params: {
     thisParams: null//前端可以根據thisParams的取值不同，進行不同的處理，與上面的:thisParams二選一使用
   },
   templateUrl: 'event/event-safe.html',
   controller: 'eventSafeCtrl',
 })
2、激活路由的方式
（1）$state.go()：優先級最高的激活方式
（2）ui-sref：點擊包含此指令跳轉，例如<a ui-sref="page2({type:1})"></a>
（3）ng-href：<a ng-href="#/page2/1"></a>
3、ui.router路由嵌套：通過 .語法進行路由層級配置
代碼示例一：
/* 以下是index.html */
<div>
 <span>其他內容</span>
 <a ui-sref="about">About</a>
 <a ui-sref="home">Home</a>
 <span>其他內容</span>
 <div ui-view></div>
</div>
/* 以下是home.html */
<div>
 <span>其他內容</span>
 <a ui-sref=".list">List</a>
 <a ui-sref=".graph">Paragraph</a>
 <span>其他內容</span>
 <div ui-view></div>
</div>
$stateProvider
 .state("about", {
   url: "/about",
   templateUrl: "about.html",
 })
 .state("home", {
   url: "/home",
   templateUrl: "home.html",
 })
 .state("home.list", {
   url: "/list",
   templateUrl: "home-list.html",
   controller: function ($scope) {
     $scope.dogs = ["Bernese", "Husky", "Goldendoodle"];
   },
 })
 .state("home.graph", {
   url: "/graph",
   template: "I could sure use a drink right now.",
 });
代碼示例二：
<div>
 <div ui-view="filters"></div>
 <div ui-view="mailbox"></div>
 <div ui-view="priority"></div>
</div>
$stateProvider
 .state('inbox', {
   views: {
     'filters': {
       template: '<h4>Filter inbox</h4>',
       controller: function($scope) {}
     },
     'mailbox': {
       templateUrl: 'partials/mailbox.html'
     },
     'priority': {
       template: '<h4>Priority inbox</h4>',
       resolve: {
         facebook: function() {
           return FB.messages();
         }
       }
     }
   }
 }); 
 
十四、jqLite的API參考
在jQuery中，$()里面是通過各種選擇器獲得元素；在jqLite中，通過angular.element(param)獲得元素；param只有兩種：一種是類似html元素的字符串，一種是Dom元素。如：var email=angular.element('<input name="email" id="myId"></input>'); var email=angular.element(document.getElementById(‘myId’));
jqLite API參考：https://blog.csdn.net/chi1130/article/details/78556097
01、addClass()  //為每個匹配的元素添加指定的樣式類名
02、after() 在匹配元素集合中的每個元素后面插入參數所指定的內容，作為其兄弟節點
03、append()    //在每個匹配元素里面的末尾處插入參數內容
04、attr()  //獲取匹配的元素集合中的第一個元素的屬性的值
05、bind()  //為一個元素綁定一個事件處理程序
06、children()  //獲得匹配元素集合中每個元素的子元素，選擇器選擇性篩選
07、clone() //創建一個匹配的元素集合的深度拷貝副本
08、contents()  //獲得匹配元素集合中每個元素的子元素，包括文字和注釋節點
09、css()   //獲取匹配元素集合中的第一個元素的樣式屬性的值
10、data()  //在匹配元素上存儲任意相關數據
11、detach()    //從DOM中去掉所有匹配的元素
12、empty() //從DOM中移除集合中匹配元素的所有子節點
13、eq()    //減少匹配元素的集合為指定的索引的哪一個元素
14、find()  //通過一個選擇器，jQuery對象，或元素過濾，得到當前匹配的元素集合中每個元素的后代
15、hasClass()  //確定任何一個匹配元素是否有被分配給定的（樣式）類
16、html()  //獲取集合中第一個匹配元素的HTML內容
17、next()  //取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。如果提供一個選擇器，那么只有緊跟着的兄弟元素滿足選擇器時，才會返回此元素
18、on()    //在選定的元素上綁定一個或多個事件處理函數
19、off()   //移除一個事件處理函數
20、one()   //為元素的事件添加處理函數。處理函數在每個元素上每種事件類型最多執行一次
21、parent()    //取得匹配元素集合中，每個元素的父元素，可以提供一個可選的選擇器
22、prepend()   //將參數內容插入到每個匹配元素的前面（元素內部）
23、prop()  //獲取匹配的元素集中第一個元素的屬性（property）值
24、ready() //當DOM准備就緒時，指定一個函數來執行
25、remove()    //將匹配元素集合從DOM中刪除。（同時移除元素上的事件及 jQuery 數據。）
26、removeAttr()    //為匹配的元素集合中的每個元素中移除一個屬性（attribute）
27、removeClass()   //移除集合中每個匹配元素上一個，多個或全部樣式
28、removeData()    //在元素上移除綁定的數據
29、replaceWith()   //用提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合
30、text()  //得到匹配元素集合中每個元素的合並文本，包括他們的后代
31、toggleClass()   //在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決於這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類
32、triggerHandler()    //為一個事件執行附加到元素的所有處理程序
33、unbind()    //從元素上刪除一個以前附加事件處理程序
34、val()   //獲取匹配的元素集合中第一個元素的當前值
35、wrap()  //在每個匹配的元素外層包上一個html元素
 
十五、前端路由及觸發條件
1、前端路由的作用是 
（1）記錄當前頁面的狀態； 
（2）可以使用瀏覽器的前進后退功能；
2、前端路由的實現是瀏覽器的hash模式，該模式能做到： 
（1）url變化時，不向后台發送請求；
（2）截獲url地址，並解析出需要的信息來匹配路由規則。 
（3）另外，使用瀏覽器的history模式時，當url變化時，會向后台發送請求；
3、angular1前端路由觸發條件
（1）<a href="#bbb">Home</a>
（2）$state.go('login')
 
 

 https://www.cnblogs.com/wzl96/p/10967958.html