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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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页面编码的两种方法示例介绍
2014/03/03 PHP
PHP加密解密函数详解
2015/10/28 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Python中字符串与编码示例代码
2019/05/20 Python
python实现的Iou与Giou代码
2020/01/18 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
试用期员工考核制度
2014/01/22 职场文书
假面舞会策划方案
2014/05/29 职场文书
三方股东合作协议书
2014/10/28 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技