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实现tab标签浏览效果
Feb 20 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
Javascript Web Worker使用过程解析
Mar 16 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 移除数组重复元素的一点说明
2008/11/27 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
python实现感知器
2017/12/19 Python
pygame实现简易飞机大战
2018/09/11 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python实现简单学生信息管理系统
2020/04/09 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
任意存:BOXFUL
2018/05/21 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
年终考核实施方案
2014/05/26 职场文书
市场督导岗位职责
2015/04/10 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
教师节班会开场白
2015/06/01 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js