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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
javascript中this关键字详解
2016/12/12 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python Requests库基本用法示例
2018/08/20 Python
Python交互式图形编程的实现
2019/07/25 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
枚举与#define宏的区别
2014/04/30 面试题
农村婚礼证婚词
2014/01/08 职场文书
清洁工表扬信
2014/01/08 职场文书
学习自我鉴定
2014/02/01 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
科级干部培训心得体会
2016/01/06 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
python析构函数用法及注意事项
2021/06/22 Python