AngularJS教程之MVC体系结构详解

首先，在讲解"MVC体系结构详解"之前，我们需要了解MVC的定义。MVC全称为Model View Controller，是一种软件设计模式，用于将应用程序响应用户操作、处理和存储数据的部分分离开来。

在AngularJS中，MVC模式可以详细地表述为：

• Model: 模型是应用程序的数据部分。它包括应用程序中使用的所有数据、规则、验证以及与数据交互的方法。在AngularJS中，通过使用$scopes可以创建模型，并用于存储和管理数据。
• View: 视图是用户界面的部分，它显示应用程序中的数据，并包含用户界面的所有元素（如按钮、下拉菜单等）。在AngularJS中，通过使用HTML和指令可以创建视图。
• Controller: 控制器是MVC中的一个组件，他控制着模型和视图的交互。它们接收用户操作并将其转换为模型操作。在AngularJS中，通过使用控制器来实现控制器部分。

下面，我们通过两个示例来说明：

示例一：使用MVC设计计算器应用

我们假设我们正在开发一个计算器应用，用户可以在应用中输入数字，并执行一些算术运算。我们将以下三个步骤来实现该应用：

• 模型部分：作为模型我们定义一个对象calcData，它存储用户输入的数字和计算结果

var calcModule = angular.module('calcModule', []);
calcModule.controller('CalculatorCtrl', function($scope) {
    $scope.calcData = {
        firstNumber: '',
        secondNumber: '',
        operator: '',
        result: ''
    };
});

• 视图部分：我们通过在HTML中编写标记和使用AngularJS指令可以创建视图

<div ng-controller="CalculatorCtrl">
    <input type="number" ng-model="calcData.firstNumber">
    <select ng-model="calcData.operator">
        <option value="">请选择</option>
        <option value="+">加</option>
        <option value="-">减</option>
        <option value="*">乘</option>
        <option value="/">除</option>
    </select>
    <input type="number" ng-model="calcData.secondNumber">
    <button type="button" ng-click="calculate()">计算</button>
    <p>结果：{{calcData.result}}</p>
</div>

• 控制器部分：在该应用中，当用户点击“计算”按钮时，必须执行以下函数：

$scope.calculate = function() {
    if ($scope.calcData.firstNumber && $scope.calcData.operator && $scope.calcData.secondNumber) {
        if ($scope.calcData.operator === '+') {
            $scope.calcData.result = Number($scope.calcData.firstNumber) + Number($scope.calcData.secondNumber);
        } else if ($scope.calcData.operator === '-') {
            $scope.calcData.result = Number($scope.calcData.firstNumber) - Number($scope.calcData.secondNumber);
        } else if ($scope.calcData.operator === '*') {
            $scope.calcData.result = Number($scope.calcData.firstNumber) * Number($scope.calcData.secondNumber);
        } else if ($scope.calcData.operator === '/') {
            $scope.calcData.result = Number($scope.calcData.firstNumber) / Number($scope.calcData.secondNumber);
        } else {
            $scope.calcData.result = '';
        }
    }
};

示例二：使用MVC设计TODO列表应用

在TODO列表应用中，用户可以创建、编辑和删除条目

• 模型部分：作为模型我们定义一个数组todoItems，用于存储用户创建的条目

var todoModule = angular.module('todoModule', []);
todoModule.controller('TodoCtrl', function($scope) {
    $scope.todoItems = [];
});

• 视图部分：我们使用以下HTML及指令来创建视图

<div ng-controller="TodoCtrl">
    <form ng-submit="addTodo()">
        <input type="text" placeholder="请输入待完成事项" ng-model="newTodoText">
        <button type="submit">添加</button>
    </form>
    <ul>
        <li ng-repeat="todo in todoItems">
            <input type="checkbox" ng-model="todo.done">
            <span ng-class="{'done': todo.done}">{{todo.text}}</span>
            <button type="button" ng-click="removeTodo()">删除</button>
        </li>
    </ul>
</div>

• 控制器部分：在该应用中，当用户点击“添加”按钮时，必须执行以下函数：

$scope.addTodo = function() {
    if ($scope.newTodoText) {
        $scope.todoItems.push({
            text: $scope.newTodoText,
            done: false
        });
        $scope.newTodoText = '';
    }
};

另外，当用户点击“删除”按钮时，必须执行以下函数：

$scope.removeTodo = function(todo) {
    var index = $scope.todoItems.indexOf(todo);
    $scope.todoItems.splice(index, 1);
};

至此，以上两个示例完整地展示了MVC应用于AngularJS应用程序中的实现方法与效果。

阅读剩余 58%