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中document.write使用过程中的一点疑问解答
Mar 20 Javascript
javascript读写json示例
Apr 11 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
elementui实现预览图片组件二次封装
Dec 29 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
php缓存技术介绍
2006/11/25 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Django进阶之CSRF的解决
2018/08/01 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
市场总经理岗位职责
2014/04/11 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
高中生逃课检讨书
2014/10/10 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
匿名检举信范文
2015/03/02 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python