Angularjs 整理篇 - Githubissues

Angular简介: 2.1.是一个js框架，angularjs在 html 加载完成以后开始扩展了html,ng-app定义了应用程序,ng-model 把元素值（比如输入域的值）绑定到应用程序,比如在html 中 ng-model ="firstname" 就可以在html 或者说是 js 中都可以得到这个input 的值 2.2 AngularJS 应用: Module 定义了应用,Controller 控制运用,ng-app 定义了
Angular表达式: {{ }} 4.Angular指令 : ng-app 指令，定义 angularjs 的根元素 ,在页面加载完成以后自动初始化程序 ng-model 指令, 只支持表单元素，绑定 HTML 元素(eg: <input ng-model="name">) 到应用程序数据($scope.name = "John Doe";), ng-bind 指令只支持普通元素 .directive 创建自定义指令，需要在html上创建自定义指令名?

5.作用域($scope),是 HTML (视图) 和 JavaScript (控制器)之间的纽带,在创建controller，$scope可以作为参数，并且在html中获得变量值，外部控制器 ,就是在 js 中使用$scope.brand_name这样的方式可以让对应的 html拿到 brand_name 这个参数

controller 应用程序控制器
过滤器( | ):filter 8.service 服务 ,$http函数

参考网页，Directive（指令）,Controller（控制器）,Service (服务),Service就是【单例对象】，需要保证每次传过来的值都是一样的
首先创建一个新的module 之后的代码都需要用到module
创建一个新的 service ,里面有addbook方法， 3.我们要做的就是把这个service传递给各种 controller、directive、filter，或者其它任何需要它的东西---然后它们就可以访问service中的这些方法和属性了
为module 创建一个controller，并且把刚创建的 service 注入进去 $scope
service 的好处就是可以通过一种集中式的方式管理数据，特别是当我们在不同的域里面共享数据的时候需要使用到service，不需要在别的地方都使用的相同的代码
controller 的介绍 controller纯粹地用来把service、依赖关系、以及其它对象串联到一起，然后通过scope把它们关联到view上。如果在你的视图里面需要处理复杂的业务逻辑，那么把它们放到controller里面也是一个非常不错的选择。 7 directive

15课检查器 isarray()函数，查看是否是数组,isDate(),isUndefined()是否定义数据，isNumber()判断是不是数据,isString()是不是字符串 ,isobject,判断标签元素isElement 16课 angular js 的系统指令 ng-init 初始化数据 ng-trim 在更新表单的value 值然后同时更新了 $scope.title的值，接着执行了ng-trim 使得里面的空格消失了 ,但是submit以后会加上一群空格，所以我们需要提交的是scope 里面的数据 $('form').submit(function(){ $()}),如果type = password 空格不会清楚

17课动态改变元素的显示和隐藏 ng-show/ng-hide/ng-if if /ng-show 的区别在于前者真正的删除了节点，ng-show是在 css 里面添加hide 属性，example copyrght 是一个变量的概念，ng-click="copyrght=!copyrght"表示copyright 在 true/false之间相互转换

18课遍历ng-repeat='v in data' 里面的v.name,v.url 遍历以后,获取filter数据 ng-repeat='(k,v) in data' 针对第一条进行修改 {{$first}} {{$midddle}} {{$even}}偶数行代码如下 ng-model 定义了一个变量，这个变量可以在 ng-app中使用

 <div>
   <div ng-app="hd" ng-contoller="ctrl">
       {{status}}
      <label><input type="checkbox" ng-model="status">接受协议</label>
      <button ng-init="copyrght=false" ng-click="copyrght=!copyrght">查看协议</button>
      </br>
      <textarea ng-show="copyrght">协议内容是这样子的</textarea>
      </br>
      <button ng-disabled="!status">登录系统</button>
    </div>     
 </div>

