Angular 结合RequireJs实现模块化开发
angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发。
模块化关系图:
传统开发方式
<!--aaa模块--> <div> <h3>this is aaa</h3> <input type="text" ng-model="asd">{{asd}} <button ng-click="submit()">submit</button> </div> <!--bbb模块--> <div> <h3>this is bbb</h3> <ul> <li ng-repeat="el in list">{{el}}</li> </ul> <!--ccc模块--> <div> <h3>this is ccc</h3> </div> </div>
把所有模块写在一起,可读性差,耦合度高,难以维护。
requires+angular模块化开发方式
index.html:
<aaa></aaa> <bbb> <ccc></ccc> </bbb>
主页面干干净净。
aaa
aaa模块包括aaa.js和aaa.html
aaa.html
<div> <h3>this is aaa</h3> <input type="text" ng-model="asd">{{asd}} <button ng-click="submit()">submit</button> </div>
aaa.js(引入aaa.html,放入模板中,在link中写业务逻辑,service是用来通信的)
define(['app','text!./aaa.html'],function(app,aaa){ app.directive("aaa", function(service) { return { restrict: 'AE', template: aaa, replace: true, scope:true, link:function(scope,element,attrs){ scope.submit=function() { service.updateName(scope.asd); }; } } }); });
封装在一个文件夹里面,随时调用复用:
require(['./aaa/aaa'])即可调用aaa模块;
bbb
bbb模块也是两个文件:
bbb.html
<div> <h3>this is bbb</h3> <ul> <li ng-repeat="el in list">{{el}}</li> </ul> <div ng-transclude></div> </div>
bbb.js
define(['app','text!./bbb.html'],function(app,bbb){ app.directive('bbb',function(service){ return{ restrict:'AE', template:bbb, replace:'true', scope:true, transclude:true, link: function (scope,element,attrs) { scope.list=[1,2,3,4]; scope.$on('nameUpdated', function() { scope.list.push(service.name); }); } } }); });
bbb可以和aaa模块通过service通信,bbb还包含ccc(通过transclude嵌入)
ccc
ccc模块也是两个文件:
ccc.html
<div> <h3>this is ccc</h3> </div>
ccc.js
define(['app','text!./ccc.html'],function(app,ccc){ app.directive('ccc',function(){ return{ restrict:'AE', template:ccc, replace:'true', scope:true, link: function (scope,element,attrs) { } } }); });
三个模块解耦后,很好维护,因为一个文件的代码量不会超过20行,而且还便于复用。可以称为组件式开发。不要小看这个例子,并非玩玩而已,而是真正的工程化开发思路!
最后一起调用(只调用了aaa,bbb,ccc已经在bbb里调用过了),并启动app:
require(['angular','./aaa/aaa','./bbb/bbb','./ccc/ccc','service'],function(angular){ angular.bootstrap(document,['app']); });
最后看下总体目录:
Angular 结合RequireJs实现模块化开发的更多相关文章
- 在Html中使用Requirejs进行模块化开发
在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Re ...
- 使用requireJs进行模块化开发
requireJs使用 requireJs 使用require.js的第一步,是先去官方网站下载最新版本. 下载后,假定把它放在js子目录下面,就可以加载了. <script src=" ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- 【模块化开发】------requireJS的基本使用------【巷子】
前言 为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 虽然代码的复用度提升了,但是缺点也体现了出来 缺点: ...
- 模块化开发RequireJS之shim配置
一.shim requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置. shim配置语法为: //配置文件 requirejs.confi ...
- 使用requirejs模块化开发多页面一个入口js的使用方式
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
- 模块化开发(requireJS)
模块化 在前端使用模块化开发,可以将代码根据功能实施模块的划分,每个模块功能(职责)单一,在需要更改对应的功能的时候,只需要对指定的模块进行修改,其他模块不受任何影响. 为什么要进行前端模块化? 达到 ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
随机推荐
- HOW TO RUN A SPRINT PLANNING MEETING (THE WAY I LIKE IT)
This is a sample agenda for a sprint planning meeting. Depending on your context you will have to ch ...
- 前端页面开发,最低兼容IE 8的多设备跨平台问题解决!
项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式 ...
- Java json串生成及转bean
package com; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import j ...
- Java的书写格式,标识符及命名规则,注释
Java的书写格式,标识符及命名规则,注释 1.Java语言的书写格式(约定成俗) 1) 大括号要对齐(左大括号与句尾对其,后面大括号与句头对齐),并且成对写 2) 左大括号前面有空格 3) 遇到左大 ...
- VB.net 2010 AndAlso,OrElse和And,Or的区别
'************************************************************************* '**模 块 名:VB.net 2010 AndA ...
- 学习笔记:Hashtable和HashMap
学了这么些天的基础知识发现自己还是个门外汗,难怪自己一直混的不怎么样.但这样的恶补不知道有没有用,是不是过段时间这些知识又忘了呢?这些知识平时的工作好像都是随拿随用的,也并不是平时一点没有关注过这些基 ...
- CYQ.Data V5 数据库读写分离功能介绍
前言 好多年没写关于此框架的新功能的介绍了,这些年一直在默默地更新,从Nuget上的记录就可以看出来: 这几天在看Java的一些东西,除了觉的Java和.NET的相似度实在太高之外,就是Java太原始 ...
- ABP理论学习之日志记录
返回总目录 本篇目录 服务端 获取Logger 基类中的Logger 配置 客户端 服务端 ABP使用的是Castle Windsor的日志记录设备.它可以和不同的日志类库一起工作,比如Log4Net ...
- Async All the Way
Asynchronous code reminds me of the story of a fellow who mentioned that the world was suspended in ...
- JavaScript面向对象之我见
序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些 ...