1. 云图网首页
  2. 技术专区
  3. 智能运维

AngularJS入门教程(一)特性和模块

• 智能运维

AngularJS 2.0已正式发布，掌握AngularJS 1.x的基本知识能更快的帮助我们迈入AngularJS 2.0的怀抱，让我们不忘AngularJS 1.x初心，去拥抱AngularJS 2.0的美好未来。本系列文章将彻底的讲解AngularJS的实战开发。

AngularJS是什么

我们知道HTML是一种创建网页的静态标记语言，它很基础，但不失灵活，然而它自身并不提供对灵活性的具体实现，所以我们要创建具有可用性及赏心悦目的Web应用就需要使用其他语言与之结合去操控它的DOM、标签、标签属性、标签层级结构实现样式变换、动态数据变换、动态元素变换等，比如结合CSS和JavaScript语言。

但是越多的结合就意味着功能实现越复杂，我们需要写大量的代码去实现类似数据绑定、动态展现、远程服务请求等功能，所以jQuery这类的JS库、ember这类的框架应用而生。前者让我们在完成某些单一功能时调用它封装好的方法，从而减少代码量。后者让我们可以遵循它的规范去填充它设计好的代码结构，从而逐步完成完整的应用功能。

而AngularJS是JS库和框架的结合，它诞生于2009年，由Misko Hevery 等人创建，后为Google所收购并发扬光大。AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发，提供了构建一个CRUD应用可能用到的全部内容包括：自定义HTML标签、事件绑定、数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入等。

AngularJS的特性

AngularJS有着诸多的特性，但最为核心的是其Scope概念、MVC模式、路由、模块化、依赖注入、指令系统、双向数据绑定、Service、Provider等。

AngularJS的模块化

我们先从AngularJS的模块化特性说起。什么是模块？既应用程序中不同功能的容器。在AngularJS中，我们可以按业务功能的不同将实现划分为不同的模块，这些模块可以在一个JS文件中，也可以将它们放在不同的JS文件中，既一个JS文件为一个模块。

AngularJS模块化的优势

  1. 可以使我们的代码结构非常清晰，有较好的可读性。
  2. 可以使我们复用代码。
  3. 在前端编程中，我们都知道JS的引用顺序是很重要的，但使用AngularJS的模块时我们不需要关系每个模块之间的顺序。
  4. 可以很好的实现单元测试。

AngularJS定义模块

定义一个模块很简单，在JS文件中申明一个模块

var mianModule = angular.module("mianModule", []);

使用AngularJS的module方法申明一个模块，该方法有两个参数：

  1. 第一个参数为模块名称。
  2. 第二个参数为一个数组，该参数的含义为当前定义的模块所依赖的模块，如果有依赖模块则传入包含模块名称的数组，若无依赖则传入空数组。

使用AngularJS的模块

在了解如何使用定义好的模块之前，需要先清楚在AngularJS中，模块与模块之间可以是相互独立，老死不相往来的关系，也可以是依赖关系，并且可以是嵌套依赖关系：

// modules.js
// 互相独立的模块
var mainModule = angular.module("mainModule", []);
var anotherModule = angular.module("anotherModule", []);
// modules.js
// 有依赖关系的模块
var mainModule = angular.module("mainModule", ["secondModule"]);
var secondModule = angular.module("secondModule", ["thirdModule"]);
var thirdModule = angular.module("thirdModule", []);

在AngularJS中使用定义好的模块也有两种方式，对应两种不同的应用场景。

ngApp的方式

这种方式是AngularJS团队比较推荐的使用方法，只需要在HTML标签中使用AngularJS的ng-app指令指定要使用的模块既可，一般指定的是应用的主模块，或者说是应用入口模块：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo for Module</title>
    <script src="../angular-1.5.8.js"></script>
    <script src="modules.js"></script>
  </head>
  <body ng-app="mainModule">
  </body>
</html>

ng-app指令的含义类似Java中的main方法，是当前页面中应用的唯一主入口，所以一个页面中只能使用一次np-app指令。将ng-app指令定义在哪个HTML的标签中就表示该标签及它的所有子标签就会被AngularJS接管，这一部分HTML代码将可以使用AngularJS所有的功能和特性，也就是使用AngularJS开发的Web应用的主入口。通常情况下都会在body标签中使用ng-app指令。

因为使用这种方式只能指定一个应用入口模块，所以为了能使用多模块的特性，就需要抽象出一个主模块，然后将其他所有模块加入主模块的依赖关系中，这里要注意的是因为AngularJS中的模块依赖可以向下穿透，类似类的继承，所以加入主模块依赖关系中的模块并不是所有的模块，而只是处于依赖层级顶层的模块。
AngularJS的依赖层级关系

如上图所示，在主模块中只需要添加DataHandleModule和NetworkModule两个模块既可。但是这种方式的弊端是在HTML页面中并不能直观的表现出页面的哪些部分使用了何种模块，而且本身提供了模块化的特性，但最终又要抽象到一个模块中去使用，始终有点不是很舒服。

手动加载方式

虽然使用ng-app的形式可以满足需求，但是还要考虑想抽象出主模块，然后依赖一大堆模块，如果更希望可以在HTML标签中指定使用的模块，此时就需要手动的加载模块了:

// modules.js
// 互相独立的模块
var mainModule = angular.module("mainModule", []);
var anotherModule = angular.module("anotherModule", []);
angular.element(document).ready(function() {
  var myDiv1 = document.getElementById("myDiv1");
  angular.bootstrap(myDiv1, ["mainModule"]);
  var myDiv2 = document.getElementById("myDiv2");
  angular.bootstrap(myDiv2, ["anotherModule"]);
});
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo for Module</title>
    <script src="../angular-1.5.8.js"></script>
    <script src="modules.js"></script>
  </head>
  <body>
    <div id="">
    </div>
    <div id="xttblog">
    </div>
  </body>
</html>

通过上述代码可以看到，我们可以使用AngularJS的bootstrap方法给HTML元素指定模块。这样感觉和模块化特性更加切合，模块的隔离性也比较好，但是这种方式依然有显著的弊端。首先从HTML页面中依然不能直观的看到模块在页面中使用和分布情况，再次这种方式将视图层的HTML代码与JS代码耦合在了一起，也有点违背了AngularJS的MVC设计模式，也许这也是AngularJS不推荐该方式的原因之一吧。

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

AngularJS入门教程(一)特性和模块

： » AngularJS入门教程(一)特性和模块

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

赞 (0)
0
上一篇 2022年5月2日
下一篇 2022年5月2日

相关推荐

发表回复

登录后才能评论