angular入门2

最新推荐文章于 2019-02-27 15:28:42 发布

LinDaiuuj

最新推荐文章于 2019-02-27 15:28:42 发布

阅读量335

点赞数

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型数据格式化为特定日期时间格式的字符串

	<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>

PS案例：点击一个按钮“加载员工数据”，向服务器发起异步的Ajax请求，获取服务端的一段JSON数据，显示在一个表格中（注意数据格式）；加载完数据后，按钮即禁用/消失。
案例答案：

          
          
           
           <!DOCTYPE html>
          
          
          
          
           
           <html ng-app="haixin">
          
          
          
          
           
           <head lang="en">
          
          
          
          
           
               <meta charset="UTF-8">
          
          
          
          
           
               <title>Title</title>
          
          
          
          
           
               <link rel="stylesheet" href="../css/bootstrap.css">
          
          
          
          
           
           </head>
          
          
          
          
           
           <body>
          
          
          
          
           
           <section class="container" ng-controller="a1">
          
          
          
          
           
               <table class="table table-bordered table-hover">
          
          
          
          
           
                   <tr>
          
          
          
          
           
                       <th>序号</th>
          
          
          
          
           
                       <th>姓名</th>
          
          
          
          
           
                       <th>工资</th>
          
          
          
          
           
                       <th>入职日期</th>
          
          
          
          
           
                   </tr>
          
          
          
          
           
                   <tr ng-repeat="j in pro">
          
          
          
          
           
                       <td>{{$index+1}}</td>
          
          
          
          
           
                       <td>{{j.ename}}</td>
          
          
          
          
           
                       <td>{{j.salary |number}}</td>
          
          
          
          
           
                       <td>{{j.hiredate |date:"yyyy年MM月dd日"}}</td>
          
          
          
          
           
                   </tr>
          
          
          
          
           
               </table>
          
          
          
          
           
               <button ng-click="add()" class="btn btn-block btn-success" ng-disabled="tab">点击</button>
          
          
          
          
           
           </section>
          
          
          
          
           
           <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>
          
          
          
          
           
           </body>
          
          
          
          
           
           </html>

来自CODE的代码片
snippet_file_0.txt

JSON文件：

           
           
            
            [
           
           
           
           
            
              {"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}
           
           
           
           
            
            ]

来自CODE的代码片
snippet_file_0.txt

Angular官方提供的模块之二——ngRoute模块

ngRoute模块可以让用户自定义“路由字典”，自动解析请求URL中的路由地址，查找路由字典，自动发起异步AJAX请求，把获取的结果放在当前页面中。

Route：路由，为到达目的地而经过的线路
(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;
}

LinDaiuuj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular入门2

ng四大特性之—依赖注入：依赖： Driver对象的创建和运行必需一个car对象，称为Driver对象“依赖于”Car对象。依赖注入体现着“最少知识法则”依赖对象的解决方法：(1)主动创建 var c=new Car(); //创建被依赖的对象 var d=new Driver(c); //使用被依赖的对象(2)被动注入(inject)一般由特定框架来
复制链接

扫一扫