AngularJS-1.5

AngularJS的优点？

实现了数据、表现、逻辑分离
扩展了HTML的功能

什么是MVC？

M：Model 模型——数据层
V：View 视图——表现层
C：Controller 控制器——业务逻辑层
实现各层之间的完全分离，MVC只是手段，目的是实现代码的复用。

什么是双向数据绑定？

简单来说数据既可以流入，也可以流出。如ng-model="要绑定的变量"，可以实现数据的双向绑定。

什么是依赖注入？

例如：正常使用的函数参数是由使用者决定的，依赖注入的意思是函数的参数是由定义者决定的。某个对象内部需要另一个对象，由系统根据需要自动注入进去。

使用controller控制器的注意事项

不要操作DOM（用directive指令操作DOM）
不要做输入输出格式化，这种问题交给表单处理
不要用控制器作用域共享数据，要使用factory、service、provider等服务

ng-bind="要绑定的变量"与模版（{{绑定的数据}}）区别？

ng-bind可以将数据写入到元素内，并且是覆盖写入；模版的写入更加灵活；共同点：与js不能实现互通。

学习AngularJS的重要事项（非常重要）

angular和JavaScript不互通（函数不互通、变量也不互通、事件也不互通）
Angular的开发模式和传统开发模式完全不同，Angular是以数据为核心，所有的UI交互都通过数据的变化来实现，Angular接管了UI，例如value的赋值操作在Angular中会失效。

ng-app=""的作用是什么？

确定Angular的作用范围。Angular的模块。

通过事件对象获取元素，并转为jq对象

ng-click="fn(scope.fn=function(event){angular.element(event.target).text("string")}

ng-controller=""的作用是什么？

确定Angular模块的控制层，这个控制层可以分为多个。做为Angular和JS交互的桥梁。注意：控制器嵌套关系可以形成作用于链，在子类控制器找不到的变量可以从父控制器拷贝一份出来。这时当父变量改变时，自变量不会改变。不推荐这种用法。

ng-init="a=1;b=2"的作用是什么？

初始化数据。放在父级元素。

ng-include="'xxxxxxxxx'"

可以引入html页面
或者用ng-include scr="'xxxxxxxxx'"
注意：引入的是一个string

ng-repeat的内置变量

{{first}}//是否为第一个元素
{{last}}//是否为最后一个元素

$scope的作用是什么？

绑定属性和方法。

$apply()脏检查的作用？

用于监控当前控制器scope.$apply()；//检查所有绑定的属性是否发生改变

angular.forEache($scope.属性,function(item,index){});

在Angular的HTML的三元运算符？

模版中可以使用三元运算符。

ng-class的两种使用方式？

class="{{数据}}"或者ng-class=“数组”。
class="{{a:表达式}}"//表达式为true，返回类样式
ng-class-even="'偶数'"
ng-class-odd="'奇数'"

ng-switch的用法

        <ul ng-switch on="status">
            <li ng-switch-when="true">true</li>
            <li ng-switch-when="false">false</li>
        </ul>

ng-style的两种使用方式？

style="{{数据（字符串）}}"或者ng-style="JSON数据"。

ng-repeat与ng-事件放在一起使用产生的影响？

会对ng-事件="变量赋值"，这个变量赋值会失效。

controller中函数的依赖注入各个参数如何使用？

1.http:为Angular的内部ajax；interval:Angular的内部的定时器；interval.cancel(变量名)。

4.timeout(function(){},时间)；清理定时器$timeout.cancel(变量名)。

watch()和$apply()方法如何使用？

watch("数据变量",function(newValue,oldValue){},true),true为深度监视；apply()在使用Angular以外的代码更新数据时，需要用$apply()手动脏检查。

自带过滤器的使用

|number:数字//保留几位小数，四舍五入
|currency:字符串//例如在数字前面加￥scope.自定义方法名=function(obj){//会遍历要过滤的每一个值,根据return的bool结果确定哪个值会被过滤}
|orderby:字符串//排序,在字符串前加-号为倒序排列

如何在控制器内部使用过滤器

将filter("过滤器名",参数)(要过滤的值);

如何自定义过滤器？

app.filter("name",function(){
这一层的函数只会执行一次
return function(input,agrs){
业务逻辑;(会根据过滤器使用次数而加载)
return 数据；
}
})

内置指令

如何自定义指令(组件)？

app.directive("name",function(){ //name中不能含有_ -等特殊字符
return {
restrict :"ECMA", // E:元素 C:class M:注释 A:属性 <--! directive:name -->必须带空格
template:'html',
replace:true, // 是否去掉外壳
transclude:true //包裹
}
})
<span ng-transclude></span>或者<ng-transclude></ng-tansclude> 把html原有的内容包裹进来

自定义模块如何使用？

可以通过["模块的名字1","模块的名字2","模块的名字3"]，模块的依赖注入实现filter,directive,controller的继承，也可实现他们的剥离。注意：一个html页面只能引入一个模块。

控制器的自定义依赖注入项如何使用？

1.factory
app.factory("name",function(){
return 数据;//可以返回任意类型的数据
})
2.provider
app.provider("name",function(){
this.$get=function(){
return 数据;
}
})
3.service
app.service("name",function(){
this.变量=数据;//只能返回引用类型
})
4.constant //注意：这个不能修饰
app.constant("name",数据);
5.value
app.value("name",数据)
只有绑定对象才能实现数据共享

如何实现依赖项的修饰？

app.decorator("自定义依赖项的名字",function(delegate进行逻辑操作 delegate;
})

controller之间的数据传递(父子关系)如何实现？

通过html嵌套实现controller的父子级关系。子控制器可以直接得到父控制器的数据。子控制器得到的是父控制器数据的拷贝版本。
通过emit("name",数据) //向父级发射数据
通过broadcast("name",数据) //向子级传播数据
通过on("name",function(event,data){
//data为数据 event为事件
})

controller之间的数据传递(非父子关系)如何实现？

通过自定义依赖实现数据的共享。

如何使用路由？

    <script src="引入route.js文件"/>
    <script src="引入路由使用的controller文件"/>
    <a href="#/文件路径"></a>
    <ng-view></ng-view>
    angular.module("name",["ngRoute"]);
    app.config(function($routeProvider){
            $routeProvider.when().when("/name",{templateUrl:"路径",controller:"name"}).when();
    })

如何延时加载？

    在when()的json里，resolve:{
            delay:function($q){
                    setTimeout(function(){delay.resolve()},3000)
            }
            return delay.promise
    }

$routeParams功能？

放在controller的依赖中，通过$routeParams.tyep获取route的name。

routeChangeSuccess结束、$routeChangeError失败，功能？

on("name",function(){业务逻辑})