AngularJS学习之模块
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学习之模块的更多相关文章
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- AngularJS 系列 02 - 模块
引导目录: AngularJS 系列 学习笔记 目录篇 前言: 其实,在上篇文章介绍数据绑定的时候,我们的HelloWorld的代码案例中就已经使用了模块(module).哈哈. 本篇就着重介绍一下a ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- AngularJS学习笔记之依赖注入
最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不 ...
- AngularJs学习总结－了解基本特性（－）
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...
- AngularJs学习笔记-AngularJS权威教程学习笔记
AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Modules
原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...
随机推荐
- Divide and Conquer:Monthly Expense(POJ 3273)
Monthly Expense 题目大意:不废话,最小化最大值 还是直接套模板,不过这次要注意,是最小化最大值,而不是最大化最小值,判断的时候要注意 联动3258 #include <iostr ...
- Silverlight动画之 Animation Easing
使用Animation Easing函数可以创造出更具有动感的动画.对比下面两个动画. 普通线性动画: <Storyboard x:Name="growStoryboard" ...
- jquery 中的一写常用方法
$('form').submit(); // 表单提交 window.parent.location.reload(); // 子窗口刷新父页面 window.location.reload(); / ...
- bootstrap弹出提示窗口功能
大家常用弹出提示成功或失败时候喜欢用alert,如果不用这个,写个弹窗又麻烦,bootstrap中就有个方法 alert("操作成功"); commonAlert("操作 ...
- rsync使用
1)拷贝本地文件.当SRC和DES路径信息都不包含有单个冒号":"分隔符时就启动这种工作模式. 如:rsync -a ./test.c /backup 2)使用一个远程 ...
- php数据访问（批量删除）
批量删除: 首先给每一行加上复选框,也就是在自增长列内加入checkbox.因为这里可以多选,也可以单选,所以在传值的时候需要传一个数组来进行处理,所以复选框name的值设定一个数组.传值都是传的va ...
- $(inherited) "$(SRCROOT) 修改.a文件的路径 --Library Search Paths
$(inherited) "$(SRCROOT)/.a文件所在的文件名" //如果有多个.a文件格式就像这样 $(inherited) "$(SRCROOT)/xxxx& ...
- [Android Pro] app_process command in Android
reference to : http://blog.csdn.net/wangkaiblog/article/details/46050587 本来以为存放在/systen/bin/下的monkey ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（九） 之 用 Redis 实现用户在线离线状态消息处理（一）
前言 上一篇中简单讲解了用Redis缓存在线用户逻辑.篇幅也比较小,本篇将详细实现用户的上线下线通知.图片效果转换功能.而且,代码和开发思路都会详细介绍. 效果展示 目前有三个用户,user1,use ...
- cf118A(水题)
题意就是讲给出的字符串元音字母去掉,在每个辅音字母前加点,且小写输出...注意y也要去掉(以我英语挂科的水平也知道y是辅音字母)... 水题.. 直接上代码好了... #include <ios ...