Angular

1.創(chuàng)建模塊： var oneApp = angular.module("myApp"篷店，[ ] ) 第一個(gè)參數(shù)是模塊名，第二個(gè)參數(shù)是填所依賴的模塊花椭。返回模塊對(duì)象忽匈。只傳一個(gè)參數(shù)是獲取。
2.給剛剛添加的oneApp模塊對(duì)象添加控制器矿辽，一定要在方法前注入要使用的$參數(shù)：

oneApp.controller('oneController',[‘$scope’,’$http’丹允，function($scope,$http)]
{ $scope.***=" "； 賦值操作 //當(dāng)控制器執(zhí)行時(shí)自動(dòng)運(yùn)行的函數(shù) }); 通過(guò)$scope與視圖關(guān)聯(lián)袋倔。

由于壓縮代碼會(huì)改變參數(shù)名稱雕蔽，注冊(cè)控制器的方法就通過(guò)第二個(gè)參數(shù)為數(shù)組的方式注入?yún)?shù)，最后一個(gè)成員為原本的控制器函數(shù)宾娜，前面的成員都是需要注入的對(duì)象名稱萎羔。一個(gè)angular對(duì)象可以有多個(gè)controller

3.使用模塊時(shí)給要使用的區(qū)域

 <div ng-app="myApp" ng-controller='oneController'>  </div>

使用ng-app來(lái)聲明這里面包含的內(nèi)容要使用angular來(lái)管理。

4.可以給使用angular的標(biāo)簽里面添加ng-click="函數(shù)名( )",并在controller里用$scope.函數(shù)名=function( )來(lái)定義函數(shù)碳默，在click時(shí)調(diào)用贾陷。

