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(){业务逻辑})