Angular 1.x 总结

https://static.tototo.me/image/AngularJS_logo.svg.png

由于之前项目中一直在用 Angular 1.x,最近又一直在研究 Vue,所以对于 Angular 的知识还停留在 1.x 的时代。

Angular 是什么?

  1. Google 开源的前端结构化 MVVM 框架
  2. 使用 HTML 为模板语言,并且拓展了 HTML 的语法,让开发能够更简洁、高效
  3. 使得开发单页应用(SPA)变得更简单

Angular 有哪些优点?

  1. 双向数据绑定
  2. 声明式依赖注入
  3. 完善的体系(模板、路由、服务、指令、过滤器等)
  4. 解耦应用逻辑、数据模型和视图
  5. 自定义 Directive

Angular 有哪些缺点?

  1. 断层式升级(不太算缺点)
  2. 性能问题(脏值检查)
  3. SEO(有相应的解决方案)

Angular 四个重要概念

  1. 双向数据绑定

    先解释下几个词:

    * View:既视图,在 Angular 中指页面(标签、指令、表达式)
    * Model:即模型,在 Angular 中指作用域对象(属性、方法)
    * 数据绑定:数据从一个位置自动流向另一个位置
    

    单向数据绑定:只支持一个方向

    * View → Model: 在 Angular 中的 ng-init 指令为 View → Model
    * Model → View:在 Angular 中的 {{}} 表达式为 Model → View
    

    双向数据绑定:支持两个方向

    * View ↔ Model:在 Angular 中的 ng-model 指令为View ↔ Model
    

    Angular 既支持单向数据绑定又支持双向数据绑定,所以说 Angular 为双向数据绑定

  2. 依赖注入

    同样解释下:

    * 依赖对象:完成特定功能的函数,需要某个依赖的对象才能实现,这个对象就叫依赖对象
    * 依赖注入:依赖的对象被调用者自动注入进来
    

    如何引入依赖对象:

    * 可以通过函数内部创建(不动态),全局变量的方式(污染全局变量)
    * 在 Angular 中通过形参的方式引入:依赖注入的使用方式
    

    声明式依赖注入:

    * 在我们定义函数时,使用形参声明依赖对象变量,在函数中使用依赖对象,例如:$scope
    * 函数调用时,自动将创建好的依赖对象动态传入(Angular实现)
    * 事件监听就使用了依赖注入,event 就是依赖对象(可以是任意名称)
    * 注:与事件监听不同的是,Angular 的依赖对象只能是指定的名称,例如:$scope
    

    Angular 就是通过声明式依赖注入来得到作用域中的对象

  3. MVC
    * M:既 Model(模型),在 Angular 中为 $scope,存储数据,提供操作数据的方法。
    * V:既 View (视图),在 Angular 中为页面,显示 Model 的数据,将数据同步到 Model。
    * C:既 Controller (控制器),在 Angular 中为 Angular 的 Controller,初始化 Model 的数据,为 Model 添加行为方法。
    

    https://static.tototo.me/image/mvc.png
    借用网上的图片直观的说明

    * View 传送指令到 Controller
    * Controller 完成业务逻辑后要求 Model 改变状态
    * Model 将新的数据发送到 View,得到用户反馈。
    

    注:所有的通信都是单向的

  4. MVVM

    同MVVM 与 MVC 的区别在于:将 MVC 的 Controller 换成了 ViewModel

    * M:既 Model(模型),在 Angular 中为 $scope 中的各个数据对象
    * V:既 View (视图),在 Angular 中为页面,显示 Model 的数据,将数据同步到 Model。
    * C:既 ViewModel (识图模型),在 Angular 中为 scope对象
    

    https://static.tototo.me/image/mvvm.png
    借用网上的图片直观的说明

     * View 与 Model 之间没有关联,只通过 ViewModel 来传递
     * 采用双向绑定,View 的改变自动反映到 ViewModel ,反之亦然。
    

    注:各部分的同时都是双向的
    MVVM 是由 MVC 演变而来,也可以说 Angular 也是 MVC,不过更接近于 MVP,只不过把 MVP 的 Presenter 换成了 ViewModel
    这里有个很有意思的事情,MVC 并不在 23 种设计模式之中,可以说 MVC 由三种设计模式组合而来。

