Angular常用指令小结

Angular

Angular简介

• 一款非常优秀的前端高级 JS 框架
• 最早由 Misko Hevery 等人创建
• 2009 年被 Google 公式收购，用于其多款产品
• 目前有一个全职的开发团队继续开发和维护这个库
• 有了这一类框架就可以轻松构建 SPA 应用程序
• 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。

Angular 与 jQuery

• jQuery: 库

  • 提供了一些已有的方法，我们主动调用它。
  • $(‘.test’).val()

• Angular: 框架

  • 框架提供了一种结构或者模式
  • 我们按照它提供这种结构或者模式去书写代码
  • 框架会帮助我们去剩下的事情

• jQuery提高了dom操作的效率

• Angular不推崇dom操作

• angular.element方法, 使用方式和jquery非常像,最终得到一个jqLite对象

  • 可以把angular.element当作jQuery的$来用，
  • 注意angular.element 要求传入的参数是一个原生的dom对象，而不是选择器

指令

• 在angular中以ng-开头的html标签属性，称之为指令
• ng-app: 选择angular去管理哪一部分的html代码, 管理的是ng-app所在
  元素的子元素及其本身
• ng-click: 也是用来注册点击事件
• ng-model: 可以指定一个属性值，这个属性就表示当前文本框的value值
• ng-init: 可以对数据进行初始化操作，给一个默认值。

模块

• 创建模块:var app = angular.module('模块名',[])
• 注意 如果不依赖其他模块，也需要提供一个空的数组
• 需要在ng-app指令的属性值上写我们的模块名

控制器

• 创建控制器:app.controller('控制器的名字',function($scope){})
• 如果要改变页面{{testName}}的值，就改变$scope.testName值就可以
• 注意 要显示数据模型的值,就要在它所在标签或者父标签上加上ng-controller指令
  ng-controller的值就是我们想要显示的数据模型所在控制器的名字
  :ng-controller=”window”

双向数据绑定

• 数据模型($scope.属性)的改变，会影响内容的显示(文本框的值)
• 我们改变了文本框的值，对应的数据模型发生了改变.
• 这种相互影响的关系就称之为双向数据绑定.

MVC 思想

• M : Model: 存储，获取数据
• V : View 视图，把数据呈现给用户
• C : Controller 做一些控制和调度的操作

Angular开发流程

• 1.在html中引入angular.js文件
• 2.在html中加上ng-app指令，告诉angular要管理页面哪一部分代码
• 3.在js中创建模块angular.module('myApp',[]),给ng-app指令一个值，
• 这个值就是这个模块的模块名:myApp
• 4.在js中创建控制器xxx.controller('控制器名字',function($scope){}),我们需要在页面上加上ng-controller指令，指令的值为控制器的名字
  ng-controller="控制器名字"
• 5.建模:根据页面结构，抽象出具体的js对象.
• 6.通过$scope做一些初始化操作$scope.username="小明"
• 7.通过ng-model , ng-click , {{}} 把$scope的属性在页面展示出来
• 8.在js写一些具体的逻辑

安全的方式创建控制器

• 就是为了避免压缩后代码无法运行

    // 把第二个参数改为一个数组,在数组把我们需要的参数的名字写上
    // 回调函数就写在数组的最后一个元素上
    // *注意*：数据中传入的元素的顺序,要和function的中顺序一一对应
    app.controller('demoController',['$scope','$log',function($scope,$log){
      $scope.msg = 'hello World!'
      $log.log('哈哈哈哈！')
    }])

指令

ng-bind

• 可以解决表达式闪烁问题:
• <p ng-bind="msg"> </p> 浏览器不会把标签的属性显示出来!
• 效果：angular会把ng-bind对应的数据显示到所在标签中间

ng-cloak

• 可以解决表达闪烁问题:
• <div class="ng-cloak"><p>{{msg}}</p></div> 先隐藏后显示
• angular在解析表达式之后会把页面上的ng-cloak样式移除,
  这样ng-cloak对应的样式就不生效了,我们就先给ng-cloak设置display:none;