5.控制器的三種職責(zé)：
·為應(yīng)用中的模型設(shè)置初始狀態(tài)。
·通過(guò)$scope對(duì)象把數(shù)據(jù)模型或函數(shù)對(duì)象傳遞給視圖嘱根。
·利用$watch( )函數(shù)監(jiān)視模型的變化做出相應(yīng)的響應(yīng)髓废。
$scope.$watch(“要監(jiān)視的變量名”，function（now该抒，old）{ //變量值改變時(shí)執(zhí)行})
6.為了防止Angular在未完全執(zhí)行完之前頁(yè)面顯示原本的HTML內(nèi)容慌洪，給最外層的div節(jié)點(diǎn)即添加了ng-app的節(jié)點(diǎn)添加ng-cloak屬性,并在css中設(shè)置[ng-cloak]{display:none},ng-cloak屬性在Angular加載完成后自動(dòng)刪除。
7.ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序凑保。

 ng-init 指令初始化應(yīng)用程序數(shù)據(jù)冈爹。
 ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。

8.AngularJS過(guò)濾器：可用于轉(zhuǎn)換數(shù)據(jù)：
currency 格式化數(shù)字為貨幣格式欧引。filter從數(shù)組項(xiàng)中選擇一個(gè)子集频伤。
lowercase格式化字符串為小寫。uppercase大寫芝此。orderBy根據(jù)某個(gè)表達(dá)式排列數(shù)組憋肖。
9.$location服務(wù)，它可以返回當(dāng)前頁(yè)面的 URL 地址婚苹。
$scope.myUrl = $location.absUrl();

 $http 服務(wù)向服務(wù)器發(fā)送請(qǐng)求岸更，應(yīng)用響應(yīng)服務(wù)器傳送過(guò)來(lái)的數(shù)據(jù)。
 $http.get("welcome.htm").then(function (response)    {$scope.my=response.data;});
 $timeout 服務(wù)對(duì)應(yīng)了 JS window.setTimeout 函數(shù)膊升。
 $timeout(function(){$scope.myHeader = "     ready?";}, 2000);
 $interval 服務(wù)對(duì)應(yīng)了 JS window.setInterval 函數(shù)怎炊。
 $interval(function () {$scope.theTime=new     
 Date().toLocaleTimeString();},1000);

10.所有的dom操作都應(yīng)該封裝到自定指令當(dāng)中！將復(fù)雜的HTML片段注入到頁(yè)面。
通過(guò)angular對(duì)象.directive（’指令名’,function（）{所有的DOM操作都要在link函數(shù)里
return{ restrict: 'A', 表示能在屬性上使用评肆，E表示只能當(dāng)表情使用债查，C表示只能當(dāng)類使用，M為在注釋里使用
link: function(scope, element, attr糟港，controller) {參數(shù)代表使用這個(gè)指令的對(duì)象信息攀操，操作dom元素}}]）
在link函數(shù)中可以給元素注冊(cè)事件利用element.on（‘事件名’，function（）{}）秸抚；
使用時(shí)可以<指令名></指令名>來(lái)使用速和。也可以當(dāng)做屬性放在標(biāo)簽中。還可以return一個(gè)templateUrl和replace參數(shù)剥汤，templateUrl代表要添加的模板內(nèi)容颠放，replace為true時(shí)清空之前標(biāo)簽內(nèi)的html替換為template。
自定義指令時(shí)name采用駝峰命名法如tsHello使用時(shí)采用—的方式如te-hello吭敢。

11.想要按回車鍵時(shí)觸發(fā)事件給input加上form標(biāo)簽利用ng-submit=函數(shù)名來(lái)觸發(fā)碰凶。想要阻止表單的自動(dòng)提交并刷新瀏覽器給form標(biāo)簽添加onsubmit=’return false’只有return false時(shí)候才能阻止自動(dòng)提交。
12.使用angular時(shí)不要操作Dom元素鹿驼，要想如何傳給控制臺(tái)參數(shù)并通過(guò)控制臺(tái)執(zhí)行相應(yīng)函數(shù)來(lái)改變視圖中的數(shù)據(jù)欲低。
13.如果在控制器中調(diào)用js中的window時(shí)，需要通過(guò)依賴注入的$window對(duì)象畜晰，因?yàn)槊恳粋€(gè)控制器的代碼只是在它管轄的作用域中使用砾莱，通過(guò)這樣的寫法可以防止它與全局的window對(duì)象混淆，出現(xiàn)各類詭異的異常Ｆ啾恰＠吧！块蚌！
14.給父子標(biāo)簽添加controller時(shí)子標(biāo)簽中的controller自動(dòng)繼承父標(biāo)簽中controller中$scope的屬性和方法闰非。
15.添加angular模板。
·首先構(gòu)建模板峭范，創(chuàng)建type為‘text/ng-template’并含有id屬性的script標(biāo)簽财松，標(biāo)簽內(nèi)寫入模板內(nèi)容。<script type=‘text/ng-template’ id=‘模板名’>模板內(nèi)容</script>
·然后在html中需要使用模板的地方加div虎敦，并設(shè)置ng-include游岳、src=‘模板名’、ng-controller其徙。
·之后再相應(yīng)的controller中設(shè)置模板所需要的值。
16.angular中改變css樣式：
·方法一：在標(biāo)簽中添加ng-class屬性并等于“{{$scope.樣式名}}”利用$scope.樣式名=…添加class喷户。
·方式二：可以一次添加多個(gè)標(biāo)簽唾那，先設(shè)置值為布爾類型的$scope屬性，在標(biāo)簽中添加
ng-class=”{‘red’:$scope屬性,‘green’:$scope屬性}”當(dāng)對(duì)應(yīng)的屬性為true時(shí)添加該樣式名。
17.自增長(zhǎng)型id可能會(huì)因?yàn)榍懊娴脑乇粍h除后之后添加的id會(huì)與前一個(gè)id沖突闹获，所以可以通過(guò)將id設(shè)置為random來(lái)保證id不會(huì)重復(fù)期犬。
18.不要在以數(shù)組長(zhǎng)度為循環(huán)條件的情況下增加或刪除數(shù)組，這樣會(huì)影響循環(huán)而且很傻避诽。
改變url的哈希值利用$location.path（“a”）在地址后面添加# /a與路由一起實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)龟虎。
19.配置路由：當(dāng)請(qǐng)求來(lái)時(shí)用路由尋找到相應(yīng)的控制器
·首先引入angular-route這個(gè)包，在創(chuàng)建angular對(duì)象時(shí)第二個(gè)參數(shù)依賴?yán)锾钊搿痭gRoute’加引號(hào)Ｉ陈鲤妥！

之后用angular對(duì)象的config（‘$routeProvider’，function（$ routeProvider）{
 $routeProvider.when(‘/a’,{controller:對(duì)應(yīng)控制器名 拱雏，templateUrl：‘模板路徑’})
           .when(‘/b’,{…} )  利用when 來(lái)設(shè)置配置規(guī)則
           .otherwise（{redirect:’/a’}）}）棉安；

