AngularJS 模块

模块定义了一个应用程序。

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

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

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

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块:

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []); 

</script>

注意:模块的定义[]是定义模块之间依赖关系,中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字

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

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

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

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

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

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

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

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

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body> <div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div> <script src="myApp.js"></script>
<script src="myCtrl.js"></script> </body>
</html>
//myApp.js
var app = angular.module("myApp", []);
//myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});

AngularJS学习篇(十五)的更多相关文章

  1. AngularJS学习篇(五)

    AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope ...

  2. python3.4学习笔记(十五) 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)

    python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...

  3. 201671010140. 2016-2017-2 《Java程序设计》java学习第十五周

    java学习第十五周 Java的GUI界面设计,框架以及主要部件填充,归置,布局管理,在第十一章和第十二章进行了系统的学习,在这两章的知识奠基下,可以简单的构造一个GUI用户界面,在两周的学习后,可以 ...

  4. 学习笔记:CentOS7学习之十五: RAID磁盘阵列的原理与搭建

    目录 学习笔记:CentOS7学习之十五: RAID磁盘阵列的原理与搭建 14.1 RAID概念 14.1.1 RAID几种常见的类型 14.1.2 RAID-0工作原理 14.1.3 RAID-1工 ...

  5. 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录

    风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...

  6. (C/C++学习笔记) 十五. 构造数据类型

    十五. 构造数据类型 ● 构造数据类型概念 Structured data types 构造数据类型 结构体(structure), 联合体/共用体 (union), 枚举类型(enumeration ...

  7. AngularJS学习篇(二十四)

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  8. AngularJS学习篇(二十二)

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  9. AngularJS学习篇(二十)

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

随机推荐

  1. 接口interface,接口继承implements

    php中,只支持从一个类继承,不支持从两个或者更多的类同时继承.从两个或者两个以上的类继承的能力被称为多重继承.php在设计上是禁止这种功能的.原因在于,避免多个类带来的复杂性.当发现需要从两个或者更 ...

  2. Redis学习——redis.conf 配置文件介绍

    学以致用 学在用前 参看文章: redis.conf 配置详解 Redis配置文件详解(redis.conf)-云栖社区 在Redis的使用过程,除了知道对Redis五种数据类型的操作方法之外,最主要 ...

  3. U盘中毒无限蓝屏重启的解决办法

    开门见山,这个帖子只针对U盘中毒导致的以下两种症状: 1.win10系统无法进入并且要求初始化,卸载所有第三方应用 2.win7系统无限蓝屏重启): 其他的硬件故障不在本次讨论范围之内. 说明以下.上 ...

  4. 和团队齐头并进——敏捷软件开发的Scrum的学习

    敏捷开发的介绍 概念 更强调程序员团队与业务专家之间的紧密协作.面对面的沟通(认为比书面的文档更有效).频繁交付新的软件版本.紧凑而自我组织型的团队.能够很好地适应需求变化的代码编写和团队组织方法,也 ...

  5. Python接口自动化——soap协议传参的类型是ns0类型的要创建工厂方法纪要

    1:在Python接口自动化中,对于soap协议的xml的请求我们可以使用Suds Client来实现,其soap协议传参的类型基本上是有2种: 第一种是传参,不需要再创建啥, 第二种就是ns0类型的 ...

  6. PHP字符串替换str_replace()函数4种用法详解

    mixed str_replace ( mixed $search , mixed $replace , mixed $subject [, int &$count ] )该函数返回一个字符串 ...

  7. 编写 WPF DataGrid 列模板,实现更好的用户体验

    Julie Lerman 下载代码示例 最近我在为一个客户做一些 Windows Presentation Foundation (WPF) 方面的工作. 虽然我提倡使用第三方工具,但有时也会避免使用 ...

  8. 使用Olami SDK 语音控制一个支持HomeKit的智能家居的iOS程序

    前言 HomeKit是苹果发布的智能家居平台.通过HomeKit组件,用户可以通过iphone.iPad和ipod Touch来控制智能灯泡,风扇.空调等支持HomeKit的智能家居,尤其是可以通过S ...

  9. (@WhiteTaken)设计模式学习——观察者模式

    忙里抽闲,继续学习设计模式,作为自己的读书笔记,这次介绍Java下实现的观察者模式. 观察模式需要了解的三个概念: 被观察者:被观察的对象,发生变化会通知观察者集合(存放观察者的容器) 观察者:有up ...

  10. 通过xrdp服务实现windows远程桌面连接树莓派

    如题:通过xrdp服务实现windows远程桌面连接树莓派 受同学影响,最近接触到了树莓派,又加上自己技痒想试一下这个小东西究竟能做什么,所以开始了树莓派学习之旅. 正题开始-xrdp实现window ...