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 ...
随机推荐
- UI设计趋势:渐变设计风格重新回归主流
在扁平化设计刚刚兴起之时,渐变是设计师们避之不及的设计手法,然而今天它已经正式回归.几乎是在一夜之间,无数的网站开始使用渐变色. 从背景到图片上的色彩叠加,包括UI元素上所遮盖的色彩,所有的这一切都表 ...
- Hibernate SQL查询 addScalar()或addEntity()
本文完全引用自: http://www.cnblogs.com/chenyixue/p/5601285.html Hibernate除了支持HQL查询外,还支持原生SQL查询. 对原 ...
- shell编程之运算符
declare声明变量类型 declare [+ / -] [选项] 变量名 - :给变量设定类型属性 + :取消变量的类型属性 -a :将变量声明为数组型 -i :将变量声明为整数型 -x ...
- WebMethod在webservice里面非静态方法能调用，在页面类里面，静态方法才能调用
WebMethod在webservice里面非静态方法能调用,在页面类里面,静态方法才能调用
- ajax的表单提交，与传送数据
ajax的表单提交 $.ajax ({ url: "<%=basePath%>resource/addPortDetectOne.action", dataType: ...
- mysql在linux下不区分大小写
1.先停止mysql service mysql stop 2.如果用rpm直接安装的mysql,路径在:/usr/下,查找my.cnf. 3.在[mysqld]下添加: lower_case_tab ...
- java 删除所有HTML工具类
import java.util.regex.Matcher;import java.util.regex.Pattern; public class HtmlUtil { private stati ...
- oracle10g、oracle client和plsql devement 三者之间的关系
oracle10g是服务器,如果本机安装了oracle10g,没有必要安装oracle client,只要配置好DNS,就可以使用plsql devement连接 当然你也可以同时安装orac ...
- HTML5.dcloud.io-stream-app
dcloud.io提出的Stream App 本文仅仅是关于dcloud.io提出的SteamApp初探,所有内容请参考其官网. 1. Application promotion by scaning ...
- 匿名访问ReportService报表服务器（一）
我的数据库版本是sql server 2008 r2,系统环境是windows server2008. 对于sql server 2008 r2上报rs报表的匿名访问问题,我这边尝试过两个可行方案: ...