Angular重要知识点总结

1、表达式{{ }}中不能使用流程控制语句if，else

2、angular依赖注入有两种方式：

①推断式注入

.controller("myCtrl",function($scope){
	//.....
})

②内联式注入

.controller("myCtrl",["$scope",function($scope){
	//.....
}])

区别：推断式注入不支持代码的压缩混淆，否则会报错。推荐使用第二种内联式注入。

3、作用域$scope和$rootScope

$rootScope是根作用域，从ng-app所在的标签处开始存在

作用域默认是原型式继承父作用域（除了隔离作用域），最终继承自$rootScope

4、自定义过滤器

.filter("myFilter",["$scope",function($scope){
	return function(val){
		//....
		return ...
	}
}])

5、自定义指令

.directive("myDirective",function(){
	return {
		//指令配置项
		template:"",
		templateUrl:"",
		replace:true,
		restrict:"ECMA",
		controller:function($scope){
			//...
		},
		transclude:true,
		scope:{},
		link:function(scope,ele,attrs,ctrl){
			//...
		},
		require:"?^directiveName",
	}
})

指令配置项：

①template是模板内容，有两种方式：

（1）直接定义模板

（2）定义一个方法，返回模板，但是要注意方法中一定要返回模板

template:function(tEle,tAttrs){
	tEle[0].setAttribute("name","value");
	//....
	return "<h1>指令</h1>";
}

其中，tEle指的是指令<my-directive> </my-directive> ,tAttrs是其属性

②templateUrl是模板路径，也有两种方式：

（1）直接定义模板路径

（2）定义一个方法，返回模板路径，但是要注意方法中一定要返回模板路径

③replace表示模板是否替换指令元素

④restrict表示指令可以用作标签、class、注释、属性使用

⑤controller即指令要使用的控制器，可以是已经注册好的控制器（字符串）或者定义一个方法

⑥transclude表示指令内部的东西是否保留

⑦scope指令的作用域，有三种值：

（1）false，默认值，表示继承父作用域，但是可以修改父作用域的值，不推荐。

（2）true，只是纯粹的继承父作用域属性，形成自己的私有作用域，不会改变父作用域的属性。

（3）对象{ }，表示创建一个隔离作用域，但我们可以使用前缀符进行绑定父作用域的某些属性，有三种：

<1> @，单向绑定，绑定父作用域的属性

<2> =，双向绑定，变量绑定

<3> &，方法传递，将父作用域的方法传递给当前指令，指令调用方法时还可以传入参数，但必须是对象，对象以键值对的形式，键要和父作用域的属性绑定的方法的形参一致。

scope:{
	childName:"@parentName"
	childName:"=parentName"
	childFun:"&parentFun"
}

⑧link，生命周期的连接阶段，进行数据与dom的绑定，参数有四个：scope是当前指令所在的作用域、ele是当前指令、attrs是当前指令的属性、ctrl是link函数要使用的其他指令的控制器，只有在require为true时才生效。

⑨require用作指令间的通信，引入其他指令

前缀 ? 表示在当前指令中没有找到所需要的控制器时，将null传给link函数的第四个参数

前缀 ^ 表示在指令的上层中查找指定的控制器

6、$http服务

$http服务是对浏览器原生的XMLHttpRequest对象进行了封装

在调用$http方法后，返回一个promise对象

$http({
	url:"",
	method:""
}).then(function(res){
	//...
	console.log(res.data);
})

注意：$http.jsonp()发送JSONP请求，url地址中必须包含JSON_CALLBACK

eg：$http.jsonp("./data.json?callback=JSON_CALLBACK")

7、脏检查

脏查询触发：controller初始化、ng开头的指令、事件被执行后等

手动触发脏查询：

$scope.$apply(function(){
	//...要发生变化的内容
})

监听：

$scope.$watch("name",function(newVal,oldVal){
	//...监听属性变化
})

8、常用的依赖注入

controller、service、factory、constant、config、value、provider等

只有controller可以注入$scope，其他都不可，但它们可以注入$rootScope

service是单例的，更适合做数据的持久化，与后台进行通信

constant和provider可以注入到config中，provider可以被注入到任何地方