通過對(duì)象參數(shù)和scope變量作為值來使用 ng-style 指令， 而 不是使用 scope 變量作為字符串通過 {{}} 用于 style 屬性。

參數(shù)1： 指令的名稱
參數(shù)2： 構(gòu)造函數(shù)，自定義指令式，只執(zhí)行一次，將一些復(fù)雜業(yè)務(wù)邏輯放在該函數(shù)中，最后改函數(shù)返回是一個(gè)對(duì)象(用來描述指令)

規(guī)則：

使用小駝峰命名。

在link function 中使用 $scope 。 在compile中， 定義參數(shù)的post/pre link functions 將在函數(shù)執(zhí)行時(shí)被傳遞，無法通過依賴注入改變它們。

指令添加自定義前綴避免與第三方指令沖突

可復(fù)用組件創(chuàng)建獨(dú)立作用域

使用 scope.$on("$destroy", fn) 來清除. 這點(diǎn)在使用第三方指令的時(shí)候特別有用.

restrict: 自定義指令的類型
E,該指令是一個(gè)自定義元素(element)
A,該指令在元素時(shí)屬性上(attributes)
C,該指令在元素的類上(class)
M,注釋指令(comment)

template: 傳遞的是模板字符串

templateUrl: 模板文件的路徑

replace: false
是否替換原有的元素，true會(huì)替換掉原有的元素，false不會(huì)替換掉元素。
當(dāng)設(shè)置true時(shí)，會(huì)對(duì)controller中使用的參數(shù)$element 和 $attrs 有影響

controller
用來定義自定義指令的作用域。
this 指向的controller{}空對(duì)象
arguments默認(rèn)情況下是一個(gè)空數(shù)組，需要參數(shù)注入。
$scope 該指令的作用域
$element 該指令的元素
$attrs 該指令的元素的屬性

// directive() 自定義指令
app.directive("curtoms" , function () {
    
    console.log(111);
    
    return {
        
        // 指令類型
        restrict: "EAC",
        
        // 模板字符串
//                    template: "
自定義指令
",
        
        // 模板文件獲取 url
        templateUrl: "a.html",
        
        // replace表示是否替換原來的元素，true是替換，false不替換
//                    replace: false,
        replace: true,
        
        controller: function ( $scope, $element, $attrs ) {
            
            // this 指向 controller{} 空對(duì)象
            
            console.log( $scope, $element, $attrs );
            
        }
        
    }
    
});

scope
隔離自定義的作用域的屬性，通過對(duì)其社會(huì)字一個(gè)對(duì)象來隔離指令的作用域。
如果值是true或者false，指令的作用域就會(huì)忽略自身作用域，而去尋找父級(jí)作用域中的變量。
如果值是空對(duì)象{} ，作用域會(huì)指向該空對(duì)象

directive返回對(duì)象中的scope和controller
自定義指令中，scope屬性對(duì)controller的影響：
如果scope的值是true，在controller中，定義與父作用域中相同變量時(shí)，自定義指令中的變量不會(huì)受到副作用于中的變量的影響。
如果scope是一個(gè)false，在controller中，定義與父作用域相同變量時(shí)，該變量與父作用域中的變量同步(同時(shí)修改，數(shù)據(jù)雙向綁定)
如果scope是一個(gè)對(duì)象，在controller中，定義與父作用域相同的變量時(shí)，自定義指令中的變量不會(huì)收到父作用域的變量影響。

app.directive("myCutom", function () {
    
    return {
        
        restrict: "E",
        
        template: "
{{ msg }} -- {{ title }}
",
        
        // scope: {},
        // scope: true,
            scope: false
        
        controller: function ( $scope, $element, $attrs ) {
            
            $scope.title = "aaaa";
            
            $scope.msg = "xixixi";
            
        }
        
    }
    
});

@修飾符
可以屏蔽模板中變量去controller作用域中尋找值的過程，而是讓其去該自定義指令所在元素的屬性中尋找數(shù)據(jù)變量. 忽略自定義指令的scope。
@修飾符會(huì)去自定義指令中所在元素的屬性去尋找。
屬性值是插值傳入，作為普通屬性處理。

