Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > AngularJS入门教程(一)特性和模块

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

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

    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不推荐该方式的原因之一吧。

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

    业余草公众号

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

    本文原文出处：业余草： » AngularJS入门教程(一)特性和模块

    相关文章推荐