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

HTML5 herman 1758浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在上一篇文章中,我们队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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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