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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
转一个日期输入控件,支持FF
Apr 27 Javascript
我见过最全的个人js加解密功能页面
Dec 12 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 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
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
Exjs 入门篇
2010/04/07 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
jquery easyui使用心得
2014/07/07 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
原生js开发的日历插件
2017/02/04 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
浅谈function(函数)中的动态参数
2017/04/30 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python Selenium参数配置方法解析
2020/01/19 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
入团者的自我评价分享
2013/12/02 职场文书
产品销售员岗位职责
2013/12/18 职场文书
竞职演讲稿范文
2014/01/11 职场文书
年终总结会议主持词
2014/03/17 职场文书
梅花魂教学反思
2014/04/25 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers