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实现图片按比例缩放示例
Jul 01 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
vue实现的请求服务器端API接口示例
May 25 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 imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
PHP的PDO连接讲解
2019/01/24 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python内存管理分析
2015/04/08 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
项目专员岗位职责
2013/12/04 职场文书
监理资料员岗位职责
2014/01/03 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
开学季活动策划方案
2014/02/28 职场文书
yy生日主持词
2014/03/20 职场文书
合同协议书格式
2014/04/18 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
执行力心得体会范文
2016/01/11 职场文书
《小小的船》教学反思
2016/02/18 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android