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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
安装vue-cli的简易过程
May 22 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
JS删除对象中某一属性案例详解
Sep 08 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
python协程用法实例分析
2015/06/04 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
python适合做数据挖掘吗
2020/06/16 Python
如何在pycharm中安装第三方包
2020/10/27 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
理货员的岗位职责
2013/11/23 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
优秀党员获奖感言
2014/02/18 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
教师党员承诺书2015
2015/01/21 职场文书
门卫岗位职责
2015/02/09 职场文书
院系推荐意见
2015/06/05 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
sass 常用备忘案例详解
2021/09/15 HTML / CSS
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript