前端框架之angular-1

发表于 | 分类于 ，
字数统计 1,399 | 阅读时长 5

angularJS

  1. 定义应用：ng-app指令
    • 指令：就是angularJS扩展的html属性
    • 功能：指定ng管理的范围
    • 一般情况下，ng-app指定给body标签，一个页面最多只能写一个ng-app指令，写在body表示body被angularJS管理。
    • 相当于定义了一个应用，名字叫做ng-app属性的值。
    • 创建模块来管理ng-app指定的内容；
  2. 定义模块：
    • AngularJS提供了一个全局对象angular,调用该全局对象的module()方法可以创建一个模块.该方法返回一个模块对象.这个模块对象就是AngularJS用来管理应用的对象.
    • module()
  3. 定义控制器
    • 接下来我们可以通过app模块对象来创建控制器.
    • 调用app模块对象的controller方法，就可以创建控制器.
    • 为html元素指定1个ng-controller属性.值为创建controller的第1个参数的值.
  4. 数据模型
    • 控制器负责处理制造模型数据.
    • 视图负责显示控制器制造的模型数据.

常用内置指令

  • html的最大的不足 功能单一.ng扩展了一些html属性和标签弥补这个不足.
  • 指令：本质就是ng扩展的html属性；ng的属性都是以ng-开头
  • ng-app:指定ng管理的范围
    • 注意的地方
    • ng-app 什么时候给值什么时候不给
    • 如果需要创建MVC那么必须有值，如果不需要用到MVC，那么不用给值。
  • ng-controller:指定与控制器关联的视图
  • ng-show:指定的元素是否显示，
    • 取值可以是bool类型，true代表显示，false代表隐藏。
    • 取值还可以表达式
  • ng-hide:指定的元素是否隐藏，true隐藏，原理同上
  • ng-if:决定是否要将元素创建在DOM树上
    • 取值 ：bool值
    • 用法同上
  • ng-src:增强路径
  • ng-href:增强路径
  • ng-class:决定指令的css类样式是否作用在标签身上
    • 值是对象 {类名：bool值/变量/表达式}
  • ng-include:将另外一个文件的内容包含进来，可以将页面公共部分写在单独的文件中，用ng-include将其包含进来
  • ng-disabled 是否禁用表单
    • bool值，true表示禁用，false不禁用
  • ng-readonly 原理同上
  • ng-checked 原理同上
  • ng-selected 原理同上
  • ng-init
    • 以指令的方式去初始化一个变量的值.而不用放在控制器中.
    • 它只适合去初始化一些简单的数据.
    • 一些复杂的数据放在控制器中初始化更方便一些.

自定义指令

  • 调用模块对象的directive指令，就可以自定义指令

    • 参数1：指令名

      • 注意：在为自定义属性取名的时候，如果使用的是驼峰命名法（hmTag），那么在使用的时候中间应该加-（hm-tag）

    • 参数2：回调函数

      • 当解析这个自定义指令的时候,就会执行这个回调函数.这个回调函数要按照规范返回1个对象.在对象中通过键值对的方式来指定自定义指令的作用

      • restrict: 代表自定义指令的类型.

        1
        2
        3
        4
        5
        6
         E: Element 自定义标签.
         C: Class CSS类
         M: 注释
         A: 属性.
        取值可以是其中的任意1个 或者多个的组合.

      • template: 模板.

      • replace: bool值 指定是否替换原有的标签.

数据的单向绑定

1
2
3
4
1. 数据的单向绑定. 在控制器中制造数据.并把数据存储到$scope中. 视图中可以通过{{}}去显示绑定数据.
2. {{}} 如果你要在原生的html中显示或者替换数据模型的数据 就必须要加双大括弧. 包括原生的html属性取值.
   如果属性是ng提供的指令.绝大多数情况下直接写就可以了. ng-src是例外 其它的指令直接写就行.
3. {{}}是数据绑定符号. {{}}符号就是ng-bind指令的简写形式.

数据双向绑定

1
2
3
4
1. ng-model指令
   - 只能作用在表单上
   - 取值：直接写1个变量名.就代表声明了这个变量.这个变量的值和这个表单元素的值是一个双向绑定的关系.
2. 一旦表单元素的值发生了变化,这个变量的值也会跟着一起变化.这个变量的值如果发生了变化.表单元素的值也会跟着一起变化.

事件处理

  1. AngularJS的事件机制.
    • 原生的事件处理机制.ng认为会存在全局污染.
  2. ng通过指令的方式为元素绑定事件.
    • 要绑定点击事件:那么就为元素设置一个指令: ng-click
    • 指定ng-clcik调用的函数. ng-click=”demo()”
    • 而demo()函数是定义在$scope中的. 在控制器
  3. 其它的事件的套路是一样的.
    • onmouseover
    • ng-mouseover

数据处理

  1. ng-repeat
    • 作用：重复生成HTML标签
    • 可以遍历数组，数组中有重复元素会报错
    • 还可以遍历对象，拿到的是对象每一个属性的值，如果需要拿到属性名，可以写 （key,value） in stu;key代表属性名，value代表属性值
  2. ng-switch
    • 判断一个变量或表达式的值，匹配一个选择，匹配上的值会被选上，匹配不上则不选
    • 一般用法：
    • ng-switch=”判断的变量”
    • ng-switch-when=”值1”
    • ng-switch-when=”值2”
    • ng-switch-defalut
  3. 数据模型一旦发生变化，angular会自动刷新dom

-------------本文结束感谢您的阅读-------------