AngularJS入门教程(二)生命周期和MVC

在上一篇文章中，我们队AngularJS有了最基本的认识，和入门实战，本章我们将继续学习AngularJS的生命周期、MVC等知识。

AngularJS模块的生命周期

在AngularJS中，模块有两个主要的生命周期方法，那就是.config()和.run()：

var mainModule = angular.module('mainModule', []);
mainModule.config(function(injectables) {});
mainModule.run(function(injectables) { });

.config()方法的作用是在模块运行加载之前对模块进行配置，比如创建各种服务、创建自定义指令、注册过滤器等。.run()方法相当于AngularJS应用的main方法，在该方法里进行的配置都是运行时态的，比如对已经创建好的服务实例在应用运行期进行修改。

.config()方法在后文还会涉及，服务、指令、过滤器也会在后文有详细的讲解。

AngularJS的MVC模式

MVC是软件工程中的一种设计模式，既把应用系统分为模型（Model）、视图（View）和控制器（Controller）三个基本部分，并且模型层与视图层之间是相互隔离的。简单的描述每个部分的职能：

模型层：管理数据模型。
视图层：控制UI的展现更新等。
控制层：负责具体业务逻辑处理、请求处理转发等，是模型层和视图之间的桥梁。

AngularJS是为数不多实现了MVC设计模式的前端框架，为前端应用在开发时期的功能职责切分、代码复用及后期的维护提供了极大的便利。

AngularJS的Controller

在AngularJS中，模块是万源之本，所以AngularJS中的所有东西都是通过模块创建的，Controller也不例外。我们可以使用模块对象的.controller()方法创建控制器：

var mainModule = angular.module("mainModule", []);
mainModule.controller("GreetingController", ["$scope", function($scope) {
  $scope.greeting = "Hello!";
}]);

从上面的示例代码可以看到，.controller()方法有两个参数：

第一个参数类型为字符串，为Controller的名称。
第二个参数类型为数组，该数组用于注入当前Controller要用到的服务及实现业务逻辑的函数，这里要注意的是实现逻辑的函数始终是作为数组的最后一个元素，并且要将前面注入的服务作为该函数的参数传入。

这里先简单描述一下$scope，在AngularJS中有一个重要的概念是服务，而$scope就是一个AngularJS内置的服务，在后面的章节中会详细讲解服务。那么$scope服务从字面理解是作用域的意思，其实也差不太多，如果用OO的思想将AngularJS的Controller看作是一个类，那么$scope服务就代表了这个类的作用域，那么就可以通过$scope服务给这个类添加属性或者方法，上面的代码示例中通过$scope服务给GreetingController控制器添加了字符串属性greeting及对象属性person。

所以上面代码的含义是，首先创建了名为mainModule的模块，然后在mainModule模块中创建了名为GreetingController的控制器，并使用$scope服务给该控制器添加了名为greeting和person的属性。

创建好Controller后，来看看如何使用它：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo for Controller</title>
    <script src="../angular-1.5.8.js"></script>
    <script src="modules.js"></script>
  </head>
  <body ng-app="mainModule">
    <div ng-controller="GreetingController">
      {{ greeting }} {{ person.name }} !
    </div>
  </body>
</html>

前文中介绍过在HTML页面中，通过使用ng-app指令给标签绑定模块。同理，我们可以使用ng-controller指令给标签及它的子标签绑定Controller，绑定了Controller的标签及它的子标签都可以使用Controller中的属性或者方法。我们可以使用{{}}语法访问Controller的属性或调用方法。运行效果很简单，就是将这两个属性的值输出到页面。

我们再来看看如何在Controller中添加方法：

var mainModule = angular.module("mainModule", []);
mainModule.controller("GreetingController", ["$scope", function($scope) {
  $scope.personName = "Everyone";
  $scope.welcomeJason = function() {
    $scope.personName = "Jason";
  };
  $scope.welcomeGreen = function() {
    $scope.personName = "Green";
  };
}]);

在上面的代码中，我们给GreetingController添加了personName属性和welcomeJason()、welcomeGreen()两个方法，并在这两个方法中分别对personName属性的值进行修改。再来看看HTML的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo for Controller</title>
    <script src="../angular-1.5.8.js"></script>
    <script src="modules.js"></script>
  </head>
  <body ng-app="mainModule">
    <div ng-controller="GreetingController">
      <button ng-click="welcomeJason()">Jason</button>
      <button ng-click="welcomeGreen()">Green</button>
      <p>
        Welcome {{ personName }} !
      </p>
    </div>
  </body>
</html>

在HTML代码中，添加了两个按钮，此时我们又看到了一个新的AngularJS指令ng-click，这个指令很好理解，就是给按钮绑定点击事件，当点击按钮时调用GreetingController中对应的方法，然后在p标签中显示personName属性。所以Controller中的方法不仅可以通过{{}}语法调用，也可以通过ng-click指令调用。我们来看看运行的效果：
AngularJS的MVC实例

AngularJS的Model

Model指的是数据模型，在AngularJS中使用$scope服务给Controller添加的属性就是数据模型:

var mainModule = angular.module("mainModule", []);
mainModule.controller("GreetingController", ["$scope", function($scope) {
  $scope.person = {
    name: "Jason",
    job: "Developer"
  };
}]);

上述代码示例中的person属性就是数据模型，下面看看如何使用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo for Model</title>
    <script src="../angular-1.5.8.js"></script>
    <script src="modules.js"></script>
  </head>
  <body ng-app="mainModule">
    <div ng-controller="GreetingController">
      <input ng-model="person.name">
      <input ng-model="person.job">
      <p>
        Welcome {{ person.name }}, He is a {{ person.job }}!
      </p>
    </div>
  </body>
</html>

在上述HTML代码示例中，我们又看到了新的指令ng-model，顾名思义，该指令就是用来将数据模型与HTML标签元素进行绑定的。上面的代码中分别将两个输入框与person对象的name和job属性进行了绑定，然后在p标签中输出，我们来看看运行效果：
AngularJS的指令ng-model

不难看出，当我们将person对象的属性与输入框绑定后，person对象属性的默认值就会显示在输入框里了，当我们修改输入框里的内容时会自动将数据通过Controller同步到person对象的相应属性上，所以p标签中的内容会实时跟着输入框的内容进行变化。

AngularJS的View

View层自然就是HTML中的DOM元素了，通过AngularJS提供的各个指令将DOM元素与Controller和Model进行绑定。由Controller负责将数据模型的内容通过{{}}语法或ng-model指令展现在DOM元素上，而当DOM元素中的值发生变化时会由Controller捕获到，并更新对应的数据模型。

AngularJS入门教程(二)生命周期和MVC

： » AngularJS入门教程(二)生命周期和MVC

原创文章，作者：carmelaweatherly，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251163.html

AngularJS入门教程(二)生命周期和MVC

AngularJS模块的生命周期

AngularJS的MVC模式

AngularJS的Controller

AngularJS的Model

AngularJS的View

相关推荐

发表回复