通过对象参数和scope变量作为值来使用 ng-style 指令， 而 不是使用 scope 变量作为字符串通过 {{}} 用于 style 属性。

参数1： 指令的名称
参数2： 构造函数，自定义指令式，只执行一次，将一些复杂业务逻辑放在该函数中，最后改函数返回是一个对象(用来描述指令)

规则：

使用小驼峰命名。

在link function 中使用 $scope 。 在compile中， 定义参数的post/pre link functions 将在函数执行时被传递，无法通过依赖注入改变它们。

指令添加自定义前缀避免与第三方指令冲突

可复用组件创建独立作用域

使用 scope.$on("$destroy", fn) 来清除. 这点在使用第三方指令的时候特别有用.

restrict: 自定义指令的类型
E,该指令是一个自定义元素(element)
A,该指令在元素时属性上(attributes)
C,该指令在元素的类上(class)
M,注释指令(comment)

template: 传递的是模板字符串

templateUrl: 模板文件的路径

replace: false
是否替换原有的元素，true会替换掉原有的元素，false不会替换掉元素。
当设置true时，会对controller中使用的参数$element 和 $attrs 有影响

controller
用来定义自定义指令的作用域。
this 指向的controller{}空对象
arguments默认情况下是一个空数组，需要参数注入。
$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{} 空对象
            
            console.log( $scope, $element, $attrs );
            
        }
        
    }
    
});

scope
隔离自定义的作用域的属性，通过对其社会字一个对象来隔离指令的作用域。
如果值是true或者false，指令的作用域就会忽略自身作用域，而去寻找父级作用域中的变量。
如果值是空对象{} ，作用域会指向该空对象

directive返回对象中的scope和controller
自定义指令中，scope属性对controller的影响：
如果scope的值是true，在controller中，定义与父作用域中相同变量时，自定义指令中的变量不会受到副作用于中的变量的影响。
如果scope是一个false，在controller中，定义与父作用域相同变量时，该变量与父作用域中的变量同步(同时修改，数据双向绑定)
如果scope是一个对象，在controller中，定义与父作用域相同的变量时，自定义指令中的变量不会收到父作用域的变量影响。

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作用域中寻找值的过程，而是让其去该自定义指令所在元素的属性中寻找数据变量. 忽略自定义指令的scope。
@修饰符会去自定义指令中所在元素的属性去寻找。
属性值是插值传入，作为普通属性处理。

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属性中定义含有=修饰符的变量时，可以取得父作用域中的变量，通过属性映射.

作用：自定义指令作用域中变量与父作用域的双向绑定过程.
注意：自定义元素中的属性值是一个父作用域中的一个变量，在自定义指令中当作一个变量来处理。

template,中的数据和 父级的作用域$scope,数据绑定

tempalte: "
{{title}}
",

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

link

操作自定义指令的DOM

link的函数
this指向window
arguments：
1 scope， 指令作用域
2 jqlite 获取自定义元素
3 attrs 自定义指令元素上的属性