• 當(dāng)請(qǐng)求提交時(shí)路由模塊改變的是含ng-view屬性的標(biāo)簽，將其中內(nèi)容替換成相應(yīng)的template铸抑。
• 填入的模板路徑一定是相對(duì)于使用者的路徑而非controller的路徑贡耽。
• 填入哈希值時(shí)可以用’/student/:name?’冒號(hào)后面的被當(dāng)做占位符可以任意匹配加問(wèn)號(hào)表示可以為空值。在controller里注入$ routerParmas.name可以得到name匹配到的值鹊汛。
  使用服務(wù)模塊蒲赂，對(duì)于業(yè)務(wù)邏輯都應(yīng)該放入服務(wù)模塊中，創(chuàng)建服務(wù)模塊：
  angular對(duì)象.service（“mainService”刁憋，function（）{ this.函數(shù)名=function(){}}）添加業(yè)務(wù)邏輯滥嘴。
  1.使用時(shí)先將這個(gè)模塊注入到主要的angular對(duì)象，然后將service名mainService注入到controller中职祷。
  2.過(guò)濾器：過(guò)濾器參數(shù)若是一個(gè)值則會(huì)在目標(biāo)對(duì)象的全部屬性中查找匹配氏涩。
  若想執(zhí)行所查找的屬性則{{data|filter:{score:80}}}這樣過(guò)濾器只看對(duì)象中score屬性是否滿足條件。
  使用自定函數(shù)匹配{{data|filter:函數(shù)名}}添加函數(shù)$scope.函數(shù)名=function(e){}e為現(xiàn)過(guò)濾對(duì)象有梆。返回true或false是尖。
  23．在給圖片標(biāo)簽的src綁定地址時(shí)要用ng-src綁定，因?yàn)槿绻胹rc瀏覽器會(huì)在angular為啟動(dòng)時(shí)請(qǐng)求圖片泥耀。
  3.用angular控制tab欄的樣式切換先使用ng-repeat來(lái)生成tab欄然后在點(diǎn)擊時(shí)觸發(fā)事件并根據(jù)id來(lái)改變對(duì)應(yīng)欄樣式饺汹。

<li ng-repeat="list in li " ng-class='{"active":list.active}' 
ng-click="activeChange(list.id)" >

使用ng-repeat時(shí)最好在后面加上track by id之類的唯一標(biāo)識(shí)屬性，在下次數(shù)據(jù)更新時(shí)頁(yè)面渲染速度回加快痰催。

4.路由最好只定義一個(gè)when（“/：參數(shù)/:參數(shù)”…）通過(guò)修改參數(shù)

$route.updataParams（{參數(shù)名:參數(shù)值}）來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)６荡恰！夸溶！$scope.$on("$routeChangeSuccess", function () { })來(lái)監(jiān)聽地址欄的變化Ｒ莩场！缝裁！

還有一種可以選擇的跳轉(zhuǎn)方式就是用a標(biāo)簽的href屬性扫皱，對(duì)應(yīng)不同情況來(lái)選擇跳轉(zhuǎn)方式。

5.想要在angular啟動(dòng)時(shí)執(zhí)行某函數(shù)用$scope.init( )=function（）{ }函數(shù)
6.路由的匹配也有順序，按when的照前后或者依賴注入的先后排序韩脑，先匹配上的先使用氢妈。沒(méi)有得到正確匹配一定要從路由的匹配順序上找問(wèn)題！６味唷首量！
7.angular中http的配置選項(xiàng)：

