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. js计算在线时长

    后台传来毫秒,前台转换成对应的时分秒 //在线时长 function longTime(seconds){ //总秒数 //seconds=seconds/1000; //得到小时 var hour ...

  2. HDU 5898 odd-even number (数位DP) -2016 ICPC沈阳赛区网络赛

    题目链接 题意:一个数字,它每个数位上的奇数都形成偶数长度的段,偶数位都形成奇数长度的段他就是好的.问[L , R]的好数个数. 题解:裸的数位dp, 从高到低考虑每个数位, 状态里存下到当前位为止的 ...

  3. 当你的IIS需要运行ASP网站时,需要这样配置下你的IIS

    1.进入Windows 7的 控制面板->程序和功能->选择左上角的 打开或关闭Windows功能 2.现在出现了安装Windows功能的选项菜单,注意选择的项目,红色箭头所示的地方都要选 ...

  4. iOS 开发多线程篇—GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

  5. 检查Android系统版本

    <script type="text/javascript"> $(function(){ var userAgent = navigator.userAgent; v ...

  6. 【转】C++多态性

    ----转自http://blog.csdn.net/hackbuteer1/article/details/7475622 C++编程语言是一款应用广泛,支持多种程序设计的计算机编程语言.我们今天就 ...

  7. Hadoop组件之-HDFS(HA实现细节)

    NameNode 高可用整体架构概述 在 Hadoop 1.0 时代,Hadoop 的两大核心组件 HDFS NameNode 和 JobTracker 都存在着单点问题,这其中以 NameNode ...

  8. cascade 介绍与用法 ( oracle)

    级联删除,比如你删除某个表的时候后面加这个关键字,会在删除这个表的同时删除和该表有关系的其他对象 1.级联删除表中的信息,当表A中的字段引用了表B中的字段时,一旦删除B中该字段的信息,表A的信息也自动 ...

  9. C#4.0图解教程 - 第24章 反射和特性 – 2.特性

    1.特性 定义 Attribute用来对类.属性.方法等标注额外的信息,贴一个标签(附着物) 通俗:给 类 或 类成员 贴一个标签,就像航空部为你的行李贴一个标签一样 注意,特性 是 类 和 类的成员 ...

  10. SQL 参数,传入参数和自己申明参数——异常抛出

    ALTER PROCEDURE [dbo].[OA_RemoveProject] @Password nvarchar(30), --这是传入的参数 @ProjectNo nvarchar(8) AS ...