1.模块定义了一个应用程序；模块是应用程序中不同部分的容器；模块是应用控制器的容器；控制器通常属于一个模块

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

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

<script>

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

</script>

3.添加控制器：可以使用ng-controller指令来添加应用的控制器：

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

4.添加指令：AngularJS提供了很多内置的指令，你可以使用它们来为你的应用添加功能；

<div ng-app="myApp" runoob-directive></div>

<script>

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

app.directive("runoobDirective",function(){

　　return{

　　　　template:"我在指令构造器中创建！"

　　};

});

</script>

5.模块和控制器包含在JS文件中：通常AngularJS应用程序将模块和控制器包含在JavaScript文件中

<!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>   //"myApp.js"包含了应用模块的定义程序

<script src="myCtrl.js"></script>   //"myCtrl.js"文件包含了控制器

</body>

</html>

6.函数会影响到全局命名空间：

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

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

**对于HTML应用程序，通常建议把所有的脚本都放置在<body>元素的最底部，这会提高网页加载速度，因为HTML加载不受制于脚本加载；

**AngularJS在<head>元素中被加载，因为对angular.module的调用只能在库加载完成后才能进行；

AngularJS学习之模块的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS 系列 02 - 模块

    引导目录: AngularJS 系列 学习笔记 目录篇 前言: 其实,在上篇文章介绍数据绑定的时候,我们的HelloWorld的代码案例中就已经使用了模块(module).哈哈. 本篇就着重介绍一下a ...

  3. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  4. AngularJS学习笔记之依赖注入

    最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不 ...

  5. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  6. AngularJs学习笔记-AngularJS权威教程学习笔记

    AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...

  7. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  8. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  9. AngularJs学习笔记--Modules

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...

随机推荐

  1. 【leetcode】Repeated DNA Sequences（middle）★

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  2. poj 3735 Training little cats 矩阵快速幂+稀疏矩阵乘法优化

    题目链接 题意:有n个猫,开始的时候每个猫都没有坚果,进行k次操作,g x表示给第x个猫一个坚果,e x表示第x个猫吃掉所有坚果,s x y表示第x个猫和第y个猫交换所有坚果,将k次操作重复进行m轮, ...

  3. windows系统查看80端口被占用的程序并结束该程序运行

    一.背景 最近系统更新以后,我在Idea中适用80端口启动项目的时候发现80端口被占用了,就查了资料看怎么找到占用80端口的程序并结束其运行,下面把解决方式共享给大家. 二.解决步骤 1.首先打开控制 ...

  4. 在CMD窗口中使用javac和java命令进行编译和执行带有包名的具有继承关系的类

    一.背景 最近在使用记事本编写带有包名并且有继承关系的java代码并运行时发现出现了很多错误,经过努力一一被解决,今天我们来看一下会遇见哪些问题,并给出解决办法. 二.测试过程 1.父类代码 pack ...

  5. HTML标记之a标签

    一.a标签的语法 <a href=”链接目标地址” title=”注释” target=”打开链接窗口的形式”>链接显示内容</a> target值: _blank在新窗口中打 ...

  6. 在VC中创建并调用DLL

    转自:http://express.ruanko.com/ruanko-express_45/technologyexchange6.html 一.DLL简介 1.什么是DLL? 动态链接库英文为DL ...

  7. Python--set常用操作函数

    python提供了常用的数据结构,其中之一就是set,python中的set是不支持索引的.值不能重复.无需插入的容器. 简单记录下set常用的操作函数: 1.新建一个set: set("H ...

  8. c++中有些重载运算符为什么要返回引用

    事实上,我们的重载运算符返回void.返回对象本身.返回对象引用都是可以的,并不是说一定要返回一个引用,只不过在不同的情况下需要不同的返回值. 那么什么情况下要返回对象的引用呢? 原因有两个: 允许进 ...

  9. 对于类的双重调用的demo

    代码如下: package cao.com.duixiang; public class TestCCircle { public static void main(String[] args) { ...

  10. JS判断IE版本并在页面显示内容

    <script type="text/javascript"> var isIE = function (ver) { var b = document.createE ...