AngularJS知识点总结

Angualr知识点总结，小白必看

1. Angularjs入门

1. AngularJS是什么?
   • Google开源的 前端JS 结构化 框架
   • 动态展示页面数据, 并与用户进行交互
   • AngularJS特性(优点)
     • 双向数据绑定
     • 定制表单验证
     • Ajax封装
2. HelloWorld

   • 导入angular.js, 并在页面中引入

   • 在中ng-app指令

   • 定义ng-model=‘xxx’/{{xxx}}

     • 声明式依赖注入
     • 解耦应用逻辑, 数据模型和视图
     • 完善的页面指令

2.四个重要概念

2.1. 双向数据绑定
* View（视图）： 页面（标签、指令，表达式）
* Model(模型) ：作用域对象（属性、方法）
* 数据绑定： 数据从一个位置自动流向另一个位置
* View–>Model
* Model–>View
* 单向数据绑定： 只支持一个方向
* View–>Model ： ng-init
* Model–>View : {{name}}
* 双向数据绑定
* Model<–>View : ng-model
* angular是支持双向数据绑定的
2. 依赖注入
* 依赖的对象被别人(调用者)自动注入进入
* 注入的方式;
* 内部自建：不动态
* 全局变量：污染全局环境
* 形参：这种最好
* angualr就是通过声明式依赖注入， 来得到作用域对象
* 形参名不能随便定义（只是针对当前这种写法）
3. ** MVC模式**

• M: Model, 即模型, 在angular中:
  • 为scope
  • 储存数据的容器
  • 提供操作数据的方法
• V: View, 即视图, 在angular中:
  • 为页面
  • 包括: html/css/directive/expression
  • 显示Model的数据
  • 将数据同步到Model
  • 与用户交互
• C: Controller, 即控制器, 在angular中:
  • 为angular的Controller
  • 初始化Model数据
  • 为Model添加行为方法

4. MVVM模式

• M: Model, 即数据模型, 在angular中:
  • 为scope中的各个数据对象
• V: View, 即视图, 在angular中:
  • 为页面
• VM: ViewModel, 即视图模型, 在angular中:
  • 为scope对象
• 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层

3.四个重要对象

1. 作用域
   • 是一个js实例对象
   • 这个对象的属性、方法， 页面都可以直接引用、操作
   • ng-app指令： 内部创建一个根作用域（$rootScope）, 是所有其它作用域的父对象
2. 控制器
   • 也是一个对象，是我们View与Model之间的桥梁
   • 当我们使用了ng-controller指令， 内部就会创建控制器对象
   • 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）
   • 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）,并自动注入构造函数中,在函数内部可以直接使用$scope对象。
3. 模块
   • 也是一个对象
   • 创建模块对象： angular.module(‘模块名’, [依赖的模块])
   • 通过模块添加控制器：
     • module.controller(‘MyController’, function(KaTeX parse error: Expected '}', got 'EOF' at end of input: scope){//操作scope的语句})
   • angular的整体设计也是多模块的
     • 核心模块： angular.js
     • 扩展模块： angular-router.js, angular-message.js, angular-animate.js

4.三个页面语法

1. 表达式
   • {{js表达式}}
   • 从作用域对象中读取对应的属性数据来显示数据
   • 不支持if/for/while
   • 支持三目表达式
2. 指令
   • 什么指令 ： 自定义标签属性/标签
   • 常用的指令：
     • ng-app: 指定模块名，angular管理的区域
     • ng-model： 双向绑定，输入相关标签
     • ng-init： 初始化数据
     • ng-click： 调用作用域对象的方法（点击时）
       可以传$event
     • ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
     • ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
     • ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
       • $index, $first, $last, $middle, $odd, $even
     • ng-show: 布尔类型， 如果为true才显示
     • ng-hide: 布尔类型， 如果为true就隐藏
     • ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
   • ng-style: 动态引用通过js指定的样式对象 {color:‘red’, background:‘blue’}
   • ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
   • ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
3. 过滤器
   • 作用: 在显示数据时可以对数据进行格式化或过滤
     • 单个—>格式化（将别的类型的数据转换为特定格式的字符串）
     • 多个----》格式化/过滤
     • 不会真正改变被操作数据
   • {{express | 过滤器名：补充说明}}
   • 常用过滤器：

     • currency 货币格式化(文本)

     • number数值格式化(文本)

     • date 将日期对象格式化(文本)

     • json: 将js对象格式化为json(文本)

     • lowercase : 将字符串格式化为全小写(文本)

     • uppercase : 将字符串格式化全大写(文本)

     • limitTo 从一个数组或字符串中过滤出一个新的数组或字符串

       • limitTo : 3 limitTo : -3

     • orderBy : 根据指定作用域属性对数组进行排序

       • {{[2,1,4,3] | orderBy}} 升序
       • {{[2,1,4,3] | orderBy：‘-’}} 降序
       • {{[{id:2,price:3}, {id:1, price:4}] | orderBy:‘id’} id升序
       • {{[{id:2,price:3}, {id:1, price:4}] | orderBy:’-price’} price降序

     • filter : 从数组中过滤返回一个新数组

       • {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:‘3’}} //根据id过滤
       • {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:‘3’}} //根据所有字段过滤