·$http({可以配置內(nèi)容有method、url进苍、data加缘、params、transformRequest琅捏、transformResponse生百、cache、timeout})
·data屬性是一個(gè)對(duì)象柄延，作為消息體的一部分發(fā)送給服務(wù)端
·params對(duì)應(yīng)一個(gè)字符串或?qū)ο笫唇羰菍?duì)象則自動(dòng)按照json格式序列化并追加到url后面作為發(fā)送數(shù)據(jù)的一部分
·transformRequest用于請(qǐng)求體頭信息和請(qǐng)求體進(jìn)行序列化轉(zhuǎn)換，并生成一個(gè)數(shù)組發(fā)送給服務(wù)端搜吧，transformResponse則是解析服務(wù)端傳回的響應(yīng)體頭信息和響應(yīng)體信息市俊。
·$http服務(wù)是只能接受一個(gè)參數(shù)的函數(shù)，這個(gè)參數(shù)是一個(gè)對(duì)象滤奈，包含了用來(lái)生成HTTP請(qǐng)求的配置內(nèi)容摆昧。這個(gè)函數(shù)返回一個(gè)promise對(duì)象，具有success和error兩個(gè)方法蜒程。success(function(data,status,config,headers){}绅你。

CommonJS之Promises/A規(guī)范:通過(guò)規(guī)范API接口來(lái)簡(jiǎn)化異步編程，使我們的異步邏輯代碼更易理解昭躺。

遵循Promises/A規(guī)范的實(shí)現(xiàn)我們稱之為Promise對(duì)象忌锯，Promise對(duì)象有且僅有三種狀態(tài)：unfulfilled、fulfilled领炫、failed偶垮；初始創(chuàng)建的時(shí)候是unfulfilled狀態(tài)，狀態(tài)只可以從unfulfilled變成fulfilled帝洪，或者unfulfilled變成failed似舵。狀態(tài)一旦變成fulfilled或者failed，狀態(tài)就不能再變了葱峡。
Promises/A規(guī)范提供了一個(gè)在程序中描述延時(shí)（或?qū)?lái)）概念的解決方案砚哗，是一種處理異步編程的模式，可以有效解決回調(diào)的煩惱砰奕，并以一種同步的方式去處理業(yè)務(wù)流程频祝。主要的思想不是執(zhí)行一個(gè)方法然后阻塞應(yīng)用程序等待結(jié)果返回后再回調(diào)其他方法泌参，而是返回一個(gè)Promise對(duì)象來(lái)滿足未來(lái)監(jiān)聽脆淹。fulfilled狀態(tài)和failed狀態(tài)都可以被監(jiān)聽常空。Promise通過(guò)實(shí)現(xiàn)一個(gè)then接口來(lái)返回Promise對(duì)象來(lái)注冊(cè)回調(diào)：
then(fulfilledHandler, errorHandler, progressHandler)；
then接口用于監(jiān)聽一個(gè)Promise的不同狀態(tài)盖溺。fulfilledHandler用于監(jiān)聽fulfilled狀態(tài)漓糙，errorHandler用于監(jiān)聽failed狀態(tài)，progressHandler用于監(jiān)聽unfulfilled狀態(tài)烘嘱。Promise不強(qiáng)制實(shí)現(xiàn)unfulfilled（未完成）的事件監(jiān)聽昆禽。
在$htto請(qǐng)求中使用promise對(duì)象并不會(huì)帶來(lái)根本上的變化，但它會(huì)減少數(shù)據(jù)加載時(shí)的白框現(xiàn)象或者等待加載的時(shí)間蝇庭，在優(yōu)化用戶體驗(yàn)上將發(fā)揮明顯的作用醉鳖。具體使用如下。

angular.module('goodsList.serivice',[])
    .factory('GoodsListFty',function($http,$q){
        testPromise:function(){
            //首先要定義一個(gè)延遲對(duì)象
            var deferrd=$q.derfer();
            //模擬異步請(qǐng)求訪問(wèn)
            serTimeout(function(){
                deferrd.resolve("吃飯了")
            }哮内，5000)盗棵；
            //返回promise對(duì)象
            return deferrd.promise;
        }
    })

在factory中創(chuàng)建，在controller中使用北发。Angular中需要配合$q一起使用纹因。
Promise.then( )返回的對(duì)象給下一個(gè).then（ ）使用鏈?zhǔn)骄幊痰姆绞较藢訉忧短椎穆闊巩惒阶優(yōu)橥搅詹ΑＷ詈髨?zhí)行finally內(nèi)的函數(shù)瞭恰。then( )里面第一個(gè)匿名函數(shù)使成功時(shí)調(diào)用的方法，第二個(gè)方法是失敗時(shí)調(diào)用狱庇。

console.log(1)惊畏；
//通過(guò)方法獲取promise對(duì)象
var promise=GoodListFty.testPromise();
//通過(guò)then方法觸發(fā)狀態(tài)監(jiān)聽
promise.then(
function(data){
    console.log(2);
    return data;
},
function(reason){

}
).then(function(data){
console.log(7);
console.log(data);
}).finally(
function(){
    console.log(3);
});
console.log(4);

8.在控制器中注入$rootScope對(duì)象使用時(shí)面對(duì)的是頁(yè)面中的各個(gè)控制器，通過(guò)$rootScope綁定的事件在各個(gè)控制器中都會(huì)觸發(fā)生效密任，$scope只針對(duì)一個(gè)控制器颜启。Angular中綁定事件調(diào)用obj.$on.(eventName,fn).
9.在angular中大部分操作之后的效果都是由$apply（）方法自動(dòng)在頁(yè)面中完成，如果調(diào)用了非angular中的方法和函數(shù)如setTimeout方法后需要手動(dòng)調(diào)用$apply方法來(lái)改變頁(yè)面中對(duì)應(yīng)的屬性值批什。
10.在為標(biāo)簽綁定事件時(shí)可以傳入$event參數(shù)农曲，通過(guò)event常量返回當(dāng)前觸發(fā)事件的對(duì)象元素。
11.在使用插件ui-router時(shí)候可以使用angular的campoent寫法驻债，一種較為簡(jiǎn)便的angular寫法乳规。

