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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
完善的jquery处理机制
Feb 21 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
Vue实现剪切板图片压缩功能
Feb 04 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
yii上传文件或图片实例
2014/04/01 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
详解javascript void(0)
2020/07/13 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Python中list初始化方法示例
2016/09/18 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
给分销商的致歉信
2014/01/14 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
计算机实训报告范文
2014/11/05 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
党支部考察意见范文
2015/06/02 职场文书
地球上的星星观后感
2015/06/02 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技