ng-repeat

• 能够把一组数据直接渲染到页面上，不需要我们拼接字符串
• 我们希望重复的是哪个元素就把ng-repeat指令加在哪个元素上，不一定是li上
• ng-repeat=”item in data” , item对应的是遍历data时的每一一条数据，data是我们 要遍历的数据(是一个数组)

<!-- ng-repeat 遍历生成数据，类似for in 循环的语法 -->
      <li ng-repeat="item in users" >
        {{item.name}} , {{item.age}}
      </li>

ng-repeat补充

• 数据中有完全相等的项时会报错，这时候要用ng-repeat="item in data track by $index"
• ng-repeat 在遍历时会提供以下值:
  
  • $odd : 为true时，表明当前数据是第[奇]数条
  • $even: 为true时，表明当前数据是第[偶]数条
  • $first: 为true时，表明当前数据是第1条
  • $last: 为true时，表明当前数据是最后一条
  • $middle: 为true时，表明当前数据是否是中间(非第一和最后)的数据

ng-class

• ng-class 可以帮助我们控制元素的class样式，
• ng-class 可以独立在其他元素上使用，并非一定要和ng-repeat结合

    <!--  ng-class,动态的添加class样式,
      以对象的形式书写，angular会把属性值为true的属性名当作样式添加到class
      class="green" -->
    <li ng-class="{
        red   : item.age>=20,
        green : item.age>=10&&item.age<20,
        blue  : item.age<10
     }" ng-repeat="item in data">
      {{item.name}},{{item.age}}
    </li>

ng-show/ng-hide

• 控制元素的显示与否,ng-show与ng-hide作用是相反的(只是设置display:none来隐藏元素)

    <!-- ng-show,控制元素的显示或隐藏,值为true时显示，为false隐藏-->
    <p ng-show="isShowing">ng-show值为true时显示</p>
    <!-- ng-hide 值为true时，隐藏当前元素 -->
    <p ng-hide="true">ng-hide值为true时隐藏</p>

ng-if

• 控制元素的显示与否:值为false时，元素会从dom移除

    <!-- ng-if，也能控制元素的显示或隐藏,为true时显示,为false时【会将当前dom元素移除】 -->
    <p ng-if="true">这个标签不会被移除</p>
    <h1>ng-if="false"</h1>
    <p ng-if="false">这个标签会被移除</p>

ng-switch

• 当ng-switch-when 对应的值等于ng-switch对应值时，当前dom元素就显示

    <div ng-switch="name">
      <div ng-switch-when="小明">
        我是小明，我在这里！
      </div>
      <div ng-switch-when="小红">
        我是小红!
      </div>
    </div>

其他常用指令

• ng-checked：
  
  • 单选/复选是否选中,（单向数据绑定:界面操作不会影响数据模型的值） ng-model:双向数据绑定
• ng-selected：
  
  • 是否选中
• ng-disabled：
  
  • 是否禁用
• ng-readonly：
  
  • 是否只读

常用事件指令

不同于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：

• ng-blur：失去焦点
• ng-focus： 获得焦点
• ng-change：内容改变
• ng-copy：复制
• ng-click: 点击
• ng-dblclick：双击
• ng-submit： form表单提单

指令的其他使用方式

data-xxx,在使用angular指令时，只需要在原先的指令前加上data-前缀。
如: data-ng-app,data-ng-click
x-ng-app,x-ng-click

自定义指令

• 自定义指令无外乎增强了HTML,提供了额外的功能。
• 内部指令基本能满足我们的需求。
• 少数情况下我们有一些特殊的需要，可以通过自定义指令的方式实现

创建自定义指令