19课ng-selected ng-options ng-readonly,ng-selected 表示选中的意思 readyonly 和 disabled的区别，readyonly 不能修改但是可以提交 ,disabled 是不可以提交 example:编辑个人资料的时候不允许编辑个人邮箱

  <div ng-app="hd" ng-contoller="ctrl">
       <form>
        <!-- 点击的时候 ng-model 的值变化成 1 引起 scope 的变化1,同时引起 上面 option的变化 -->
        年纪:<input type="text" ng-model="user.age"></br>
        邮箱:<input type="text" ng-model="user.email" ng-readonly="user.age">
        </br>  
      </form>  
    </div>
<script>
     var a =angular.module('hd',[]);
     a.controller('ctrl',['$scope',function($scope){
         $scope.user = {id:1,
                        age:22,
                        email:'799392753@qq.com',
                        name:'sam' }
     }])
    </script>

20课 checkbox 实现全选和反选的功能 ng-checked 使用

<table border="1" width="500">  
       <tr>
           <td>
               <input type="checkbox" ng-model="all"/>
               <span ng-bind="all?'全选':'取消'"></span>
           </td>
           <td>名称</td>
           <td>邮箱</td>
           <td>年纪</td>
           <td>编号 </td>
       </tr>
       <tr ng-repeat="v in users">
           {{user.name}}
           <td>
               <input type="checkbox" ng-checked="all">
           </td>
           <td>{{ v.name }}</td>
           <td>{{ v.email }}</td>
           <td>{{ v.age }}</td>
           <td>{{ v.id }}</td>
       </tr>
  </table><script>

     var a =angular.module('hd',[]);
     a.controller('ctrl',['$scope',function($scope){
         $scope.users = [
            {id:'1',age:'22',email:'799392753@qq.com',name:'sam'},
            {id:'2',age:'23',email:'799392753@qq.com',name:'pawN' },
            {id:'3',age:'24',email:'799392753@qq.com',name:'Deft'},
                        ]
     }])
    </script>

21课 ng-model-options设置数据同步时机提交网站性能,加入焦点机制,减少和后台的交互 ng-model-options="{updateOn:'blur'}"焦点失去的时候才进行交互，或者是debounce:1000表示更新的时间间隔 ,失去焦点立即进行更新或者1s以后进行更新 ng-model-options="{updateon:' default:blur',debounce:{{default:3000,blur:0 }}}"

24课事件处理指令讲解：事件源，事件处理程序，Angularjs事件分为 ng-click ng-show ng-blur ng-focus ng-keydown ng-mouseleave ng-mousemove 25课 AngularJS+flex弹性盒模型+bootStrap 开发微信菜单前端之手机界面预览弹性盒模型最常用的 5 个属性: 1.Display: Flex,默认的是 div 把行填满display:block 现在我们需要把div变成列排列display:flex 2.flex-direction:column/colum-reverse弹性盒模型的容器有两个轴：主轴和交叉轴,把主轴交换一下位置flex-direction:column 是回到原来行排列的方式flex-direction:row 3.justify-content:主轴上的对齐方式:剧中，右边，左边

Align-items：作用是沿着交叉轴移动
Align Self:允许你手动设定一个元素的方式

26课 AngularJS+flex弹性盒模型+bootStrap 开发微信菜单前端之右侧编辑区域,bootsrap使用区域 34，35课 filter变量调节器(过滤器)分析与货币变量调节器处理对数据进行二次处理的时候，pC端和微信端在针对同一个Json数据显示区域有不同的显示形式, 1.把数字变成货币的格式

lowercase与uppercase，大写和小写的 3.limitTo
1. date 过滤时间，处理时间戳变成我们需要的格式 5.{{data|orderby:id}},表示通过id 进行排序 6.{{data|filter:"人":true}} true 表示完全匹配
```
<div ng-app="hd" ng-controller="ctrl">
{{price|limitTo:2}}
{{price|low}}
</div>
<script>
var a =angular.module('hd',[]);
a.controller('ctrl',['$scope',function($scope){
$scope.price = "11";
}]);
</script>
```

39课控制器中如何使用过滤器服务，首先把过滤器($filter)的服务注入到controller 里面，然后需要使用一个过滤器中的方法叫做orderby，

