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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP面向对象概念
2011/11/06 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
Angular+Node生成随机数的方法
2017/06/16 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
医学专业职业生涯规划范文
2014/02/05 职场文书
环保志愿者活动总结
2014/06/27 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
秋季运动会开幕词
2015/01/28 职场文书
房贷工资证明范本
2015/06/12 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js