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 ...
随机推荐
- freeregex-0.01 使用文档
-- freeregex,简化字符串处理 freeregex使用大体分为两个部分: 正则确定 功能操作 正则确定:共有EMAIL.IP等静态属性:anyOf(String regex)静态方法 :和o ...
- java序列化深拷贝
java深拷贝 序列化和反序列化合成在一起的方法CloneUtils import java.io.ByteArrayInputStream; import java.io.ByteArrayOutp ...
- tmux 操作
http://www.cnblogs.com/congbo/archive/2012/08/30/2649420.html https://www.digitalocean.com/community ...
- 【转】c3p0详细配置
官方文档 : http://www.mchange.com/projects/c3p0/index.html <c3p0-config><default-config>&l ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 记录Qt的一个诡异Bug
公司的一款项目,在迭代开发阶段,突然发现运行速度越来越慢,界面切换卡顿时间在2秒以上.经过和某个不卡版本的对比,惊奇的发现程序二进制都一模一样,就几个图片资源和脚本不一样.经过差不多一天的排查,发现是 ...
- 浏览器缓存详解:expires,cache-control,last-modified,etag详细说明
最近在对CDN进行优化,对浏览器缓存深入研究了一下,记录一下,方便后来者 画了一个草图: 每个状态的详细说明如下: 1.Last-Modified 在浏览器第一次请求某一个URL时,服务器端的返回状态 ...
- 問題排查：DataGridView 資料行下拉選單，資料繫結階段顯示 DataGridViewComboBoxCell 值無效
可能原因: 1.下拉選單的選項資料繫結晚於 DataGridView 的資料繫結 2.下拉選單的 DataPropertyName 屬性,比 DisplayMember.ValueMember 早賦值 ...
- 关于unity3D的学习感想
在老师布置团队项目后组长确定项目是做游戏是,我才接触的Unity3D游戏引擎. 因为一开始我没有接触过这类软件,更没有用过.所以作为一个新手,做好的办 法实在网上找教程.网上说Unity3D是由Uni ...
- 激活神器 KMSAuto Net 2015 v1.3.8
KMSAuto Net – Windows 操作系统 KMS 自动激活工具!支持 Windows Vista,7,8,8.1,10, Server 2008,2008 R2,2012,2012 R2, ...