<html>
<head>
    <meta charset="utf-8">
    <script src="/static/v2/plugins/angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="hd" ng-controller="ctrl">
        {{data}}
       <button ng-click="orderby()">控制器控制过滤器</button>
   </div>

</body>

    <script>
    var a =angular.module('hd',[]);
    a.controller('ctrl',['$scope','$filter',function($scope,$filter){
      $scope.data = [
          {'id':0,click:'100',title:"Sam"},
          {'id':1,click:'1200',title:"Tom"},
          {'id':2,click:'1230',title:"honey"},
          ]
        $scope.orderby =function(){
            $scope.data = $filte('orderby')($scope.data,'id',true);
        }
    }]);
    </script>
</html>

第042讲 $scope.$watch监听数据变化或者是监听一个对象的属性

<script>
    var a =angular.module('hd',[]);
    a.controller('ctrl',['$scope','$filter',function($scope,$filter){
      $scope.title = "hphp"
      $scope.news = {title:''}

      $scope.$watch('news',function(n,o){
         $scope.error = n.title.length >3 ?"标题不能超过3位":"";
      },true)
    }]);
    </script>

第042讲自定义过滤器之手机加星过滤器实例,注意这个自定义过滤器是直接加在module后面的a.filter()的形式写成的

 <script>
         var a =angular.module('hd',[]);
         a.filter('mobiiletrunate',function(){
             return function(mobile,len){
                 len =len?len:3;
                 return mobile.substr(0,11-len)+new String('*').repreat(len);

             }

         })
         a.controller('ctrl',['$scope',function($scope){
             $scope.test='this is for test'
             $scope.users = [
                {id:'1',age:'22',email:'799392753@qq.com',name:'sam',mobile:'13770887497'},
                {id:'2',age:'23',email:'799392753@qq.com',name:'pawN',mobile:'18317139837'},
                {id:'3',age:'24',email:'799392753@qq.com',name:'Deft',mobile:'13801608914'},
                            ]
            }])
    </script>

45课 SPA应用与自定义指令(组件) 使用场景应用场景分析，spa=single page application 表示单页面应用的功能，就是在一个页面里面实现大部分的功能，不进行网络的跳转

第046讲自定义指令directive的restrict属性说明 A=attr E =element ,C=class 但是 C 不是很建议使用第047讲自定义指令名称的标准规范应该有给指令 (directive)加前缀的习惯--->驼峰命名规范，比如 ng-click这样的形式

<body>
    <div ng-app="hd" ng-controller="ctrl">
       <div hd-cms></div>
   </div>
</body>
    <script>
         var a =angular.module('hd',[]);
         a.directive('hdCms',[function(){
             return {
                 restrict:'AE',//a=attr,E=element c =class 不是很建议使用C
                 template:'后盾开源的Cms免费系统' 
             }
         }])
    </script>

第048讲自定义指令template函数式操作实例讲解

<body>
    <div ng-app="hd" ng-controller="ctrl">
       <div hd-cms color="red">你好后盾网</div>
   </div>

</body>

    <script>
         var a =angular.module('hd',[]);
         a.directive('hdCms',[function(){
             return {
                 restrict:'AE',//a=attr,E=element c =class 不是很建议使用C
                 template:function(elem,attr){
                     return "<span style='color:green'>this is for test 后盾网</span>"
                 } 
             }
         }])
    </script>

第049讲自定义指令replace属性详解 replace:true;表示把 template 放在标签(div)里面,replace:false;表示 template 直接把标签

替换掉第050讲自定义指令transclude与templateUrl属性详解保留标签里面的值使用 ng-transclude template 使用外部模板,名称必须相同第051讲 controller控制器scope父子集作用域实例讲解一如果子作用域没有对值赋值，就会继承父作用域的值，同时父作用会影响子作用的值，子作用域里面有值不会印象 "继承但不隔离的特性，完全同步的形式":如果希望子域里面的值影响父域的值,需要使用对象的形式才可以

<body>
    <div ng-app="hd" ng-controller="ctrl1">
        {{data.name}}
       <div ng-controller="ctrl2">
           你好后盾网{{data.name}}
       </div>
        <div ng-controller="ctrl3">
           你好后盾网{{data.name}}
       </div>
   </div>

