AngularJS 模块详解及简单实例


Posted in Javascript onJuly 28, 2016

AngularJS 模块

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

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

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

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

创建模块

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

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

<script>

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

</script>

"myApp" 参数对应执行应用的 HTML 元素。

现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。

添加控制器

你可以使用 ng-controller 指令来添加应用的控制器:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

</body>
</html>

 运行效果:

 John Doe

 你可以在 AngularJS 控制器 章节学到更多关于控制器的知识。

添加指令

AngularJS 提供了很多内置的指令,你可以使用它们来为你的应用添加功能。

完整的指令内容可以参阅 AngularJS 参考手册。

此外,你可以使用模块来为你应用添加自己的指令:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<script>

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

app.directive("runoobDirective", function() {
 return {
  template : "我在指令构造器中创建!"
 };
});
</script>

</body>
</html>

 运行结果:

           我在指令构造器中创建! 

 你可以在 AngularJS 指令 章节学到更多关于指令的知识。

模块和控制器包含在 JS 文件中

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

在以下实例中, "myApp.js" 包含了应用模块的定义程序, "myCtrl.js" 文件包含了控制器:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

 运行结果:

  John Doe

 myApp.js

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

Note 在模块定义中 [] 参数用于定义模块的依赖关系。

中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。

myCtrl.js

app.controller("myCtrl", function($scope) {
 $scope.firstName	= "John";
 $scope.lastName= "Doe";
});

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

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

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

什么时候载入库?

 注意:在我们的实例中,所有 AngularJS 库都在 HTML 文档的头部载入。

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

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

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

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

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

</body>
</html>

 运行结果:

John Doe

以上就是对AngularJS 模块资料的整理,后续继续补充,希望能帮助编程的朋友。

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
jQuery制作网页版选项卡
Jul 28 #Javascript
AngularJS 中的事件详解
Jul 28 #Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 #Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 #Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 #Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 #Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 #Javascript
You might like
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
Javascript实现的分页函数
2007/02/07 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
js document.write()使用介绍
2014/02/21 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python运算符重载用法实例
2015/05/28 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
django Admin文档生成器使用详解
2019/07/22 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
高中的自我鉴定
2013/12/16 职场文书
学前教育专业求职信
2014/09/02 职场文书
股指期货心得体会
2014/09/10 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
世界遗产导游词
2015/02/13 职场文书
学术会议通知
2015/04/15 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android