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 相关文章推荐
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
Javascript进制转换实例分析
May 14 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
javascript实现移动端轮播图
Dec 09 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
smarty section简介与用法分析
2008/10/03 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
javascript 面向对象继承
2009/11/26 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
行政助理工作职责范本
2014/03/04 职场文书
求职意向书
2014/04/01 职场文书
合作经营协议书范本
2014/04/17 职场文书
教师师德演讲稿
2014/05/06 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
2014个人年度工作总结
2014/12/15 职场文书
督导岗位职责范本
2015/04/10 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
python requests模块的使用示例
2021/04/07 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python