</body>

    <script>
         var a =angular.module('hd',[]);
         a.controller('ctrl1',['$scope',function($scope){
             $scope.data={name:"shichnangcheng"};
         }])
          a.controller('ctrl2',['$scope',function($scope){
             $scope.name="ctrl2的controller";
         }])
           a.controller('ctrl3',['$scope',function($scope){
             $scope.name="ctrl2的controller";
         }])
    </script>

第052 讲 controller控制器scope父子集作用域实例讲解二没有在controller 里面没有定义$scope.name 但是在 html那边定义了一个<ng-model="name">的形式，那系统默认创建一个 $scope.name 的值如果给子集<input type="text" ng-model="name">创建一个<ng-model="name">,初始化的时候因为子集没有创建name 需要使用父集的name ,但是当我们修改子集的时候，<ng-model="name">创建了一个自己自带的name 但是当我们创建对象的属性的时候，angularjs 不会创建新的对象的属性，然后会回去父集的找利用这样的属性我们就可以使用父子集之间对象的相互连接！！

<body>
    <div ng-app="hd" ng-controller="ctrl1">
        {{name}}
       <div ng-controller="ctrl2">
          {{name}}
          <div> 
          <input type="text" ng-model="data.name">
          </div>
       </div>
        <div ng-controller="ctrl3">
           {{name}}
       </div>
   </div>

</body>

    <script>
         var a =angular.module('hd',[]);
         a.controller('ctrl1',['$scope',function($scope){
             $scope.data={name:"shichnangcheng"};
         }])
          a.controller('ctrl2',['$scope',function($scope){
         }])
           a.controller('ctrl3',['$scope',function($scope){
             $scope.name="ctrl2的controller";
         }])
    </script>

第053讲指令scope作用域分析一 1.情况一：controller 里面有一个 ng-model ,同时连接到directive(指令)，发现数据是同步的

     <body>
    <div ng-app="hd" ng-controller="ctrl1">
        {{name}}
      <div> 
      <input type="text" ng-model="name">
      </div>
   </div>

</body>

    <script>
         var a =angular.module('hd',[]);

        a.directive('hdcms',[function(){
             return {
                 restrict:"AEC",
                 template:'{{name}}'
             }
         }]);
         a.controller('ctrl1',['$scope',function($scope){
             $scope.name='this is Sam';
         }])   
    </script>

2.情况二：在 directive(指令)里面的数据也是可以和controller 里面进行同步的，数据是共享的

 <script>
         var a =angular.module('hd',[]);

        a.directive('hdcms',[function(){
             return {
                 restrict:"AEC",
                 template:'{{name}} <input type="text" ng-model="name">'
             }
         }]);
         a.controller('ctrl1',['$scope',function($scope){
             $scope.name='this is Sam';
         }])

    </script>

2.情况三：在 directive(指令)里面的数据不和controller 的数据不进行同步更新，需要在 directive里面设置scope:true的属性，表示自己会另外创建一个新的scope防止数据同步,但是它仍会继承初始化，但是scope:{}表示已经分家了，不会和 controller 任何的关系，初始化也不使用

第054讲 scope隔离作用域之@单向文本绑定，情况1:需要在属性那边传值过来，然后在template里面使用 scope:{color:"@hdColor"},前面的 color表示的是template里面的,后面的color 是html中的标签属性如果在html 中和template中的名称是一样的，就可以直接使用一个@标签就可以了情况2:需要把controller 里面的$scope里面数据传到 directive 里面，理论上是没办法传过去的，但是我们可以通过html的属性值传入到 directive里面

<body>
    <div ng-app="hd" ng-controller="ctrl1">
        {{name}}
      <input type="text" ng-model="color"> 
      <h1 hdcms color="{{color}}"></h1>
   </div>

</body>

    <script>
         var a =angular.module('hd',[]);

        a.directive('hdcms',[function(){
             return {
                 restrict:"AEC",
                 template:'{{color}} <span type="color:{{color}}"></span>',
                 scope:{color:"@"},    
             }
         }]);
         a.controller('ctrl1',['$scope',function($scope){
             $scope.color='green';
         }])
    </script>

