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. Linux学习之01_基础命令介绍

    初学Linux,还在摸索中,在这个过程中希望能记录下学习到的东西,参考的的书籍为<鸟哥的Linux私房菜> 在这里学到的主要命令有这几个: data cal bc man shutdown ...

  2. ElementaryOS 0.4快速配置工具

    使用方法: 终端执行 wget http://linux-1251056822.costj.myqcloud.com/elementary_config && bash element ...

  3. linux学习之路1 Linux系统安装

    VMware workstation虚拟器 网上下载VMware workstation,然后安装任一系统的linux系统,不过选的系统一定要跟你下载好的linux镜像保持一致,博主装的是Red Ha ...

  4. 状态压缩+枚举 POJ 3279 Fliptile

    题目传送门 /* 题意:问最少翻转几次使得棋子都变白,输出翻转的位置 状态压缩+枚举:和之前UVA_11464差不多,枚举第一行,可以从上一行的状态知道当前是否必须翻转 */ #include < ...

  5. 锚点、target="page1"、浮标回到顶部(该点未实现，能力不足)

    <html> <head> <meta charset="utf-8"> <title>链接</title> <! ...

  6. Visual Studio 生成项目时脚本执行

    项目属性 - 生成事件 项目生成前:预先生成事件命令行: 项目生成后:后期生成事件命令行:例:copy $(ProjectDir)Reference\sms_cfg.ini $(TargetDir) ...

  7. SQL Split函数，将一串字符串返回成table

    写法一: CREATE FUNCTION [dbo].[Split] ( @str VARCHAR(MAX), --传进来的字符串 ) --分割符 ) RETURNS @t TABLE --定义一个虚 ...

  8. Scala-基础-运算符

    import junit.framework.TestCase /** * 运算符 */ class Demo3 extends TestCase { def test_+ { var x = 10; ...

  9. 【C++】智能指针简述(二):auto_ptr

    首先,我要声明auto_ptr是一个坑!auto_ptr是一个坑!auto_ptr是一个坑!重要的事情说三遍!!! 通过上文,我们知道智能指针通过对象管理指针,在构造对象时完成资源的分配及初始化,在析 ...

  10. CommHelper

    18位流水号: public static string GenerateTransId(int i) { string transId = DateTime.Now.ToString("y ...