Angular.js框架学习

AngularJS是什么?

• Google开源的 前端JS 结构化框架
• 动态展示页面数据, 并与用户进行交互
• AngularJS特性(优点)
• 双向数据绑定
• 声明式依赖注入
• 解耦应用逻辑, 数据模型和视图
• 完善的页面指令
• 定制表单验证
• Ajax封装

Angular

• 导入angular.js, 并在页面中引入在中ng-app指令
• 定义ng-model=‘xxx’/{{xxx}}
• ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创$rootScope根作用域对象
• ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性
• {{}} (表达式) : 显示数据,从作用域对象的指定属性名上取

1、表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算，

2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。

3、区别：语句用分号结尾，有些语句我们没有加分号，比如console.log虽然我们没有加分号，但也是语句，因为js引擎会自动解析并且加上分号。

4、特例：if语句，就不用加封号 可也是完整的语句。

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层

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
   1. 表达式
   • {{js表达式}}
   • 从作用域对象中读取对应的属性数据来显示数据
   • 不支持if/for/while
   • 支持三目表达式

4. 指令

   • 什么指令 ： 自定义标签属性/标签
   • 常用的指令：
     • 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

5. 过滤器

   • 作用: 在显示数据时可以对数据进行格式化或过滤
     • 单个—>格式化（将别的类型的数据转换为特定格式的字符串）
     • 多个----》格式化/过滤
     • 不会真正改变被操作数据
   • {{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’}} //根据所有字段过滤