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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
原生JS实现留言板
Mar 26 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 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
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中去空格函数的用法
2014/08/21 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
程序员岗位职责
2013/11/11 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
工作收入证明模板
2014/10/10 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
python_tkinter事件类型详情
2022/03/20 Python