Angular 框架是一个 MVVM 的前端框架

Angular 版本介绍

  • 1.2 及以下(用的已经不多)
  • 1.3 及以上(主流版本)
  • v2.x (一次激进的尝试)typescript 写的
  • v4.x (最近出的)
    3.x 版本没发,直接从2.x 到了 4.x,1.3版本是分水岭
  • 下载 angular :npm install --save angular 我安装的版本是:@1.6.9

MV* 模式介绍

MVC 模式

  • Model 模型,数据层 M
  • View 视图,表现层 V
  • Controller 控制器,业务逻辑 C
  • View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈
  • MVC模式
    MVC模式
  • 经典的 MVC 存在的问题:
    • M 和 V 直接接触导致耦合高
    • C 控制层很臃肿

MVP 模式

  • MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向
  • 各部分之间的通信,都是双向的
  • View 与 Model 不发生联系,都通过 Presenter 传递,解决了MVC 模式耦合高的问题
  • MVP模式
    MVP模式
  • MVP 存在的问题:
    • P 层依然厚重

MVVM 模式

  • MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致
  • 它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。Angular 和 Ember 都采用这种模式。
  • 可以在html中写入一些逻辑
  • MVVM模式
    MVVM模式

angular 基本概念

  • 模板template:指未经编译的附加了标记和指令的HTML

编译阶段生成了动态(live)视图。保持视图动态的原因是,任何视图中的改变都会立刻反映到数据模型中去,任何数据模型的改变都会传播到视图中去。这使得数据模型始终是应用的单一数据源。大幅度简化了开发者的编程核心,你可以将视图简单的理解为数据模型的实时映射。

  • pic
    双向数据绑定
  • 控制器 controller :在Angular中,控制器就像 JavaScript 中的构造函数一般,是用来增强 Angular作用域(scope) 的。当一个控制器通过 ng-controller 指令被添加到DOM中时,ng 会调用该控制器的构造函数来生成一个控制器对象,这样,就创建了一个新的子级 作用域(scope)。在这个构造函数中,作用域(scope)会作为$scope参数注入其中,并允许用户代码访问它。一般情况下,我们使用控制器做两件事:
    • 初始化 $scope 对象
    • 为 $scope 对象添加行为(方法)
    • 正确使用控制器:控制器不应被赋予太多的责任和义务,它只需要负责一个单一视图所需的业务逻辑。常见的保持控制器“纯度”的方法是将那些不属于控制器的逻辑都封装到服务(services)中,然后在控制器中通过依赖注入调用相关服务
  • 视图模型(view model):当我们创建应用程序时,我们通常要为Angular的 $scope 对象设置初始状态,这是通过在 $scope 对象上添加属性实现的。这些属性就是供在视图中展示用的视图模型(view model),它们在与此控制器相关的模板中均可以访问到
    我们为 scope 添加属性来让模板可以访问数据模型,现在,我们为 $scope 添加方法来让它提供相关的交互逻辑。添加完之后,这些方法就可以在模板/视图中被调用了。

  • Scope 继承范例

    • 我们常常会在不同层级的DOM结构中添加控制器。由于 ng-controller 指令会创建新的子级 scope ,这样我们就会获得一个与DOM层级结构相对应的的基于继承关系的 scope 层级结构。(译者注:由于 Js 是基于原型的继承,所以)底层(内层)控制器的 $scope 能够访问在高层控制器的 scope 中定义的属性和方法
    • root scope,所有作用域的“根”

      angular 指令介绍

  • Angular 的核心是数据(一切都是数据)
  • ng-init 初始化变量值
  • ng-model 双向数据绑定
  • ng-bind 单向绑定(输出,数据变了,视图跟着变,反过来不行)
  • ng-app 范围(表面 ng 管辖的范围,可以是一个模块名)
  • ng 表达式
  • 也可以自定义指令
  • 数据循环 ng-repeat="item in arr" 带上下标的循环: ng-repeat="item in arr track by $index" 带上下标的循环另一种写法: ng-repeat="(k,v) in json"

angular 写第一个控制器

  • 重要:ng 的空间和原生 js 空间是不想通的,无法互相访问变量,这可以利用控制器 controller 来打通
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!DOCTYPE html>
    <html lang="en" ng-app="test">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.js"></script>
    <style>
    .div1{
    width:300px;
    height:300px;
    background-color: brown;
    }
    </style>
    <script>
    let mod = angular.module('test',[]);//创建一个模块
    //控制器是依赖于模块的
    mod.controller('con1',function($scope){
    $scope.a = 0;
    $scope.b = 0;
    $scope.d = 3;
    $scope.int = function(str){
    return parseInt(str);
    };
    });

    </script>
    </head>
    <!-- 控制器范围 -->
    <body ng-controller="con1">
    <input type="text" name="" value="" ng-model="a" />
    <input type="text" name="" value="" ng-model="b" /> {{int(a)+int(b)}}
    <br >
    <input type="text" name="" value="{{d}}" />

    <input ng-model="c" />
    <select ng-model="c">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    </select>
    </body>
    </html>