angular+requirejs前端整合
requirejs或者seajs我相信在前端的开发工作中经常使用到，而angular，这个强大的web前端框架很多公司也在引入。本文主要记录自己在工作学习中如何对angular跟requirejs进行整合，如何构建前端的MVC项目，废话不多说，直接进入正题，上代码。
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来分发处理，结构清晰，便于项目的维护等。由于我的表达能力不大好，各位能看的明白，我很开心，看不明白希望各位多多见谅，哈哈！
angular+requirejs前端整合的更多相关文章
- gulp + angular + requirejs 简单学习
一.安装gulp(已经安装了node环境) npm install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx&q ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- 我是如何基于angular+requirejs+node做SPA项目架构的
本文章已经录制视频,地址是:http://v.youku.com/v_show/id_XODI3MjYyODI0.html 前端这两年技术飞速发展,各种优秀框架层出不穷.本文不是讨论各框架的比较,也不 ...
- 项目演化系列--验证体系(基于angular的前端验证)
前言 之前分享的<web项目演化--验证体系>中提到基于angular的验证,但是为了以防读者迷惑,能够好的理解验证体系,所以没有详细介绍. 今天特地补写一篇关于构建angular的验证. ...
- angular+require前端项目架构搭建
app //应用入口 directive //自定义指令 require-main //require的主配置文件 存放公共调用的js service //请求后端数据公有类 controllers ...
- Angular 2 前端 http 传输 model 对象及其外键的问题
个人随笔,记录问题及思路草稿,非文章性质. 对于设备编辑场景,需要显示设备类型(外键), 前端有如下 TypeScript model(此 model 和后端实体 model 通常相对应) ...
- angular.js前端分层开发（页面和js代码分离，并将js代码分层）
一. 抽取模块成base.js文件// 定义模块: var app = angular.module("eshop",['pagination']); 二. 抽取服务成brandS ...
- 前端整合MathjaxJS的配置笔记
这篇文章是我给Pinghsu主题添加数学公式功能的一个小教程,包含我大量的官方文档阅读后的实践,跟着这篇配置教程走,你可以做到给任何一个需要数学公式的站点添加支持. 教程如标题所述是针对 Mathja ...
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
随机推荐
- java环境基础步骤 svn
eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 使用eclipse 里Help菜单的"Install New Softwar ...
- 通过pinyin4j.jar将(汉字拼音混合字符串)转化成字母首字母
通过pinyin4j.jar将(汉字拼音混合字符串)转化成字母首字母 例如 我的中国心 ==> wdzgx 我的中国心ya ==> wdzgxya woai我的中国 ==> w ...
- 转发（forward）和重定向（sendRedirect）
一. RequestDispatche 是一个Web资源的包装器,可以用来把当前的Request传递给该资源,或者把新的资源包括到当前的相应中.详细来说:RequestDispatch对象从客户端获取 ...
- iOS打包ipa包
创建证书之类这里就不说了,毕竟我也没有弄过. 我是团队开发,直接给我的p12文件,去开发者中心下载provision并且是distribute的就可以了. 1>.Xcode打包: 注意两个地方都 ...
- 把HBITMAP 保存图片文件.
//VC下把HBITMAP保存为bmp图片 BOOL CtestBitMapDlg::SaveBmp(HBITMAP hBitmap, CString FileName) { HDC hDC; //当 ...
- 修复 Firefox 下本地使用 Bootstrap 3 时 glyphicon 不显示问题
本地开发使用 Firefox 调试,遇到了 glyphicon 图标不显示的问题,期初以为是路径问题,搜索一大圈后找到了答案,原来这是一个安全性的问题,于是问题就好办了,解决方案如下: 1. 在Fir ...
- 如何取消MSSQL自带智能提示步骤，使用第三方智能提示插件
步骤1如下: [工具]——[选项]——[文本编辑器]——[Transact-SQL]——[IntelliSense]——[Transact-SQL IntelliSense 设置]——(取消选择)—— ...
- Eclipse之Git提交项目
一.使用eclipse自带插件提交项目 1.自带git插件进行配置我们的用户名和密码,即是自己github注册的用户. windows-perferences-Team-Git-configurati ...
- Linux centOS下搭建RTMP服务器的具体步骤
以下的所需的安装包,可直接在linux系统终端下载,也可从其他地方下载之后拷到对应目录下解压使用,遇到连接不到国外网站时可改变压缩包地址 1.安装依赖包: #yum install glibc.i68 ...
- ModelAndView详解
ModelAndView的构造方法有7个.但是它们都是相通的. 这里使用无参构造函数来举例说明如何构造ModelAndView实例. ModelAndView类别就如其名称所示,是代表了MVC Web ...