Angular 结合RequireJs实现模块化开发
2024-10-14 16:05:11
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']); });
最后看下总体目录:
最新文章
- iOS中的线程安全问题
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
- SQLAchemy、MYSQL、PYMYSQL
- 【要什么自行车】ASP.NET MVC4笔记01:Asp.net MVC 分页,采用 MvcPager 和CYQ.Data来分页
- C#资源文件与与资源名称字符串之间的互相转化
- adb怎么判断是否有root权限,并更改system/app内容
- iis6配置使用页面Gzip压缩提速
- TCP释放连接时为什么time_wait状态必须等待2MSL时间
- Java小项目--坦克大战(version1.0)
- POJ 1469 ZOJ1140 二分匹配裸题
- Android 使用动态载入框架DL进行插件化开发
- Ising模型(伊辛模型)
- pt-online-schema-change和默认值关系
- HttpMessageConverter 专题
- TCPDF解决保存中文文件名的方法
- 关于C/C++中求最大公约数和最小公倍数的算法
- Northwind学习笔记
- angular4-事件绑定
- html5 ajax 文件上传
- 还没被玩坏的robobrowser(3)——简单的spider