Angular的模块化(代码分享)


Posted in Javascript onDecember 26, 2016

在前面的几个文章中,我们的数据都是以函数的方式定义在全局的作用域下,这样很显然是不对的,没有模块化的思想,下面的例子介绍Angular的模块化!

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>AngularJs模块化</title>
<script type="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js">
</head>
<body>
<div ng-controller='Aaa'>
  <p>{{name}}</p>
</div>
<div ng-controller='Bbb'>
  <p>{{name}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
//参数1:模块的名字,参数2:当前模块中依赖的模块,後面的文章会介绍
m1.controller('Aaa',function($scope){
  $scope.name = 'hello AngularJs';
});
m1.controller('Bbb',function($scope){
  $scope.name = 'Hi';
});
</script>
</body>
</html>

首先在html上绑定初始化的名称,并附上myApp,使用angular.model在JS中定义多个模块,并附上参数。

再使用控制器定义数据,注意控制器传递的参数,模块名和匿名函数

都知道我们的项目在上线後合并压缩的,这样我们匿名函数传递的形参在压缩後出现问题,所以这个时候我们需要将参数包裹成数组,来避免压缩的问题!

m1.controller('Aaa',['$scope',function($scope){
  $scope.name = 'hello AngularJs';
}]);
m1.controller('Bbb',['$scope',function($scope){
  $scope.name = 'Hi';
}]);

 这个时候注意控制器传递的参数,模块名和数组(包含服务和匿名函数)。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
js实现星星海特效的示例
Sep 28 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
详解Angular的数据显示优化处理
Dec 26 #Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 #Javascript
手动初始化Angular的模块与控制器
Dec 26 #Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 #Javascript
Angular的事件和表单详解
Dec 26 #Javascript
Angular的MVC和作用域
Dec 26 #Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 #Javascript
You might like
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
用Python解决x的n次方问题
2019/02/08 Python
python爬虫要用到的库总结
2020/07/28 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
关于期中考试的反思
2014/02/02 职场文书
大学自我评价
2014/02/12 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
科技活动总结范文
2015/05/11 职场文书
提档介绍信范文
2015/10/22 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL