angularjs前两个特性见:http://www.jianshu.com/p/edbf0a8ac920
一. AngularJS四大特性之三-依赖注入
-
若某个函数调用时需要其他的对象作为形参,就称此函数依赖于形参
function Driver(car) {
car.strat();
car.run();
car.stop();
} -
如何解决依赖关系
1)主动创建
var c1 = new Car(); var d1 = new Driver(c1);
-
被动注入(Injection)方式
module.controller("控制器",function($scope,$inerval));
angular中的ngController指令在实例化控制器对象时,会根据指令的形参名,创建出控制器所依赖的对象,并注入进来---依赖注入(Dependency Injection)
注意:
1. angular在创建控制器对象时,会根据形参列表中的每个形参依赖的对象的名称来创建,故控制器声明函数不能声明angular无法识别的形参名 angular只提供了一种依赖注入方式-根据形参名来注入依赖的对象
2. 若项目js文件使用了类似yuicompressor等压缩程序,默认会把函数的形参名精简为一个字母的形式,会导致Angular的依赖注入失败-解决办法module.controller("控制器名",[
"$scope", "$interval", "$http", function(a,b,c){ }
]);
3. 可以被注入的对象 - 所有的service对象都可以被注入
1)$rootScope 在多个控制器间共享数据的服务
2)$interval 提供周期性定时器服务
3)$timeout 提供一次性定时器服务
4)$log 体用五个基本的日志输出服务
5)$http 提供异步HTPP请求(AJAX)的服务$http({method:"GET",url:""}).then(fun).catch(fun) $http.get("url").then(fn); $http.post("url",data).then(fn);
6)$location
-
二. ng模块中提供的过滤器
filter:把model中的数据在显示时以某种特定的格式来呈现
-
lowercase
语法:{{表达式 | lowercase}
-
uppercase
语法:{{表达式 | uppercase}
-
number
语法:{{表达式 | number}} {{表达式 | number:小数位数}}
-
currency
{{表达式 | currency}} {{表达式 | currency:'货币符号'}}
-
date
{{表达式 | date }} {{表达式 | date | "yyyy-MM-dd"}}
三. 总结ng模块中我们已经用到的内容
-
directive - 用在DOM元素上
ngApp/ngbind/nginit/ngcontroller/ngmodel/
-
service - 用在控制器的声明里
$scope/$rootScope/$timerout/$interval/$http/$location
filter - 把model中的数据在显示时以某种特定的格式来呈现
四. 单页应用
单页面应用与多页面应用的区别
五. angularjs提供的模块---ngroute
- 概念
route: 路由 通过某条线路找到目标内容
ngroute 模块的目标: 就是根据浏览器中url中的一个特殊的地址标记,查找到该标记所对应的模板页面,并异步加载到ngview
- 使用步骤
1) 创建唯一完整的HTML页面,其中声明一个容器,ngview指令。引入angular.js angular-routejs
<div ng-view></div>
2)创建多个模板页面(习惯上放在一个特别的目录下,如tpl)
3) 创建Module,声明依赖于ng/ng-route两个模板
var app = angular.module("module",["ng","ngRoute"]);
4)在Module中配置路由字典
app.config(function($routeProvider){
$routeProvider.when("/start",{
templateUrl:xxx,
controller:"" //此处声明的控制器可供当前目标页面所有元素使用
})
})
5)使用浏览器做测试
http:IP地址/index.html#/路由地址
-
ngroute中的页面跳转
通过超链接访问 href="#/main"
通过js跳转 $location.path("/2")
补充:
AngularJS的最大的不足/应用时需要特别关注的地方
原生ES/JS/DOM只有特定HTML元素的特定事件的监听机制,没有监听数据的机制
$interval和window.setInterval()的区别
$interval修改任何的模型Model数据,底层会立即遍历一遍$digest队列
即使修改了Model数据,也不会遍历$diges