第055讲 scope隔离作用域之=双向文本绑定上面的例子通过 <h1 hdcms color="{{color}}"></h1>方式得到 controller 里面的 $scope.color属性值，现在希望通过更加方便的形式得到controller值需要使用scope:{color:"=hdcms"},的形式，也就是双向数据绑定，这样取 template 里面取color 的值就是controller 里面的值

第056讲 scope隔离作用域之=&调用父作用域中函数 directive里面调用controller 里面的函数的时候，需要使用&符号

<body>
    <div ng-app="hd" ng-controller="ctrl1">
      <input type="text" ng-model="color"> 
      <h1 hdcms hd-color="callback()"></h1>
   </div>

</body>

    <script>
         var a =angular.module('hd',[]);

        a.directive('hdcms',[function(){
             return {
                 restrict:"AEC",
                 template:'<h3>{{color()}}</h3>',
                 scope:{color:"&hdcolor"},

             }
         }]);
         a.controller('ctrl1',['$scope',function($scope){
             $scope.callback=function(){
                 return 'this is my way';
             };
         }])

    </script>

第057讲指令directive的controller属性指令(directive)里面的controller 属性，相当于一个小家的controller,控制每一个directive 里面的数据 ,当我们需要多个重复相似的组件的时候就可以使用这样的方式，但是里面的数据可以是不一样的代码如下

<div ng-app="hd">

<hd-cms></hd-cms>
</div>
m.directive('hdCms',[function(){
    return {
        restrict:"E",
        replace:"true",//if true,need to <div>{{name}}</div> not {{name}}
        templateUrl:"view/57.html",
        controller:['$scope',function($scope){
            $scope.data = [
                {id:1,name:"scc"},
                {id:2,name:"scc——1"},
                {id:3,name:"scc--2"},

                ]
        }]
    }
}])

第058讲指令directive的link属性详解 link:function (scope,element,attr){}三个参数分别是scope,表示的是控制器里面的作用域，element 表示的标签元素 ,link 是指令的dom 操作进行处理的？，比如需要有向上滑动，描边的操作放在link操作给我的感觉是把对应的title 需要的样式放在html中然后通过jquery的方式去读取并且在link函数中进行操作得到不同的结果 scope:{'title':'@'},//get the title attribute 这句话的意思是在directive里面拿到对应的一个title 的组件：

<hd-cms title="后盾人" bg-color="red" fontcolor="#fff"></hd-cms>
</div>

<script>
var m = angular.module('hd',[]); 
m.directive('hdCms',[function(){
    return {
        restrict:"E",
        scope:{'title':'@'},//get the title attribute
        link:function(scope,elem,attr){
            $(elem).css({{backgroundColor:attr['bgcolor'],color:attr['fontcolor']}}).html(scope.title);// use jquery
        }
        controller:['$scope',function($scope){
            $scope.data = [
                {id:1,name:"scc"},
                {id:2,name:"scc——1"},
                {id:3,name:"scc--2"},

                ]
        }]
    }

}])
 </script>

第059讲 tab面板组件的指令实现 1.给组件定义样式的时候，需要写成组件的名称,需要写成特定的格式 2.directive 里面controller 使用应用父级的数据，注意在controller 里面获取数据 ,获取数据以后在模板里面的title部分首先实现数据ng-repeat, 3.实现 Tab第一个active 的效果实现 : <div class="list" ng-repeat="v in data" ng-style="{display:$first?'block':'none'}">

数据利用 ng-repeat 遍历数据 <a href="" class="active" ng-repeat="(k,v) in data">{{v.title}}</a>
确保只有一个数据被显示 6.添加dom 操作的动作，放在link 函数中实现，移除active 并且给当前的加上active ,
点击对应的tab 以后实现对应的 jquery数据操作

