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. pygame_polygon

    今天我们要在窗口上绘制简单的多边形 1.认识几个简单的常用的颜色: black=(0,0,0) while=(255,255,255) red=(255,0,0) green=(0,255,0) bl ...

  2. 为什么ABAP开发者需要使用面向对象技术？

    ABAP对面向对象的支持已有十多年的历史,然而在生产实践中,我们对这门技术的应用十分有限. 一方面,面向过程的惯性长期存在着:另一方面,对于大部分二次开发工作而言,似乎并没有足够的理由促使开发者使用面 ...

  3. SQLserver2008r2安装过程

    首先,下载SQLserver2008的安装包,下载完成打开是以下界面 点击开始安装,随着安装进程,点下一步 . 接着来到设置角色的过程,点击SQL功能安装 然后按下一步,来到功能选择,点击" ...

  4. JS双击div编辑文本内容

    HTML代码: <div class="album"> <div class="image"><a href="java ...

  5. C#仪器数据文件解析-XPS文件

    XPS为微软推出的类似于Adobe PDF的一种文件格式,个人认为XPS很好,但毕竟PDF已经被大家所熟知,因此XPS的使用很少,也少有仪器数据输出为该格式. XPS百度百科:https://baik ...

  6. DataRow和DataRowView的区别

    可以将DataView同数据库的视图类比,不过有点不同,数据库的视图可以跨表建立视图,DataView则只能对某一个DataTable建立视图. DataView一般通过DataTable.Defau ...

  7. Echarts数据可视化series-map地图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. 从零开始搭建框架SSM+Redis+Mysql（二）之MAVEN项目搭建

    从零开始搭建框架SSM+Redis+Mysql(二)之MAVEN项目搭建 废话不说,直接撸步骤!!! 1.创建主项目:ncc-parent 选择maven创建项目,注意在创建项目中,packing选择 ...

  9. 安装xp遇到的问题与如何连接共享的打印机

    2013-12-5 星期四 今天下午去给曹老师鼓捣电脑去了,安装了一个xp系统,加上一些常用的办公软件,在连接上一个共享的打印机. 下面是今天我遇到的问题: 问题:安装xp系统之后,没有本地连接,只有 ...

  10. javaScript 设计模式系列之四：组合模式

    介绍 组合模式(Composite Pattern):组合多个对象形成树形结构以表示具有"整体-部分"关系的层次结构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用 ...