angular————概论 指令 表达式

发表于

AngularJs是什么

  • AngularJs是一款MVVM结构的前端框架。他分为M-model（数据层），V-view（视图层），VM-viewModel（视图模型层）。其中V与VM实现了双向数据绑定（具体的实现方法是通过内部的$digest也就是脏值查询实现的）。VM与M实现数据的交互

AngularJs能做什么

  • AngularJs通过内部的各种功能实现了在不操作DOM树（当然内部封装指令时会调用DOM方法）的情况下根据需要实时渲染前端页面、与后端交互。并且实现了模块化。是一款在不断的使用中可以不断健壮的框架。

AngularJs怎么做

  • Angular通过各种内部的功能组合实现前端页面实时渲染。具体如下

    1. 指令

      • 凡是以ng-或者data-ng-为前缀的都是angularJS的内置指令
      • 指令分为内置指令和自定义指令，自定义指令通过mod.directive()方法产生

      • 指令有4种调用方法，即“ECMA”。

        • E-element 作为元素标签调用 

          1
          <abcd></abcd>

        • C-class 作为类调用 

          1
          <div class="abcd"></div>

        • M-comment 作为注释调用,指令内的replace:true，且注释前后有2个空格

          1
          <!-- directive:zfpx -->

        • A-attribute 作为元素属性调用

          1
          <div abcd></div>
      1. ng-app :angular起始位置，会形成$scope根目录
      2. ng-class :两种用法 ‘{true:”c1”,false:”c2”}[flag]’ ‘{c1:flag1,c2:flag2}’
      3. ng-init :初始化数据
      4. ng-if :控制元素是否存在，会形成自己的作用域，如果不存在内部作用域也会销毁
      5. ng-show :控制元素显示隐藏，即使隐藏了内部指令还会执行
      6. ng-hide :与show相反
      7. ng-include :引入html片段
      8. ng-model :用在表单元素上，存储value值，实现数据双向绑定
      9. ng-repeat :迭代DOM元素，会形成自己的作用域。当遍历重复数据会报错， track by $index解决
      10. ng-style :动态增加行内样式
      11. ng-src
      12. ng-href
      13. ng-change
      14. ng-model-options
      15. ng-click
      16. ng-bind
      17. ng-bind-template
      18. ng-cloak :解决闪烁,需要在加载的时候给一个隐藏样式

    2. 表达式

      1
      {{}}
      • 实现DOM中的数据与作用域$scope数据的绑定
      • 可以放文字，变量，运算符，其中变量可以存储字符串、数组、对象等

##Angular 内部运行的三个阶段

  • 加载阶段 ：引入angular开始到对指令解析前
  • 编译阶段 ： template replac transclude compile
  • 链接阶段 ： link实现与作用域的绑定，如果当前没有形成在自己的作用域，scope指向上一级作用域