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. 20. Extjs学习笔记——Ext.data.JsonStore使用说明

    Ext.data.JsonStore继承于Ext.data.Store,使得从远程JSON数据创建stores更为方便的简单辅助类.JsonStore合成了Ext.data.HttpProxy与Ext ...

  2. JS判断字符串中是否存在某个字符

    用String类中的indexOf函数,例如:String str="we find out sth";if(str.indexOf("o")==-1){ // ...

  3. 8 种提升ASP.NET Web API性能的方法

    ASP.NET Web API 是非常棒的技术.编写 Web API 十分容易,以致于很多开发者没有在应用程序结构设计上花时间来获得很好的执行性能. 在本文中,我将介绍8项提高 ASP.NET Web ...

  4. 源码阅读之ArrayList（JDK8）

    ArrayList概述 ArrayList是一个的可变数组的实现,实现了所有可选列表操作,并允许包括 null 在内的所有元素.每个ArrayList实例都有一个容量,该容量是指用来存储列表元素的数组 ...

  5. 微信小程序setData的使用，通过[...]进行动态key赋值

    首先先介绍一下微信小程序Page.prototype.setData(Object data, Function callback)的讲解: setData函数用于将数据从逻辑层发送到视图层(异步), ...

  6. post和get区别，其他答案真的太坑

    原理: get和post都是http定义与服务器交互的方法,还有put,delete url是网络上的资源,那么http中的get,post,put,delete对应的就是对这个资源的查,改,增,删四 ...

  7. ASP.Net 知识点总结（五）

    1.传入某个属性的set方法的隐含参数的名称是什么?value,它的类型和属性所声名的类型相同.2.如何在C#中实现继承? 在类名后加上一个冒号,再加上基类的名称.3.C#支持多重继承么? 不支持.可 ...

  8. spring的依赖注入如何降低了耦合

    依赖注入:程序运行过程中,如需另一个对象协作(调用它的方法.访问他的属性时),无须在代码中创建被调用者,而是依赖于外部容器的注入 看过一些比较好的回答 1.一个人(Java实例,调用者)需要一把斧子( ...

  9. Coding Pages 服务与万网域名的配置

    1071220 http://support.huawei.com/learning/NavigationAction!createNavi?navId=MW000001_term1000190292 ...

  10. Python爬虫+颜值打分，5000+图片找到你的Mrs. Right

        一见钟情钟的不是情,是脸 日久生情生的不是脸,是情 项目简介 本项目利用Python爬虫和百度人脸识别API,针对简书交友专栏,爬取用户照片(侵删),并进行打分. 本项目包括以下内容: 图片爬 ...