Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > AngularJS入门教程(二)生命周期和MVC

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

    HTML5 herman 3426浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    在上一篇文章中，我们队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）三个基本部分，并且模型层与视图层之间是相互隔离的。简单的描述每个部分的职能：

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

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

    AngularJS的Controller

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

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

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

    1. 第一个参数类型为字符串，为Controller的名称。
    2. 第二个参数类型为数组，该数组用于注入当前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捕获到，并更新对应的数据模型。

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » AngularJS入门教程(二)生命周期和MVC

    相关文章推荐