• 注意: 名字要符合驼峰合法

    // 1.创建模块对象
    var app = angular.module('directiveApp', [])

    // 2.创建自定义指令
    // 第一个参数：是指令的名字,必须是驼峰命名法
    //             使用时把大写改成小写，在原来大写前加上-
    // 第二个参数：和控制器的第二个参数类似!
    app.directive('myBtn', [function(){
      // 在这里直接return 一个对象就可以了
      return {
        // template属性，是封装的ui
        template:'<div><button>我是按钮</button></div>'
      }
    }])

自定义指令中回调里返回的对象的属性

• template: 需要提供一个html字符串,最终会被添加到当前页面使用了自定义指令的位置

• templateUrl:需要提供一个html文件路径，angular会发请求，请求对应的文件，
  把文件内容作为模板插入到自定义指令中间
  : 也可以提供一个script标签的id, angular会把script标签中的内容作为
  模板插入到自定义指令中间,注意 要(必须)改变script标签的type=”text/ng-template”

• restrict: 也是需要提供一个字符串，限制自定义指令的使用形式

  • A : Attribute 表示只能以属性的形式使用
  • C : Class 表示只能以类样式名的形式使用
  • E : Element 表示只能以自定义标签的形式使用
  • M : comments 表示只能以注释的形式使用 <– directive:自定义指令名 –>
  • ACE : 如果希望多种方式合适，就把对应值组合在一起。

• replace：需要提供一个布尔值，为true时，模板会被用来替换自定义指令所在标签，
  * 否则是插入到自定义指令中间

• transclude: 需要一个布尔值, 为true时会将自定义标签中的内容插入到模板中，
  * 拥有ng-transclude 指令的标签中间

• scope：需要一个对象: 可以用来获取自定义指令的属性值,

  • 给当前对象添加一个属性(如:tmp),属性值以@开头，后面跟上自定义指令的属性名
    然后就可以在模板中使用{{tmp}} 来得到对应的属性值
    
    • scope: { tmp:'@mystyle'} {{tmp}}
    • scope: { mystyle:'@'} {{mystyle}}

• link: 需要一个function 这是function在angular解析到相应指令时就会执行一次,参数如下

  • scope ：类似于$scope,只不过scope的属性只能在模板和自定义指令中使用
  • element : 自定义指令所在标签对应的对象(jqLite)
  • attributes : 包含了自定义指令所在标签的必有属性

过滤器(filter)

• 格式化数据
• 过滤数据(filter)

    <ul>
        <!--  如果指定一个布尔值，或者字符串就是全文匹配 -->
      <!-- 会到对应的data中寻找，如果当前遍历到的元素有completed属性且值 为true就会被显示出来。（只会到completed属性中寻找） -->
      <li ng-repeat="item in data | filter : {completed:true} ">
        {{item.name}},{{item.completed}}
      </li>
    </ul>

  <!-- 在数据模型后加上|  再加上过滤器的名字
        也可以在过滤器名字后指定参数，参数是写在冒号后面的-->
  <p>{{money | currency : '￥'}}</p>

  <p>{{myDate | date : 'yyyy年MM月dd日 HH:mm:ss'}}</p>

• limitTo

    <h1>limitTo</h1>
  <!-- 第一个参数，表明显示多少个字，第二个参数表示，从第几个字开始显示(索引从0开始) -->
  <p>{{msg | limitTo : 5 : 2}}...</p>

• orderBy 及 json

<h1>json</h1>
 <!--  格式化显示json数据，参数指定缩近的长度 -->
 <pre>{{myJson | json : 8}}</pre>
  <h1>orderBy</h1>
  <!-- 对数据进行排序，参数，给+号就按正序排，- 就按倒序排 -->
  <span ng-repeat="item in arr | orderBy:'-'">{{item }}，</span>

• 在js中使用过滤器

    <!-- $filter 需要在控制器的回调中传入 -->
    // 可以调用不同的过滤器得到相应的结果
      // 参数是一个过滤器的名字
      // 返回值是一个方法
      //        : 第一个参数是需要处理的数据
      //        : 后面的参数是当前过滤器本身需要的参数
     $scope.result =  $filter('currency')($scope.money,'￥')