AngularJS 应用模块化的使用


Posted in Javascript onApril 04, 2018

一.模块化的好处

(1)实现逻辑更清晰、可读性强;
(2)团队开发分工明确,容易控制;
(3)充分利用可以重用代码;
(4)抽象出可公用的模块,可维护性强;
(5)模块化的遗留系统方便组装开发新的相似系统.

二.AngularJS模块的定义

(1)angular对象的module()使用方法:

// 定义一个无依赖模块
  angular.module('appModule',[]);
  // 定义一个依赖module1、module2的模块
  angular.module('appModule',['module1','module2']);

(2)angular.module()方法:接收三个参数

第一个为模块的名称,第二个是数组,表示模块依赖的模块的名称。如果不需要依赖其他模块,传入空数组即可.第三个参数可选,接收一个方法,用于对模块进行配置,作用和模块实例的config()方法相同.

angular.module()方法返回一个模块实例对象,可以调用该对象的controller()、directive()、filter()等方法向模块中添加控制器、指令、过滤器等其他组件.

(3)页面引用模块:ng-app指令

<html ng-app="appMobile">

三.使用模块解决命名冲突问题

两个页面共用一个js文件,控制器的定义放在common.js中,当两个页面定义的控制器名称相同时就会产生冲突,AngularJS中通过使用模块化来解决命名冲突.调用 angular.module()方法创建两个模块实例,分别调用这两个模块实例的controller()方法创建两个名称相同的控制器,但这两个控制器属于不同的模块.虽然html页面中的控制器名称都是UserController,但是分属于不同的模块,因此避免了冲突.

var loginModule = angular.module("loginModule",[]);
loginModule.controller("UserController",function($scope,$log){
  
  $scope.uname = "login";
  $scope.pword = "admin";
  $scope.submit = function(){
    alert("登录模块: UserController");
  }
  
})

var registerModule = angular.module("registerModule",[]);
registerModule.controller("UserController",function($scope,$log){
  
  $scope.uname = "register";
  $scope.pword = "admin";
  $scope.submit = function(){
    alert("注册模块: UserController");
  }  
})

四.模块化的最佳实践

假设项目名称:app,包含login和register两个模块:

├─app
│ │
│ ├──css---------------CSS样式
│ ├──img---------------图片资源
│ ├──js----------------JS代码  
│ │  common.js // 公共JS代码
│ │
│ ├──modules
│ │  │
│ │  ├─login----------------登录模块
│ │  │  │  
│ │  │  │   loginModule.js----------------登录模块定义
│ │  │  │   
│ │  │  ├─css
│ │  │  ├─js  
│ │  │  │   directives.js
│ │  │  │   filters.js
│ │  │  │   controllers.js----------------控制器定义
│ │  │  │  
│ │  │  │  
│ │  │  └─views  
│ │  │     login.html
│ │  │     
│ │  └──register----------------注册模块  
│ │     │  
│ │     │   registerModule.js----------------注册模块定义
│ │     │   
│ │     ├─css
│ │     ├─js  
│ │     │   directives.js
│ │     │   filters.js
│ │     │   controllers.js----------------控制器定义
│ │     │  
│ │     │  
│ │     └─views  
│ │       register.html
│ │

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery uaMatch源代码
Feb 14 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
原生JS中应该禁止出现的写法
May 05 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 #Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 #Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 #Javascript
vue cli升级webapck4总结
Apr 04 #Javascript
JavaScript实现短暂提示框功能
Apr 04 #Javascript
You might like
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP分页函数代码(简单实用型)
2010/12/02 PHP
php xml 入门学习资料
2011/01/01 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
angular第三方包开发整理(小结)
2018/04/19 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
python热力图实现简单方法
2021/01/29 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
元旦标语大全
2014/10/09 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书