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. JS浮点数精度运算

    一般来讲,我们在项目中必不可少的需要进行各种数值的计算,但是这种计算全部放在服务端会给服务器带来很大的压力,所以势必要客户端来 分担一些计算的压力. 从客户端来说,JavaScript是一门弱类型语言 ...

  2. java dom4j xml生成,解析

    1. 用Java代码生成xml文档 package com.test.dom; import java.io.FileOutputStream; import java.io.IOException; ...

  3. fread/fwrite实现复制功能

    1.  fread/fwrite实现复制功能 #include <stdio.h> #include <stdlib.h> #define BUFFSIZE 4096 //执行 ...

  4. TCP流量控制与拥塞解决

    滑动窗口 但要提高网络利用率: nagle算法 - 延迟 慢启动.拥塞避免 发送端主导cwnd init  set  ssthresh  &  cwnd = swnd loop : 网不阻塞 ...

  5. Java 8 (9) Optional取代null

    NullPointerException,大家应该都见过.这是Tony Hoare在设计ALGOL W语言时提出的null引用的想法,他的设计初衷是想通过编译器的自动检测机制,确保所有使用引用的地方都 ...

  6. git add . 的时候报错fatal: Unable to create : …File exists.

    报错内容: $ git add . fatal: Unable to create 'E:/project/qbm_cs/.git/index.lock': File exists. Another ...

  7. 个人软件过程（psp）需求分析

    个人软件过程(psp)需求分析 1.  引言 1.1  背景 开发项目进度计划不准确,延期经常出现,甚至无法给出一个比较准确的延迟时间,给市场推广带来很大麻烦. 2.  任务概述 2.1 目标 PSP ...

  8. 在中间层 .NET 应用程序中通过授权管理器使用基于角色的安全

    基于角色的安全是从 Windows NT 的第一个版本开始在 Windows 平台上发展而来的.使用角色,操作系统可以通过检查称为 BUILTIN\Administrators 的组的安全上下文做出一 ...

  9. vs2017 visual studio2017 密钥 激活码

    企业版Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF 专业版Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH

  10. HDU_1021_费布拉切变形

    Fibonacci Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...