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中Object和Function的关系的三段简单代码
Jun 27 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
vue 限制input只能输入正数的操作
Aug 05 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函数http_build_query使用详解
2014/08/20 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
js友好的时间返回函数
2016/08/24 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
详解python3实现的web端json通信协议
2016/12/29 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python如何制作缩略图
2019/04/30 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
金融与证券专业求职信
2014/06/22 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript