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. SpringBoot中使用spring-data-jpa 数据库操作(下)

  2. vue中sync，v-model----双向数据绑定

    需求:父子组件同步数据 实现方式:sync或者v-model 一.sync 官网:https://cn.vuejs.org/v2/guide/components-custom-events.html ...

  3. 题解报告：hdu 1698 Just a Hook（线段树区间修改+lazy懒标记的运用）

    Problem Description In the game of DotA, Pudge’s meat hook is actually the most horrible thing for m ...

  4. 列表框、分组列表框、标签（label）、分组框（fieldset）、框架(frameset)

    列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...

  5. 263 Ugly Number 丑数

    编写程序判断给定的数是否为丑数.丑数就是只包含质因子 2, 3, 5 的正整数.例如, 6, 8 是丑数,而 14 不是,因为它包含了另外一个质因子 7.注意:    1 也可以被当做丑数.    输 ...

  6. Jax

    The scope of this project is to automate the current Credit Correction process of opening, editing, ...

  7. Objective-C设计模式——生成器Builder（对象创建）

    生成器 生成器,也成为建造者模式,同样是创建对象时的设计模式.该模式下有一个Director(指挥者),客户端知道该类引用用来创建产品.还有一个Builder(建造者),建造者知道具体创建对象的细节. ...

  8. C#随机取部分数据

    1.使用Random伪随机生成器 但是这样会由于转换为数组类型导致性能下降,千万要避免这种用法. 2.使用Take返回重头开始指定数量的连续元素 每次进来这个方法的时候,都使用Guid进行一次排序,然 ...

  9. Android 新闻app的顶部导航栏，怎么实现动态加载？

    TabLayout + viewpager 其中viewpager的适配器要继承FragmentPagerAdapter,要实现动态更新,最主要的是适配器的写法,要在数据发生变化之后清除Fragmen ...

  10. 了解Selenium与自动化测试第一天“云里雾里”

    以前没有搭建过Selenium自动化功能测试环境,想象中就像QTP一样,集成IDE一般简单快捷. 昨天通过博客园的一篇博友日志,才开始大概认识到Selenium的工作方式与特征: 1.插件般与浏览器结 ...