使用controller 进行传输数据 ,在directive 里面使用数据,scope:{"data":"@"}的方式进行获取,对于数据数据可以放在controller 里面然后放在service 和后台进行对接组件的html code 主要是呈现数据的部分class="hd-tab"

<div class="hd-tab">
    <style type="text/css">
        .hd-tab a{
            padding:6px 10px;border:solid 2px;display:inline-block
        }
        .hd-tab a.active{
            background:#aaa;color:"#fff";
        }
        .hd-tab div.list{
            border:solid 2px;width:300px;height:200px;margin-top:-2px;
        }
    </style>
 <a href="" class="active" ng-repeat="(k,v) in data">{{v.title}}</a>
 <div class="list" ng-repeat="v in data" ng-style="{display:$first?'block':'none'}">
     <ul>
         <li ng-repeat="m in v.data ">{{m.title}}</li>

    </ul>
</div>
</div>

view 部分，负责数据的展现和directive 的显示，主要有争议的是 1.数据显示部分 ,要么是放在directive里面的controller 里面还是直接放在controller 里面两种方式 2.link 负责 dom 的点击操作 ,这里面对jquery 是非常友好的

a.directive('hdTab',[function(){
         return {
             restrict:"AEC",
             templateUrl:'/template/template_test.html',//above is the test.html 
             scope:{color:"&hdcolor","data":"@"},
             controller:['$scope',function(){
                 $scope.data =[
                     {id:1,tilte:'培训',data:[
                         {id:'1',title:"PHP"},
                         {id:'2',title:"Python"},
                         {id:'3',title:"Python"}
                         ]},
                     {id:2,tilte:'开源产品',data:[
                         {id:'1',title:"2PHP"},
                         {id:'2',title:"2Python"},
                         {id:'3',title:"2Java"}
                         ]},
                 ]

             }],
             link:function(scope,elem,attr){
                 $(elem).delegate('a',click,function(){
                     $('a').removeClass('active');
                     $(this).addClass('active');
                     var index = $(this).index();
                     $(elem).find('div.list').hide();
                     $(elem).find('div.list').eq(index-1).show();
                     })
             }

         }
     }]);

第060讲服务server应用分析与使用场景抽象出service 并且不断的复用这个是service 的解释

第060讲使用$scope.$apply进行数据脏检查在controller 里如果不是scope.function 的方法也就是没有绑定对应的数据时候需要使用脏检查这个动作去触发scope的变化值这个动作 ,

<body>
    <div ng-app="hd" ng-controller="ctrl">
        {{name}}
  <button ng-click="callback()"></button>
  <button id="bt"></button>
   </div>

</body>

    <script>
         var a =angular.module('hd',[]);
        a.controller('ctrl',['scope',function(){
            $scope.name = 'Sam';
            $scope.callback = function(){
               $scope.name ="ShiChangCheng";//this works
            }
            $('#bt').click(function(){
            $scope.name = "Sam for dirty Check!"
            $scope.apply()               
            })     
        }])
    </script>

第062讲 $timeout(定时器 )与$interval实际使用场景分析与实例讲解实例：表白墙信息，定时从后台收取数据 ,然后显示在页面上 ,js 的定时器没有办法实现 Angularjs 的scope机制的, 可以使用上一节说的apply的方式进行更新，但是我们更加合理的方式是通过注入'$timeout'服务的方式进行 ,这个抽象出来的服务覆盖面积更加广泛，同时可以撤销对应的timeout 服务 interval 服务表示的是反复不断的进行监视操作 ,并且满足一定的条件以后可以撤销该操作同时需要注意controller 覆盖的范围涉及到scope范围的刷新所以尽可以缩小scope的刷新范围,加快数据的更新数速度

  a.controller('ctrl',['scope','$timeout','$interval',function(scope,timeout,$interval){
            $scope.name = 'Sam';
           var inter_id  = $interval(function(){
               $scope.id += 1;
           })
           if( $scope.id >10){
               $interval.cancel(inter_id)
           }
        }])

第063讲 $window服务的实例讲解首先依赖注入windows 服务，实现 alert ,confirm

Deft-pawN / sam-for-test

Angularjs 整理篇 #12