angular.module('hellogalaxy').component('hello', {   
template:  '<h3>{{$ctrl.greeting}} Solar System!</h3>' +              
'<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',               
controller: function() {     
this.greeting = 'hello';        
this.toggleGreeting = function() {       
this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'}}})
之后在$stateProvider中注冊(cè)state{name: 'hello',
url: '/hello',
component: 'hello'}

12.包含Service,factory,Provider三個(gè)子級(jí)概念，都是返回service（父級(jí)概念）對(duì)象
三種概念定義模塊的使用場(chǎng)景：

·Factory:返回一個(gè)匿名對(duì)象合呐，匿名對(duì)象中是方法的集合 return{各種方法}
·Service:在一個(gè)模塊中返回多個(gè)服務(wù)暮的，適合用service創(chuàng)建模塊
·Provider：是service的底層實(shí)現(xiàn)，angular本身的東西淌实，提供的服務(wù)
13.原聲JS中調(diào)用angular的$scope： 可以給$scope中添加原聲的JavaScript函數(shù)

    var appElement= $('[ng-controller="myCtrl"]');
    var $scope = angular.element(appElement).scope();

JSONP

由于默認(rèn)angular提供的異步請(qǐng)求對(duì)象不支持自定義回調(diào)函數(shù)名angular隨機(jī)分配的回調(diào)函數(shù)名稱不被豆瓣支持冻辩。
所以通過(guò)service自己寫方法來(lái)獲取豆瓣上的數(shù)據(jù)猖腕。
使用時(shí)給controller注入'HttpService'通過(guò)HttpService.jsonp（url，data恨闪，callback）得到data數(shù)據(jù)倘感。
注意：在angular中如果通過(guò)自己寫的函數(shù)或第三方的庫(kù)來(lái)調(diào)用ajax請(qǐng)求必須要使用$apply（‘被改變的數(shù)據(jù)’）來(lái)通知angular$scope中的某個(gè)數(shù)據(jù)被改變，需要重新渲染咙咽。$scope.$apply（）老玛；可以刷新所有的數(shù)據(jù)。

(function(angular) {
  // 由于默認(rèn)angular提供的異步請(qǐng)求對(duì)象不支持自定義回調(diào)函數(shù)名
  // angular隨機(jī)分配的回調(diào)函數(shù)名稱不被豆瓣支持
  var http = angular.module('moviecat.services.http', []);
  http.service('HttpService', ['$window', '$document', function($window, $document) {
    // url : http://api.douban.com/vsdfsdf -> <script> -> html就可自動(dòng)執(zhí)行
    this.jsonp = function(url, data, callback) {
      // if (typeof data == 'function') {
      //   callback = data;
      // }
      var querystring = url.indexOf('?') == -1 ? '?' : '&';
      for (var key in data) {
        querystring += key + '=' + data[key] + '&';
      }

      var fnSuffix = Math.random().toString().replace('.', '');
      var cbFuncName = 'my_json_cb_' + fnSuffix;
      querystring += 'callback=' + cbFuncName;

      var scriptElement = $document[0].createElement('script');
      scriptElement.src = url + querystring;
      // 不推薦
      $window[cbFuncName] = function(data) {
        callback(data);
        $document[0].body.removeChild(scriptElement);  //使用完后清除掉json文件
      };
      $document[0].body.appendChild(scriptElement);
    };
  }]);
})(angular);

利用scriptjs來(lái)實(shí)現(xiàn)異步加載庫(kù)钧敞，先引入angular-loader蜡豹，因?yàn)閟criptjs異步加載可能會(huì)因?yàn)橛行┪募《崆凹虞d完成，在未加載完他的依賴庫(kù)就執(zhí)行導(dǎo)致錯(cuò)誤溉苛，angular-loader會(huì)根據(jù)文件的依賴順序進(jìn)行異步加載

$script([
  './bower_components/angular/angular.js',
  './bower_components/angular-route/angular-route.js',
  './app.js' // 由于這個(gè)包比較小镜廉，下載完成過(guò)后就直接執(zhí)行，為保證執(zhí)行順序要先引用angular-load
], function() {  //庫(kù)全部加載完后執(zhí)行這個(gè)回調(diào)函數(shù)
  console.log(angular);
  angular.bootstrap(document, ['moviecat']);
});