(PS:angular项目中所要用到的所有js文件下载地址:http://download.csdn.net/download/zhaohaixin0418/9672039)
ng四大特性之—依赖注入:
依赖: Driver对象的创建和运行必需一个car对象,称为Driver对象“依赖于”Car对象。依赖注入体现着“最少知识法则”
依赖对象的解决方法:
(1)主动创建
var c=new Car(); //创建被依赖的对象 var d=new Driver(c); //使用被依赖的对象(2)被动注入(inject)
一般由特定框架来创建Driver对象,发现其依赖于一个Car对象,框架自动创建被依赖的Car对象——称为“依赖注入”。
依赖注入的典型例子:
angular.module.controller('控制器名', function( $scope, $http ){ })注意:
控制器对象的构造函数是由AngularJS来调用的,不能手动调用
Angular会根据控制器对象的构造函数的形参名来创建依赖的参数对象——形参名不能随意指定!
若控制器对象未声明形参,则Angular不会传递任何实参进来
控制器对象的形参名(PS:此处的形参名是不能够随意定的)必需是Angular可识别的,但数量和顺序都没有限制—Angular会根据每一个形参的名称来查找创建被依赖的对象,并自动注入进来。
ng四大特性之—模块化设计:
模块化设计体现着“高内聚低耦合”设计原则。
项目中,可以根据功能的不同,将不同的组件放置在不同的模块中AngularJS中有两种模块:
(1)AngularJS官方提供的模块:ng、ngRoute、ngAnimate、ngTouch、....
(2)用户自定义的模块:userModule、productModule、orderModule、....
一个NG模块中可以包含多个组件:
(1)controller组件:用于维护模型数据
(2)directive组件:用于在View中输出/绑定Model数据
(3)service组件:用于在不同的控制器中提供某种函数服务
(4)filter组 件:用于对View中输出的数据进行格式化
……..
Filter组件 (过滤器):
用于Model数据在View中呈现时进行某种格式的筛选/过滤/格式化。
在View中使用过滤器时,需要借助于管道:|
ng模块中提供的过滤器:(ps:HH指的是24小时制)
(1)lowercase:把数据格式化为小写
(2)uppercase:把数据格式化为大写
(3)number:把数字型数据格式化为三位一个逗号的字符串同时指定小数点位数 eg: {{price | number : 2 }}
(4)currency:把数字型数据格式化为货币格式的字符串,同时指定货币符号 eg: {{price | currency : '¥' }}
(5)date:把数字/Date型数据格式化为特定日期时间格式的字符串
PS案例:点击一个按钮“加载员工数据”,向服务器发起异步的Ajax请求,获取服务端的一段JSON数据,显示在一个表格中(注意数据格式);加载完数据后,按钮即禁用/消失。<p>{{name | lowercase}}</p> <p>{{name | uppercase}}</p> <p>{{num | number:2}}</p> <p>{{num | currency:"¥"}}</p> <p>{{time | date:"yyyy年MM月dd日 HH时mm分ss秒"}}</p> <p>{{time | date:"yyyy-MM-dd HH:mm:ss"}}</p>
案例答案:
Title
rel="stylesheet" href="../css/bootstrap.css">
序号 姓名 工资 入职日期 {{$index+1}} {{j.ename}} {{j.salary |number}} {{j.hiredate |date:"yyyy年MM月dd日"}}
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/angular.js"></script>
<script>
angular.module("haixin",[]).controller("a1",function ($scope,$http) {
$scope.tab = false;
$scope.add=function () {
$scope.tab = true;
$http.get("1.json").success(function (data) {
$scope.pro=data;
});
}
})
</script>
JSON文件:
Angular官方提供的模块之二——ngRoute模块[
{"ename":"Tom", "salary":456765,"hiredate":22224352345},
{"ename":"Mary", "salary":232323,"hiredate":234798237823},
{"ename":"John", "salary":8875645,"hiredate":23423478923},
{"ename":"King", "salary":34325546,"hiredate":772374234333},
{"ename":"Allen", "salary":86756453234,"hiredate":237643274234}
]
ngRoute模块可以让用户自定义“路由字典”,自动解析请求URL中的路由地址,查找路由字典,自动发起异步AJAX请求,把获取的结果放在当前页面中。
(1)页面URL形如: http://127.0.0.1/index.html#/路由地址
(2)浏览器首先请求基础页面(index.html),再解析URL中的路由地址
(3)查找路由字典,形如:
#/start =》 tpl/start.html
#/main =》 tpl/main.html
....
获取当前URL中路由地址所对应的真实模板页面的地址
(4)客户端发起异步AJAX请求,获取目标模板页面,将服务器返回HTML片段(只含有几个div),插入到当前的DOM树上。
使用ngRoute模块的步骤:
(1)创建唯一完整的页面: index.html,引入angular.js和angular-route.js
(2)在index.html的body中使用ngView指令声明一个容器元素,用于盛放模板页面
(3)创建自定义模块,声明依赖于ng和ngRoute两个模块
(4)在当前模块中使用ngRoute提供的对象配置路由字典
angular.module("haixin",[]).config(function($routeProvider){ $routeProvider.when("/路由地址", { templateUrl:"模板页面URL" }).otherwise({ redirectTo:"/路由地址" }) })(5)再创建几个模板页面,只需要有div元素即可
(6)测试路由字典的配置是否正确
使用ngRoute模块需要注意的问题:
(1)由于模板页面被客户端请求后挂载在index.htmlDOM树上,所以其中所有的图片等外部资源文件的路径必须相对于index.html,而不是模板页面。
(2)使用ngRoute模块时,无需为模板页面中的某个元素单独设置ngController,只需要在声明路由字典时设置整个模板页面所需要的控制器即可
.when('/路由地址', { templateUrl: 'xxx.html', controller: '控制器名' })
(3)在不同的模板页面间跳转可以采用两种方式:·超链接方式:<a href="#/路由地址"></a>JS编程方式:<button ng-click="jump( )"></button>
$scope.jump = function(){ $location.path('/路由地址'); }(4) index.html中,由于所有模板页面都是在ngView中切换,ngView外面的内容会始终呈现。
官方提供的模块——ngAnimate
ngAnimate可以支持JS、Transition、Keyframes动画,但它本身未提供任何的动画效果,而是为上面三种技术提供了相应的“动画钩子(Hooks)”
ng模块中提供的指令:ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 和 ngClass默认都提供了动画钩子。
使用ngAnimate模块调用其CSS Transition动画钩子的步骤:
(1) index.html引入angular.js和angular-animate.js。
(2) 自定义模块中声明依赖于ngAnimate模块——特定的指令就会产生动画钩子。
(3) 为ngView声明class,样式中指定transition动画;
可以看到ngAnimate为即将要离开的ngView添加了 ng-leave和ng-leave-active 两个class,为即将要进入的ngView添加了 ng-enter和
ng-enter-active两个class。为这四个class编写特定的样式即可。
(PS:这里只是普通的进出动画,其实可以更炫点,每个页面都有 进出的动画,这个就是后期要研究的,可以充分利用C3一些特效)
.page { transition: all 2s linear; position: absolute; width: 100%; } /*要离开的ngView元素动画开始时的样式*/ .page.ng-leave { left: 0; } /*要离开的ngView元素动画结束时的样式*/ .page.ng-leave.ng-leave-active { left: -100%; } /*要进入的ngView元素动画开始时的样式*/ .page.ng-enter { left: 100%; top: 100%; transform: scale(0.9); } /*要进入的ngView元素动画结束时的样式*/ .page.ng-enter.ng-enter-active { left: 0; top: 0; }