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>