Angular 四个重要对象

  1. 作用域

    一个 JS 实例对象,ng-app 指令会默认创建一个 $rootScope 根作用域对象

    作用域在 Angular 中以树状体现,根作用域位于最顶层,从它往下挂着各级作用域,每一级作用域上面挂着属性和方法,供所属的视图调用

    当然子作用域也会通过 JS 原型继承机制继承父作用域的属性和方法,例如

     <div ng-controller="myCtrl1">
       <p>{{ name }}</p>
       <div ng-controller="myCtrl2">
         <p>{{ name }}</p>
       </div>
     </div>
    

    如果只在 myCtrl1 的作用域中定义变量 $scope.name = 'Jay'
    其子作用域 myCtrl2name 值也为 Jay

  2. 控制器

    也是一个对象,是 View 和 Model 之前的桥梁,ng-controller 指令会创建一个控制器对象
    每定义一个 ng-controller 指令会默认创建一个 $scope 作用域对象,属于 $rootScope 根作用域。
    注:使用 ng-controller 命令时必须定义 $scope 形参。

  3. 模块

    也是一个对象,通过 angular.module('模块名', [依赖的模块]) 指令创建模块对象
    通过模块添加

     module.controller('MyController', function($scope){
         ...
     })
     module.controller('MyController', ['$scope', function($scope) {
         ....
     }]) // 解决压缩不能使用的问题
    

    Angular 整体也是多模块的

     * 核心模块 angular.js
     * 拓展模块 angular.router.js angular.animent.js angular.message.js
    

    模块的方法

     * controller() 定义控制器
     * factory() 定义服务工厂模块 `// 相当于 var f = MyFactory()`
     * service() 定义服务模块(隐士) `// 相当于 var s = new MyService()`
     * provider() 定义服务提供商模块 `// 必须有一个 $get() 方法`
     * ...
     * directive() 定义指令模块
    
  4. 服务

    服务是什么?具有特定功能的对象(object 对象、函数、数组)
    Angular 内置服务(都是以 $ 开头,声明式依赖注入[形参])
    常用服务:

     * $rootScope
     * $scope
     * $timeout
     * $interval
     * $filter
     * ...
     * $q
    

    自定义服务:

    * 使用 module 对象来定义服务
    * 定义方法:
        factory(): 可以定义任意类型的服务
        service():只能定义 object 类型对象
    
     factory('服务名', function() {
       return // 服务对象(可以是任意类型)
     })
     service('服务名', function() {
       return //(服务对象只能是 object 类型)
     })
    

Angular 三个页面语法

  1. 表达式

    从作用域对象中读取对应的数据来显示到页面上
    表达式写在 {{}}
    Angular 表达式与 JavaScript 表达式很像,可以包含运算符和变量(不支持if、for、while)

  2. 指令

    自定义的标签属性(以 ng 开头)
    常用指令:

     * ng-app // 指定模块名,告诉 angular需要管理的区域
     * ng-controller // 指定控制器构造函数名
     * ng-init // 初始化页面数据
     * ng-model // 实现双向数据绑定
     * ng-bind // 与 {{}} 类似,解决屏幕闪动问题
     * ng-repeat // 用来循环数组
     * ng-show // 控制页面显示(display:block),布尔值
     * ng-hide // 控制页面隐藏 (display:none),布尔值
     * ...
     * ng-class // 动态引入页面样式
    
  3. 过滤器

    在显示数据时对数据进行过滤或格式化
    过滤器的两种使用方法:

    * 在表达式中直接使用,跟在表达式后用 | 分隔 {{ demo | filter }}
    * 可以多个过滤器一起使用 {{ demo | filter1 | filter2 }}
    * 过滤器可以接收参数使用 {{ demo | filter:argument1:argument1 }}
    * 在指令中也可以使用过滤器 <span ng-repeat="arr in array | filter ">
    
    * 在 controller 和 service 中使用过滤器,需将过滤器注入到 controller 中,例如:
     app.controller('demo', function($scope, currencyFilter) {
       $scope.num = currencyFilter(123534)
     }
    

    Angular 内置过滤器:

     * currency // 货币格式化
     * number // 数值格式化
     * date // 日期格式化
     * json // 将js对象格式化为json
     * lowercase // 将字符串格式化为小写
     * uppercase // 将字符串格式化为大写
     * orderBy // 根据指定作用域对象对数组进行排序
         {{ [2, 3, 5, 1, 4] | orderBy }} // 升序
         {{ [2, 3, 5, 1, 4] | orderBy: '-' }} // 降序
     * filter // 从数组中过滤返回一个新的数组
         {{ [ { id: 1, price: 3 }, { id: 2, price: 4 } ] | filter: { id: '3' } }} // 根据 id 过滤
         {{ [ { id: 1, price: 3 }, { id: 2, price: 4 } ] | filter: { $: '3' } }} // 根据所有字段过滤
    

Angular 三个拓展插件

  1. Animate

    Angular-Animate 拓展插件是通过 css transition 样式实现动画效果
    使用方法:

    * 需要下载并引入 angular-animate.js
    * 通过模块加载依赖 angular.module('MyApp', ['ngAnimate'])
    * 例子:
    
     /* 显示状态下的样式 */
     div {
       transition: all linear .5s; /* 过渡动画 */
     }
     /* 隐藏状态下的样式 */
     ng-hide {
       transition: opacity .5s; /* 过渡动画 */
     }
    
    * 通过 ng-show / ng-hide 的方式控制元素的隐藏显示
    
  2. Message

    Angular-Message 进行表单验证的拓展插件
    同样需要引入加载依赖
    使用方法:

    * 指定验证规则指令
        ng-required = "true" // 是否必填 / 必选
        ng-minlength = "6" // 最小长度
        ng-maxlength = "16" // 最大长度
        ng-pattern = "[a-zA-Z]" // 正则验证
        type = "email" // 邮箱类型
        ...
        type = "url" // 链接类型
    * 显示提示信息指令
        ng-messages
    

    示例:

     <p ng-show="userForm.username.$error.minlength">用户名太短</p>
     <p ng-show="userForm.username.$error.maxlength">用户名太长</p>
     <p ng-show="userForm.username.$error.required">用户名必填</p>
    

    注:form 和 input 都必须有 name 属性,input 必须有 ng-model

  3. Route

Angular Ajax

未完待续...


暂无评论最热最新

    发表留言

    人生在世,错别字在所难免,无需纠正。

    提交评论