我生待明日,万事成蹉跎

AngularJS简单入门(3)—过滤器与Directive、AngularJS规范

开发AngularJS应用的大部分工作内容,就是构建作用域及其相关的功能。
规范:
1、控制器应该尽可能保持短小精悍,而在控制器中进行DOM操作和数据操作则是一个不好的实践。
2、AngularJS不会对不包含AngularJS特殊声明的元素进行任何处理。
3、设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务,我们可以将控制器重构成一个轻量且更易维护的形式
4、$rootScope 是AngularJS中最接近全局作用域的对象。在 $rootScope 上附加太多业务逻并不是好主意,这与污染JavaScript的全局作用域是一样的。
5、$scope 对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。$scope 对象在AngularJS中充当数据模型,但与传统的数据模型不一样, $scope 并不负责处理和操作数据,它只是视图和HTML之间的桥梁
6、将控制器命名为 [Name]Controller 而不是 [Name]Ctrl 是一个最佳实践。
以下是代码练习与知识点:(详细知识点在代码注释中)
1、过滤器
filter 过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。
2、使用Directive自定义HTML组件
3、Directive与Controller之间进行会话(通过require)
<body ng-app="appSQL">
          <div ng-controller="myStrl">
               <h2>过滤器:</h2><br>
              大写转换:<input type="text" ng-model="str1">{{str1 | uppercase}}<br>
              js中使用$filter调用过滤器,进行小写转换:{{str1}}
              需要传递参数给过滤器,则在冒号后加参数:<input type="text" ng-model="str2">截取两位:{{str2 | number:2}}<br>
              日期格式化:{{thedate|date:'yyyy-MM-dd-HH-mm-ss'}}<br>
              {{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}<br>
              json 过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助:
              {{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}<br>
              Directive自定义html标签 :<sayello></sayello><input type="text" class="hehe"><h1 hehe></h1><br>
          </div>

         <div ng-controller="theController">
            <div enter style="background-color: #00AA88">触发方法 调用方式1</div>
             <div enter="delDataFunc()" style="background-color: #0f0f0f;">触发方法 调用方式2(在元素本身调用)</div>
         </div>

         <div>
             <h1>多个directive间调用</h1>
             <dire2 style="background-color: #00CCFF" apple fish orange>大堆水果</dire2>
             <dire2 style="background-color: #00CCFF" apple orange>大堆水果</dire2>
         </div>

</body>
<script>
     var app= angular.module('appSQL',[]);

     //过滤器、directive自定义HTML组件
            app.controller('myStrl',['$scope','$filter',function($scope,$filter){
                    $scope.str1=$filter('lowercase')('');
                    $scope.thedate=new Date();
              }]
              );
     app.controller('theController',function($scope){
             $scope.loadDataFunc=function(){
                alert("数据加载中...");
             };
             $scope.delDataFunc=function(){
                alert("删除数据中...");
             }
     });
     app.directive('enter',function(){
            return{
                //restrict默认为A
                link:function(scope,element,attrs){
                   element.bind('mouseenter',function(){//为属性添加鼠标移入事件
                       /*scope.loadDataFunc();//调用方式1
                       scope.$apply(attrs.enter);//调用方式2*/
                   });
                }
            }
     });
            app.directive('sayello',function(){
                return{
                    restrict:'E',//(element)
                    replace:true,//替换自定义的directive标签(也就是只显示标签里面的内容,在html中不显示自定义标签)
                    template:'<div>自定义的html标签名不能有大写字母</div>'
                }
            });
            app.directive('hehe',function(){
                return{
                    restrict:'A',//Attribute
                    link:function(){
                         alert("我是自定义属性");
                    }
                }
            });
     app.directive('hehe',function(){
         return{
             restrict:'C',//Attribute
             link:function(){
                 alert("我是自定义类名");
             }
         }
     });
     //Directive与Controller之间会话  多个directive之间通过require调用
     app.directive('dire2',function(){
          return{
              restrict:'E',
              scope:{},//保证每次创建标签时,scope都清理干净
              controller:function($scope){
                $scope.foods=[];
                this.addapple=function(){
                   $scope.foods.push('theapple');
                };
                this.addfish=function(){
                   $scope.foods.push('thefish');
                };
                this.addorange=function(){
                    $scope.foods.push('theorange');
                }
              },
              link:function(scope,element,attrs){
                  element.bind('mouseenter',function(){
                      console.log(scope.foods);
                  });
              }
          }
     });
    app.directive('apple',function(){
         return {
             require:'dire2',
             link:function(scope,element,attrs,foodCtrl){//foodCtrl指向的是上一个directive
                 foodCtrl.addapple();
             }
         }
    });
     app.directive('fish',function(){
         return {
             require:'dire2',
             link:function(scope,element,attrs,foodCtrl){//foodCtrl指向的是上一个directive
                 foodCtrl.addfish();
             }
         }
     });
     app.directive('orange',function(){
         return {
             require:'dire2',
             link:function(scope,element,attrs,foodCtrl){//foodCtrl指向的是上一个directive
                 foodCtrl.addorange();
             }
         }
     });
</script>

未经允许不得转载:徐宏涛博客 » AngularJS简单入门(3)—过滤器与Directive、AngularJS规范

分享到:更多 ()

评论 抢沙发

评论前必须登录!