app.directive("myCutom", function () {
    
    return {
        
        restrict: "E",
        
        template: "
{{ msg }} -- {{ title }}
",

        scope: {
        // 告知 自定義指令 不需要從 自己的作用域中尋找 變量
            title: "@myTitle"
        },

        controller: function ( $scope, $element, $attrs ) {
            
            $scope.title = "aaaa";
            
            $scope.msg = "xixixi";
            
        }
        
    }
    
});

=修飾符
通過在scope屬性中定義含有=修飾符的變量時(shí)，可以取得父作用域中的變量，通過屬性映射.

作用：自定義指令作用域中變量與父作用域的雙向綁定過程.
注意：自定義元素中的屬性值是一個(gè)父作用域中的一個(gè)變量，在自定義指令中當(dāng)作一個(gè)變量來處理。

template,中的數(shù)據(jù)和 父級(jí)的作用域$scope,數(shù)據(jù)綁定

tempalte: "
{{title}}
",

app.controller("main", function ( $scope ) {
    $scope.title = "";
});

link

操作自定義指令的DOM

link的函數(shù)
this指向window
arguments：
1 scope， 指令作用域
2 jqlite 獲取自定義元素
3 attrs 自定義指令元素上的屬性

// 操作自定義指令元素
// @param {Object} scope  子作用域
// @param {Object} jqlite JQ對(duì)象
// @param {Object} attrs 自定義上的屬性
link: function ( scope, jqlite, attrs ) {
    
    // this -> window
    var el = jqlite.children("h1").attr("nodeValue", 1);
    
    // 使用 data 自定義屬性  ，會(huì)自動(dòng)省略  data-
    
    for ( var i=0; i
complie
this指向的是指令描述對(duì)象. 
參數(shù)1： jqlite 獲取的自定義元素
參數(shù)2： attrs 自定義指令所在元素的屬性
返回一個(gè)函數(shù)， 指向 link 函數(shù)
在返回函數(shù)中，可以操作自定義指令所在元素.

    
    
        
嘻嘻哈哈
    
    




transclude    
它告訴自定義指令，要將自定義元素中未知的元素內(nèi)容插入到已知模板具有ng-transclude指令所在的元素中(添加自定義指令元素中的未知元素)
未知元素：自定義標(biāo)簽中的元素.
告知自定義指令，要將自定義中未知的元素內(nèi)容插入到已知模板。
條件： 模板標(biāo)簽上具有ng-transclude指令
需要設(shè)置 transclude: true. 
現(xiàn)象：模板標(biāo)簽會(huì)包裹自定義標(biāo)簽內(nèi)的內(nèi)容.
app.directive("myDirective", function () {
    
    return {
        
        restrict: "E",
        
        template: "
",
        
        transclude: true    
        
    }
    
});


require 
自定義指令引用其它指令，作為link()方法的第四個(gè)參數(shù).
例如，將ngModel引入到自定義指令中. 在link方法中可以訪問到ngModel中的屬性值
require: "ngModel"


// 自定義指令
app.directive("myDirective", function () {
    
    // 返回一個(gè)描述指令對(duì)象
    return {
        
        restrict: "A",
        
        // 引入其它指令
        require: "ngModel",
        
        link: function ( scope, jqlite, attrs, ngModel ) {
            
            // $watch 檢測某個(gè)值 發(fā)生改變，觸發(fā)某個(gè)函數(shù)
            // 當(dāng) ngModel 值發(fā)生改變， 觸發(fā)函數(shù)
            scope.$watch(attrs.ngModel, function () {
                
                console.log(ngModel.$viewValue);
                
            });
            
        }
        
    }
    
});

服務(wù)
對(duì)一些方法的封裝，復(fù)用方法更為簡便。例如：消息系統(tǒng)，作為消息服務(wù).
使用服務(wù)，利用參數(shù)注入即可。

大駝峰和小駝峰都可

將業(yè)務(wù)邏輯封裝成服務(wù)

將業(yè)務(wù)邏輯封裝成 service  而非 factory

使用 $cacheFactory 進(jìn)行繪畫級(jí)別的緩存。 應(yīng)用于緩存請(qǐng)求或復(fù)雜運(yùn)算的結(jié)果。


內(nèi)置服務(wù)
$timeout
對(duì)setTimeout()的封裝
app.controller("main", function ($scope, $timeout) {

    $timeout(function () {

        console.log(this);
        console.log(arguments);
        
    }, 2000);

});

$interval    
對(duì)setInter();的封裝
app.controller("main", function ($scope, $interval) {
    // 定義一個(gè)時(shí)間
    $scope.date = new Date();

    $interval(function () {
        // 重新定義日期
        $scope.date = new Date();
    }, 1000);

});


$http   
異步請(qǐng)求
配置參數(shù):
method： 請(qǐng)求方式 "GET","POSt"
url: 請(qǐng)求的地址
$http 方法執(zhí)行完后鏈?zhǔn)秸{(diào)用success(),請(qǐng)求成功的回調(diào)函數(shù)
POST請(qǐng)求：
通過設(shè)置data屬性添加POST請(qǐng)求發(fā)送數(shù)據(jù)
params屬性添加請(qǐng)求的參數(shù)數(shù)據(jù)
// $http 服務(wù)
$http({
    method: "GET",
    url: "data/service.json"
}).success(function ( res ) {  
    
    if ( res.errno === 0 ) {
        
        $scope.msg = res.msg;
    
        console.log(res);
        
    }
    
});


$http({
    method: "POST",
    url: "demo.json",
    // 該屬性會(huì)將鍵值對(duì)轉(zhuǎn)化成url上參數(shù)
    params: {
        id: 11
    },
    // post請(qǐng)求 添加請(qǐng)求數(shù)據(jù)
    data: {
        username: "aa"
    }
});



$http.get，$http.post 
$http服務(wù)中的get請(qǐng)求和post請(qǐng)求簡寫方式
params 配置請(qǐng)求參數(shù)
// get 請(qǐng)求
$http.get("data/service.json", {
    params: {
        id: 1
    }
})
// 請(qǐng)求成功
.success(function ( res ) {
    
    console.log( res );
    
});


// post 請(qǐng)求
// 參數(shù)1：url ，參數(shù)2：請(qǐng)求攜帶的數(shù)據(jù)
$http.post("data/service.json", {
    id: 1
})
// 請(qǐng)求成功
.success(function ( res ) {
    
    console.log(res);
    
});
 

promise對(duì)象
允諾對(duì)象，在內(nèi)部是一個(gè)異步操作，當(dāng)操作完成時(shí)，這個(gè)對(duì)象會(huì)實(shí)現(xiàn)它的允諾.
特點(diǎn)： 可以無限添加允諾。 一定在某些操作完成時(shí)才出發(fā)。
規(guī)范中允諾對(duì)象使用 then方法.
自定服務(wù)
需要各種服務(wù)以支持各種功能，也可以手動(dòng)開啟或關(guān)閉某些服務(wù)以達(dá)到相應(yīng)的功能.
factory()
工廠模式定義自定義服務(wù)
參數(shù)1：服務(wù)名稱
參數(shù)2：服務(wù)工廠方法
返回值：服務(wù)對(duì)象，這個(gè)對(duì)象提供其它控制器使用
var app = angular.module("app", []);

// 其它控制器使用服務(wù)
app.controller("facotryCtrl", function ( $scope, news ) {
    
    $scope.msg = news.data;
    
});

// factory 定義 服務(wù)
app.factory("news", function () {
    
    return {
        data: "嘻嘻哈哈"
    }
    
});

service 
面向?qū)ο髣?chuàng)建服務(wù)
參數(shù)1：服務(wù)名稱
參數(shù)2：服務(wù)的構(gòu)造函數(shù)(構(gòu)造函數(shù)中需要使用this來暴露接口)
// 使用 service 自定義服務(wù)
app.service("data", function () {
    
    this.title = "嘻嘻哈哈";
    
});

