学习AngularJS笔记

AngularJS四大核心特性：

1.MVC

2.模块化和依赖注入

3.双向数据绑定

4.指令

（一）模块：

    
var 模块名 = angular.module('模块名'，['controllers','directives','services','routes','filters'])

（二）路由：实现view的跳转

1.哈希#（页内导航，锚点）
2.HTML5新的history API
3.路由的核心是给应用定义“状态”
***使用路由机制会影响到应用的整体编码方式（需要预先定义好状态）
***考虑兼容性问题与“优雅降级”

Angular自带路由：缺点：无法进行深层次的嵌套
    模块名.config(function($routeProvider){
    $routeProvider.when("/url",{
    templateUrl:'',
    controller:''}).when("/url",{
    templateUrl:'',
    controller:''
    }).otherwise({
    redirecTo:"/url"
    })
}
(angular-ui.github.io)
UI-Router（UIRoute.js）路由：
<div ui-view></div>页面视图
模块名.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/url');
    $stateProvider.state('name',{
    url:'/url',
    views:{
        {
        templateUrl:'/资源'
        },
        'xxx@name':{
        templateUrl:'/资源'
        }，
        ......    
    }        
}).state('name.user',{...})
    
}

（三）依赖注入：模块的注入   <script src=""></script>

（四）指令（难点）：

AngularJS内置63个指令


模块名.directive("指令名"，function（）{
    return{
    restrict(匹配模式):‘A/E/M/C’
    A: 属性，<指令名></指令名>               （推荐使用）
    E：元素，<div 指令名><div>               （推荐使用）
    M：注释， <--空格+directive:指令名+空格-->
    C：class,css样式<div class="指令名">

    template(模板)：
    templateUrl:'独立文件编写'
    $templateCache.get('缓存文件')

    scope:{}（独立的scope，指令间独立，不相互影响）
    controller:function(){内部controller定义指令的属性，方法}
    replace:ture替换嵌套内容
    transclude:true嵌套内容放入template
    compile:function(){模块自身转换（只运行一次）}
    link:function(scope,element,attr,父类Ctrl){
    操作DOM，绑定事件监听器，实现模型和视图的动态关联（每个实例，都会执行一次）
    element.bind(绑定事件)
    scope.$apply(attr.指令的属性名) <-- 调用指令的属性方法-->}
    }
})

***Scope的绑定策略：
1.@ 字符串传递
2.= 与父scope进行双向绑定
3.& 传递父scope函数，调用

自定义指令：angular-ui  UI-Bootstrap 封装好的指令库
console.log("内容");
 

(五)Service（次重点）:内置24个

$http服务：
$http({
    method:'get'，
    url:'/url'
    })
    .success(function(data,status,headers,config){})
    .error(function(){});
}

写自己的服务：
服务名.factory（'服务名',['$http',function($http){}]）
***controller使用自定义的服务时要注入，放在注入参数的最后一个。

***Service是单例的

***Service是由$injector负责实例化的

***Service在整个应用的生命周期中，可以用来共享数据

***自定义的Service应该避免用$开头


Provider:Service:Factory:
本质都是Provider，是策略模式+抽象工厂模式的混合


$filter服务：进行数据格式化的专用服务，9个
currency,date,json,limitTo,lowercase,number,orderBy,uppercase,filter
使用： | 符号
模块名.filter('过滤器名',function(xx){return yyyy})