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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
JS实现打砖块游戏
Feb 14 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python optparse模块使用实例
2015/04/09 Python
python实现感知器
2017/12/19 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python str字符串转uuid实例
2020/03/03 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
大学生创业计划书的用途
2014/01/08 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
党风廉设责任书
2014/04/16 职场文书
银行求职自荐书
2014/06/25 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
《童年的发现》教学反思
2016/02/18 职场文书