路由
使用組件配合使用：
angular-route.js
angular-ui-router.js
用來尋找頁面，通常通過配置一些路由來映射一些頁面
路由：就是URL到函數(shù)的映射。
ngRoute
需要在程序入口處引入，添加到依賴集合中
angualr.module("app", ["ngRoute"]);

ng-view
動(dòng)態(tài)渲染的視圖，視圖如何渲染根據(jù)路由決定


渲染視圖需要在頁面初始化之前知道路由配置.
使用congfig();
congfig();
在應(yīng)用程序執(zhí)行之前執(zhí)行一個(gè)配置方法，在頁面還未被渲染，可以將路由邏輯放入該方法中。
回調(diào)函數(shù)：
this -> window
默認(rèn)參數(shù)是空的，需要將服務(wù)注入
// 配置
app.config(function ( $routeProvider ) {

$routeProvider.when("/", {
    
    // 模板
// template: "
嘻嘻哈哈
",
    templateUrl: "a.html",
    
    // 控制器
    controller: function ( $scope ) {
        
        console.log( $scope );
        
        $scope.style = {
            color: "deeppink"
        }
        
    }
    
});

$routeProvider
路由服務(wù)：
路由供給服務(wù)，提供一個(gè)when方法，供使用配置路由.
controller
在路由對(duì)象中，可以通過controller屬性，為路由對(duì)象添加控制器，創(chuàng)建一個(gè)作用域，讓模板可以使用作用域中的變量。
template
配置模板字符串
templateUrl
配置外部模板
會(huì)發(fā)送異步請(qǐng)求
otherwise
重定義路由
配置兩個(gè)路由以上，otherwise 才會(huì)有效果.
配置參數(shù)為 redirectTo 來重定向到不同路由，值是定義過路徑.
// app
var app = angular.module("app", ["ngRoute"]);

// controller
app.controller("routerCtrl", function ( $scope ) {
    
    $scope.shop = "shopPage1";
    
});

// config
app.config(function ( $routeProvider ) {
    
    // 配置首頁 路由  
    $routeProvider.when("/", {
        
        template: "
{{ index }}
",
        
        controller: function ( $scope ) {
            
            $scope.index = "indexPage";
            
        }
        
    })
    
    // 配置  shop 頁面 路由
    .when("/shop", {
        
        template: "
{{ shop }}
",
        
        controller: function ( $scope ) {
            
                //    $scope.shop = "shopPage";
            
        }
        
    })
    
    // 其它路由 重定義 到  / 目錄中
    .otherwise({
        redirectTo: "/"
    });
    
});

路由參數(shù)
路由路徑配置參數(shù)(參數(shù)名前需要加：冒號(hào))
將獲取路由參數(shù)服務(wù)注入控制器中($routeParams注入控制器中).
app.config(function ( $routeProvider ) {
    
    // 配置參數(shù)
    $routeProvider.when("/shop/:pageNum/:type", {
        
        template: "
{{ shop }}
",
        
        // 參數(shù)注入
        controller: function ( $scope, $routeParams ) {
            
            $scope.shop = "shopPage";
            
            console.log( $routeParams );
            
        }
        
    });

});

路由時(shí)間
路由時(shí)間通常定義需要監(jiān)聽該事件的控制器中，在全局作用域下監(jiān)聽，通過對(duì)作用域$on()方法監(jiān)聽路由事件。
例如：$routeChangeSuccess
監(jiān)聽路由改變成功
參數(shù)1： 表示事件對(duì)象
參數(shù)2：表示當(dāng)前路由對(duì)象
參數(shù)3：表示前一個(gè)路由(如果當(dāng)前沒有前一個(gè)路由對(duì)象，因此參數(shù)會(huì)是undefined)
app.run(function ( $rootScope ) {
    
    $rootScope.$on("$routeChangeSuccess", function ( ev, routeObj, preRouteObj ) {
        
        
    });
    
});

$location
管理地址欄狀態(tài)信息，包括query，path 
path(): 改變路由中的path.
讀：$location.path();
設(shè)：$loction.path(arg);
app.run(function ( $rootScope, $location ) {
    
    $rootScope.$on("$routeChangeSuccess", function ( ev, routeObj, preRouteObj ) {
        
        // var q = $location.path(); // 讀
        
        $location.path("/xixi"); // 設(shè)置  
        
    });
    
});

ui-router
ngRoute: 每個(gè)頁面對(duì)應(yīng)一個(gè)地址(path), 需要渲染那個(gè)頁面，就需要配置路由.
uiRouter: 引入state(狀態(tài))概念，如果哪個(gè)頁面如果顯示，渲染出對(duì)應(yīng)的頁面，渲染之后會(huì)有一種狀態(tài)，可以將該狀態(tài)記錄，配置路由 
ui-view
在ui-router 中使用的指令ui


$stateProvider    
參數(shù)注入到config()來定義狀態(tài)
app.config(function ( $stateProvider ) {});

state();    
定義狀態(tài)
參數(shù)1：狀態(tài)名稱
參數(shù)2：配置參數(shù)
url: 狀態(tài)頁面的地址
tempate： 狀態(tài)對(duì)應(yīng)頁面的模板
controller 定義狀態(tài)對(duì)應(yīng)頁面的作用域
// 參數(shù)注入 ui.router
var app = angular.module("app", ["ui.router"]);

// 配置路由
app.config(function ( $stateProvider ) {

// $stateProvider 定義狀態(tài)
console.log( $stateProvider );

$stateProvider.state("home", {
    
    // 配置 #/
    url: "/",
    
    template: "
{{ indexPage }}
",
    
    controller: function ( $scope ) {
            
        $scope.indexPage = "indexPage";
        
        console.log( this,arguments );
        
    }
    
})

.state("shop", {
    
    url: "/shop",
    
    template: "
{{ shopPage }}
",
    
    controller: function ( $scope ) {
        
        $scope.shopPage = "shopPage";
        
        console.log( this,arguments );
        
    }
    
})

});    

uiRouter路由參數(shù)規(guī)則
路由規(guī)則：

固定值：/key

可捕獲的參數(shù)： /:key

限制字段類型： /{key:type}   type: int,string

捕獲query： ?queryNum&queryNum2


$stateProvider.state("shop", {
    
    // url: "/shop/xixi/is/100?form=10&to=20"
    url: "/shop/:value/is/{pageNum:int}?form&to",
    
    template: "
{{ shopPage }}
",
    
    controller: function ( $scope, $stateParams ) {
        
        console.log( $stateParams );
        
        $scope.shopPage = "shopPage";
        
    }
    
})    


$urlRouterProvider            
when(); 將參數(shù)1的路由路徑重定向到參數(shù)2路由路徑
otherwise(); 匹配不存在的路由，跳轉(zhuǎn)到定義過的路由.
// 配置 不存在路由    
$urlRouterProvider.when("", "/").otherwise("/error");

views 多視圖
ui-router 可以渲染頁面中的多個(gè)視圖，通過為頁面中ui-view指令添加名稱，多個(gè)視圖渲染需要在config() 配置。

    

    

    




app.config(function ( $stateProvider, $urlRouterProvider ) {

$stateProvider.state("home", {
    
    url: "/",
    
    views: {
        
        leftView: {
            
            template: "
leftView
"
            
        },
        
        rightView: {
            
            template: "
rightView
"
            
        },
        
        contentView: {
            
            template: "
contentView {{ msg }}
",
            
            controller: function ( $scope ) {
                
                $scope.msg = "中間模塊"
                
            }
            
        }
        
    }
    
});

view 嵌套
在 ui-reouter 中視圖是可以嵌套。
在state() 定義狀態(tài)名稱的時(shí)候添加命名空間。
路由需要有順序，定義在父路由的后邊。
注意：父視圖需要添加動(dòng)態(tài)視圖ui-view
多視圖不能與嵌套視圖同時(shí)使用
匹配主頁，定義路徑不需要添加 "/shop", 直接 "shop";即可.
app.config(function ( $stateProvider, $urlRouterProvider ) {
    
    $stateProvider.state("home", {
        
        url: "/",
        
        template: "
index
"
        
    })
    .state("home.shop", {
        
        url: "shop",
        
        template: "
shopPage
"
        
    });
    
    $urlRouterProvider.when("","/");
    
});

路由事件
添加在全局作用域$rootScope 下檢測路徑變化
事件名以state開頭
參數(shù)1： 事件對(duì)象
參數(shù)2： 當(dāng)前路由對(duì)象
參數(shù)3： 當(dāng)前路由參數(shù)對(duì)象
參數(shù)4： 前一個(gè)路由對(duì)象
參數(shù)5： 前一個(gè)路由參數(shù)對(duì)象
app.run(function ( $rootScope ) {
    
    $rootScope.$on("$stateChangeSuccess", function ( ev, routeObj, routeParamsObj, preRouteObj, preRouteParamsObj ) {
        
        console.log( this,arguments );
        
    })
    
});