// 操作自定义指令元素
// @param {Object} scope  子作用域
// @param {Object} jqlite JQ对象
// @param {Object} attrs 自定义上的属性
link: function ( scope, jqlite, attrs ) {
    
    // this -> window
    var el = jqlite.children("h1").attr("nodeValue", 1);
    
    // 使用 data 自定义属性  ，会自动省略  data-
    
    for ( var i=0; i
complie
this指向的是指令描述对象. 
参数1： jqlite 获取的自定义元素
参数2： attrs 自定义指令所在元素的属性
返回一个函数， 指向 link 函数
在返回函数中，可以操作自定义指令所在元素.

    
    
        
嘻嘻哈哈
    
    




transclude    
它告诉自定义指令，要将自定义元素中未知的元素内容插入到已知模板具有ng-transclude指令所在的元素中(添加自定义指令元素中的未知元素)
未知元素：自定义标签中的元素.
告知自定义指令，要将自定义中未知的元素内容插入到已知模板。
条件： 模板标签上具有ng-transclude指令
需要设置 transclude: true. 
现象：模板标签会包裹自定义标签内的内容.
app.directive("myDirective", function () {
    
    return {
        
        restrict: "E",
        
        template: "
",
        
        transclude: true    
        
    }
    
});


require 
自定义指令引用其它指令，作为link()方法的第四个参数.
例如，将ngModel引入到自定义指令中. 在link方法中可以访问到ngModel中的属性值
require: "ngModel"


// 自定义指令
app.directive("myDirective", function () {
    
    // 返回一个描述指令对象
    return {
        
        restrict: "A",
        
        // 引入其它指令
        require: "ngModel",
        
        link: function ( scope, jqlite, attrs, ngModel ) {
            
            // $watch 检测某个值 发生改变，触发某个函数
            // 当 ngModel 值发生改变， 触发函数
            scope.$watch(attrs.ngModel, function () {
                
                console.log(ngModel.$viewValue);
                
            });
            
        }
        
    }
    
});

服务
对一些方法的封装，复用方法更为简便。例如：消息系统，作为消息服务.
使用服务，利用参数注入即可。

大驼峰和小驼峰都可

将业务逻辑封装成服务

将业务逻辑封装成 service  而非 factory

使用 $cacheFactory 进行绘画级别的缓存。 应用于缓存请求或复杂运算的结果。


内置服务
$timeout
对setTimeout()的封装
app.controller("main", function ($scope, $timeout) {

    $timeout(function () {

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

});

$interval    
对setInter();的封装
app.controller("main", function ($scope, $interval) {
    // 定义一个时间
    $scope.date = new Date();

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

});


$http   
异步请求
配置参数:
method： 请求方式 "GET","POSt"
url: 请求的地址
$http 方法执行完后链式调用success(),请求成功的回调函数
POST请求：
通过设置data属性添加POST请求发送数据
params属性添加请求的参数数据
// $http 服务
$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",
    // 该属性会将键值对转化成url上参数
    params: {
        id: 11
    },
    // post请求 添加请求数据
    data: {
        username: "aa"
    }
});



$http.get，$http.post 
$http服务中的get请求和post请求简写方式
params 配置请求参数
// get 请求
$http.get("data/service.json", {
    params: {
        id: 1
    }
})
// 请求成功
.success(function ( res ) {
    
    console.log( res );
    
});


// post 请求
// 参数1：url ，参数2：请求携带的数据
$http.post("data/service.json", {
    id: 1
})
// 请求成功
.success(function ( res ) {
    
    console.log(res);
    
});
 

promise对象
允诺对象，在内部是一个异步操作，当操作完成时，这个对象会实现它的允诺.
特点： 可以无限添加允诺。 一定在某些操作完成时才出发。
规范中允诺对象使用 then方法.
自定服务
需要各种服务以支持各种功能，也可以手动开启或关闭某些服务以达到相应的功能.
factory()
工厂模式定义自定义服务
参数1：服务名称
参数2：服务工厂方法
返回值：服务对象，这个对象提供其它控制器使用
var app = angular.module("app", []);

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

// factory 定义 服务
app.factory("news", function () {
    
    return {
        data: "嘻嘻哈哈"
    }
    
});

service 
面向对象创建服务
参数1：服务名称
参数2：服务的构造函数(构造函数中需要使用this来暴露接口)
// 使用 service 自定义服务
app.service("data", function () {
    
    this.title = "嘻嘻哈哈";
    
});

路由
使用组件配合使用：
angular-route.js
angular-ui-router.js
用来寻找页面，通常通过配置一些路由来映射一些页面
路由：就是URL到函数的映射。
ngRoute
需要在程序入口处引入，添加到依赖集合中
angualr.module("app", ["ngRoute"]);

ng-view
动态渲染的视图，视图如何渲染根据路由决定


渲染视图需要在页面初始化之前知道路由配置.
使用congfig();
congfig();
在应用程序执行之前执行一个配置方法，在页面还未被渲染，可以将路由逻辑放入该方法中。
回调函数：
this -> window
默认参数是空的，需要将服务注入
// 配置
app.config(function ( $routeProvider ) {

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

$routeProvider
路由服务：
路由供给服务，提供一个when方法，供使用配置路由.
controller
在路由对象中，可以通过controller属性，为路由对象添加控制器，创建一个作用域，让模板可以使用作用域中的变量。
template
配置模板字符串
templateUrl
配置外部模板
会发送异步请求
otherwise
重定义路由
配置两个路由以上，otherwise 才会有效果.
配置参数为 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: "/"
    });
    
});

