AngularJS 模块

模块定义了一个应用程序。（魔芋：也就是说一个ng-app代表一个应用程序，也就是一个模块，module）

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

带有控制器的模块

应用("myApp") 带有控制器 ("myCtrl"):

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7. {{ firstName +" "+ lastName }}
  8. </div>
  10. <script>
  11. var app = angular.module("myApp",[]);
  12. app.controller("myCtrl",function($scope){
  13. $scope.firstName ="John";
  14. $scope.lastName ="Doe";
  15. });
  16. </script>
  18. </body>
  19. </html>
 

模块和控制器包含在 JS 文件中

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器：

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7. {{ firstName +" "+ lastName }}
  8. </div>
  10. <script src="myApp.js"></script>
  11. <script src="myCtrl.js"></script>
  13. </body>
  14. </html>
 

myApp.js

  1. var app = angular.module("myApp",[]);
  在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

myCtrl.js

  1. app.controller("myCtrl",function($scope){
  2. $scope.firstName ="John";
  3. $scope.lastName="Doe";
  4. });
 

函数会影响到全局命名空间

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

什么时候载入库?

在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。

对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。

在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。

另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <div ng-app="myApp" ng-controller="myCtrl">
  6. {{ firstName +" "+ lastName }}
  7. </div>
  9. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  10. <script>
  11. var app = angular.module("myApp",[]);
  12. app.controller("myCtrl",function($scope){
  13. $scope.firstName ="John";
  14. $scope.lastName ="Doe";
  15. });
  16. </script>
  18. </body>
  19. </html>
 

【13】AngularJS 模块的更多相关文章

  1. AngularJS 模块& 表单

    模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...

  2. AngularJS 模块

    模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 你可以通过 AngularJS 的 angular.module 函数来创建模块: &l ...

  3. 4.了解AngularJS模块和依赖注入

    1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...

  4. AngularJS模块的详解

    AngularJS模块的详解 在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规 ...

  5. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  6. AngularJS标准Web业务流程开发框架—1.AngularJS模块以及启动分析

    前言: AngularJS中提到模块是自定义的模块标准,提到这不得不说AngularJS是框架中的老大哥,思想相当的前卫..在这框架满天横行的时代,AngularJS有些思想至今未被超越,当然仁者见仁 ...

  7. 在文件中的AngularJS模块

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 在body中的AngularJS模块

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. angularJS——模块

    一.在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,J ...

随机推荐

  1. attr 和 prop的区别和使用

    一. attr和prop的区别 要想弄清楚attr和prop的区别,就要先搞清楚js中使用DOM方法获取设置属性和使用对象方法获取设置属性的区别. 在javascript中使用DOM方法设置获取属性值 ...

  2. 洛谷P3698 [CQOI2017]小Q的棋盘

    传送门 考虑一个贪心,先在根节点周围转一圈,然后再往下走最长链肯定是最优的 然后设最长链的长度为$d$,如果$m\leq d$,那么答案为$m+1$ 否则的话还剩下$m-d+1$步,又得保证能走回来, ...

  3. Visual Studio Code 扩展工具集，记录

    编码 提高效率及校验 Auto Close Tag 自动闭合标签 Auto Rename Tag 自动更改HTML/XML标签,不需要再进行二次修改,减少50%的工作量! Path Intellise ...

  4. ACM_Uppercase（水题）

    Uppercase Time Limit: 2000/1000ms (Java/Others) Problem Description: 给出一句中间无特殊符号的英语句子,要求将各单词的首字母改大写. ...

  5. win7任务计划提示”该任务映像已损坏或已篡改“怎么处理

    https://jingyan.baidu.com/article/e75057f2038e2febc91a8915.html 在命令行窗口(cmd)执行命令:schtasks /query /v   ...

  6. Xml学习笔记（3）利用递归解析Xml文档添加到TreeView中

    利用递归解析Xml文档添加到TreeView中 private void Form1_Load(object sender, EventArgs e) { XmlDocument doc = new ...

  7. Java 8 (4) Stream 流 - 使用

    在本节中将介绍Stream API支持的许多操作,这些操作可以完成更复杂的数据查询,如筛选.切片.映射.查找.匹配和归约.还有一些特殊的流如:数值流.来自文件和数组等多种来源的流. 筛选和切片 1.用 ...

  8. [JavaScript] Uncaught TypeError: Method get Set.prototype.size called on incompatible receiver

    在对Set进行方法扩展的时候,无法覆盖size属性 情景:定义一个SingletonSet,继承自Set,size只能为1,并且不能add和remove //首先是extend函数 var exten ...

  9. Extensions can add new functionality to a type, but they cannot override existing functionality.

    Extensions can add new functionality to a type, but they cannot override existing functionality.

  10. MySQL学习笔记(十二)__连接查询(一)

    连接查询含义:又称多表查询,当查询的字段来自多个表时,就会用到连接查询 笛卡尔乘积现象:表1 有 m 行,表2 有 n 行,结果 = m*n 行发生原因:没有有效的连接条件如何避免:添加有效的连接条件 ...