angular+requirejs前端整合
2015-07-07 16:56
387 查看
requirejs或者seajs我相信在前端的开发工作中经常使用到,而angular,这个强大的web前端框架很多公司也在引入。本文主要记录自己在工作学习中如何对angular跟requirejs进行整合,如何构建前端的MVC项目,废话不多说,直接进入正题,上代码。
1、项目目录结构,如下图:
2、routes.js—》路由配置,用于请求加载各个页面脚本的分发配置,代码如下:
3、javascripts/app.js—》用于配置require加载的基础模块,路由分发,代码如下:
4、controllers/controllers.js—》用于创建控制器模块,代码如下:
5、services/services.js—》用于创建服务模块,代码如下:
6、directives/directives.js—》用于创建指令模块,代码如下:
7、controllers/test1/app.js—》具体页面js加载入口文件,通过javascripts/app.js进行分发
8、controllers/test1/test1controllers.js—》具体页面业务控制器,controllers/test1/app.js的依赖文件
9、services/test1/test1service.js—》具体页面业务依赖的服务,controllers/test1/app.js的依赖文件
10、views/index_test1.ejs—》视图View,代码如下:
运转流程说明:所有的页面只引入一个脚本,javascripts/app.js,该脚本执行时会去匹配routes/routes.js配置的路由,然后去加载具体页面的业务js,加载完毕后创建routes/routes.js配置的angular应用作用域(前提是在routes/routes.js配置了angular应用的作用域,如果没配置则需要在具体页面依赖的js中手动创建和启动),这里的具体页面的业务运转的业务js入口就是controllers/test1/app.js,当这个js运转起来后会加载相关的依赖脚本,比如控制器,服务,指令等。
以上便是angular+requirejs搭建前端的MVC项目的具体流程。众所周知,MVC是很流行的一种设计框架,它使得我们的项目得到很好的解耦,视图归视图,业务逻辑归业务逻辑,一切请求都通过控制器Controller来分发处理,结构清晰,便于项目的维护等。由于我的表达能力不大好,各位能看的明白,我很开心,看不明白希望各位多多见谅,哈哈!
1、项目目录结构,如下图:
2、routes.js—》路由配置,用于请求加载各个页面脚本的分发配置,代码如下:
/** * Created by ljc on 2015/7/7. */ define(function () { var route = { "\/test1.*": {module:"controllers/test1/app",appDomain:"webApp"} }; return { route: route, defaultRoute: "controllers/index/app" }; });
3、javascripts/app.js—》用于配置require加载的基础模块,路由分发,代码如下:
/** * Created by ljc on 2015/7/7. */ require.config({ baseUrl:"javascripts/", paths:{ 'jquery':['lib/jquery-1.8.2.min'], 'underscore':['lib/underscore'], 'text':['lib/text'], 'angular':['lib/angular'], 'angular-route':['angular-route'] }, shim:{ 'jquery':{ exports:'$' }, 'underscore':{ exports:'_' }, 'angular':{ exports:'angular' }, 'text':{ exports:'text' }, 'angular-route':{ exports:"angular-route", deps: ["angular"] } }, urlArgs:"v=11" }); require(['routes/routes','angular','jquery','text','underscore'],function(route){ var target = location.pathname; var match = null, re = null; for (var key in route.route) { re = new RegExp("^" + key + "$", "gi"); if (re.test(target)) { match = route.route[key]; break; } } if (!match) { match = route.defaultRoute; } if ($.type(match) === "string") { match = [match]; require(match); }else{ if(match.hasOwnProperty("module")){ var _loadApp=[match["module"]]; require(_loadApp,function(){ angular.module(match["appDomain"],["controllers","services"]); angular.bootstrap(document,[match["appDomain"]]); }); } } });
4、controllers/controllers.js—》用于创建控制器模块,代码如下:
/** * Created by ljc on 2015/7/7. */ define([],function(){ return angular.module("controllers",[]); });
5、services/services.js—》用于创建服务模块,代码如下:
/** * Created by ljc on 2015/7/7. */ define([],function(){ return angular.module("services",[]); });
6、directives/directives.js—》用于创建指令模块,代码如下:
/** * Created by ljc on 2015/7/7. */ define([],function(){ return angular.module("directives",[]); });
7、controllers/test1/app.js—》具体页面js加载入口文件,通过javascripts/app.js进行分发
/** * Created by ljc on 2015/7/7. */ define(['controllers/test1/test1controller','services/test1/test1service'],function(){ /*angular.module("webApp",["controllers"]); angular.bootstrap(document,['webApp']);*/ });
8、controllers/test1/test1controllers.js—》具体页面业务控制器,controllers/test1/app.js的依赖文件
/** * Created by ljc on 2015/7/7. */ define(['controllers/controllers'],function(controllers){ controllers.controller("test1Controller",['$scope','voteService',function($scope,data){ $scope.name=data.name; }]); });
9、services/test1/test1service.js—》具体页面业务依赖的服务,controllers/test1/app.js的依赖文件
/** * Created by ljc on 2015/7/7. */ define(["services/services"],function(services){ services.factory("voteService",function(){ return { name:"我是中国人" } }); });
10、views/index_test1.ejs—》视图View,代码如下:
<!DOCTYPE html> <html> <head> <title>angular_test1</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body ng-controller="test1Controller"> <label>{{name}}</label> </body> <script type="text/javascript" data-main="javascripts/app.js" src="javascripts/lib/require.js"></script> </html>
运转流程说明:所有的页面只引入一个脚本,javascripts/app.js,该脚本执行时会去匹配routes/routes.js配置的路由,然后去加载具体页面的业务js,加载完毕后创建routes/routes.js配置的angular应用作用域(前提是在routes/routes.js配置了angular应用的作用域,如果没配置则需要在具体页面依赖的js中手动创建和启动),这里的具体页面的业务运转的业务js入口就是controllers/test1/app.js,当这个js运转起来后会加载相关的依赖脚本,比如控制器,服务,指令等。
以上便是angular+requirejs搭建前端的MVC项目的具体流程。众所周知,MVC是很流行的一种设计框架,它使得我们的项目得到很好的解耦,视图归视图,业务逻辑归业务逻辑,一切请求都通过控制器Controller来分发处理,结构清晰,便于项目的维护等。由于我的表达能力不大好,各位能看的明白,我很开心,看不明白希望各位多多见谅,哈哈!
相关文章推荐
- 《简约之上:交互设计四策略》
- easyui datagrid 列显示和隐藏
- UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况的原因
- UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况
- build
- Android UI 自动化测试
- java获取request中的各种路径
- 直播m3u8 参数#EXT-X-DISCONTINUITY
- 黑马程序员----论String,StringBuffer,StringBuilder,基本数据类型对象包装类
- MySQL 中文insert报错Incorrect string value: '\xCC\xEC\xB2\xC5'
- Leetcode Implement Queue using Stacks
- UINavigationController/导航控制器
- String、StringBuffer、StringBuilder主要区别及使用选择
- Hive 创建和生成Rcfile 和SequenceFile格式的表
- Guide to understanding XSS – XSS payloads, attack vectors, BeEF hooking, MiTM with Shank and some hi
- android studio 中出现"...ProjectScript\buildscript\cache.properties.lock"
- LeetCode-Implement Queue using Stacks-解题报告
- 关于QT4.8修改UI不能运行显示
- 用Arduino来看看快递的暴力程度
- Implement Stack using Queues