路由参数
路由路径配置参数(参数名前需要加：冒号)
将获取路由参数服务注入控制器中($routeParams注入控制器中).
app.config(function ( $routeProvider ) {
    
    // 配置参数
    $routeProvider.when("/shop/:pageNum/:type", {
        
        template: "
{{ shop }}
",
        
        // 参数注入
        controller: function ( $scope, $routeParams ) {
            
            $scope.shop = "shopPage";
            
            console.log( $routeParams );
            
        }
        
    });

});

路由时间
路由时间通常定义需要监听该事件的控制器中，在全局作用域下监听，通过对作用域$on()方法监听路由事件。
例如：$routeChangeSuccess
监听路由改变成功
参数1： 表示事件对象
参数2：表示当前路由对象
参数3：表示前一个路由(如果当前没有前一个路由对象，因此参数会是undefined)
app.run(function ( $rootScope ) {
    
    $rootScope.$on("$routeChangeSuccess", function ( ev, routeObj, preRouteObj ) {
        
        
    });
    
});

$location
管理地址栏状态信息，包括query，path 
path(): 改变路由中的path.
读：$location.path();
设：$loction.path(arg);
app.run(function ( $rootScope, $location ) {
    
    $rootScope.$on("$routeChangeSuccess", function ( ev, routeObj, preRouteObj ) {
        
        // var q = $location.path(); // 读
        
        $location.path("/xixi"); // 设置  
        
    });
    
});

ui-router
ngRoute: 每个页面对应一个地址(path), 需要渲染那个页面，就需要配置路由.
uiRouter: 引入state(状态)概念，如果哪个页面如果显示，渲染出对应的页面，渲染之后会有一种状态，可以将该状态记录，配置路由 
ui-view
在ui-router 中使用的指令ui


$stateProvider    
参数注入到config()来定义状态
app.config(function ( $stateProvider ) {});

state();    
定义状态
参数1：状态名称
参数2：配置参数
url: 状态页面的地址
tempate： 状态对应页面的模板
controller 定义状态对应页面的作用域
// 参数注入 ui.router
var app = angular.module("app", ["ui.router"]);

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

// $stateProvider 定义状态
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路由参数规则
路由规则：

固定值：/key

可捕获的参数： /: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(); 将参数1的路由路径重定向到参数2路由路径
otherwise(); 匹配不存在的路由，跳转到定义过的路由.
// 配置 不存在路由    
$urlRouterProvider.when("", "/").otherwise("/error");

views 多视图
ui-router 可以渲染页面中的多个视图，通过为页面中ui-view指令添加名称，多个视图渲染需要在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() 定义状态名称的时候添加命名空间。
路由需要有顺序，定义在父路由的后边。
注意：父视图需要添加动态视图ui-view
多视图不能与嵌套视图同时使用
匹配主页，定义路径不需要添加 "/shop", 直接 "shop";即可.
app.config(function ( $stateProvider, $urlRouterProvider ) {
    
    $stateProvider.state("home", {
        
        url: "/",
        
        template: "
index
"
        
    })
    .state("home.shop", {
        
        url: "shop",
        
        template: "
shopPage
"
        
    });
    
    $urlRouterProvider.when("","/");
    
});

路由事件
添加在全局作用域$rootScope 下检测路径变化
事件名以state开头
参数1： 事件对象
参数2： 当前路由对象
参数3： 当前路由参数对象
参数4： 前一个路由对象
参数5： 前一个路由参数对象
app.run(function ( $rootScope ) {
    
    $rootScope.$on("$stateChangeSuccess", function ( ev, routeObj, routeParamsObj, preRouteObj, preRouteParamsObj ) {
        
        console.log( this,arguments );
        
    })
    
});