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  Error 对象 错误处理
May 18 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
Express的路由详解
Dec 10 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
详解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数组一对一替换实现代码
2012/08/31 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JavaScript字符串对象
2017/01/14 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
SVG描边动画
2017/02/23 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python中的yield from语法快速学习
2020/11/06 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
中级会计职业生涯规划范文
2014/01/16 职场文书
父亲节活动策划方案
2014/08/24 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
ipad隐藏软件app图标方法
2022/04/19 数码科技