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 ...
随机推荐
- Varnish简介
Varnish介绍: Varnish是一个反向HTTP代理,有时也被称为HTTP的加速器或网络加速器:它存在于真实服务器的前面(可能有多级代理),将来自于客户端的请求中的部分内容存储在自身的内存中,以 ...
- MYSQL-5.5二进制包安装
groupadd mysql 添加用户组 useradd mysql -s /sbin/nologin -g mysql -M 添加用户 mv mysql-5.5.54-linux2.6-x86_6 ...
- Button四角有弧度及按下显示不同的颜色
一般的button都是矩形或者正方形,但为了显示不同的效果,让界面更美化,可以对其进行处理!!! 1.四角有弧度的button 2.按下button显示不同的颜色 实现步骤: 首先在drawable文 ...
- Socket accept failed
启动tomcat显示如下错误: java.net.SocketException: select failed at java.net.PlainSocketImpl.socketAccept(Nat ...
- .NET程序优化
一.数据库操作 1. 用完马上关闭数据库连接 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证, 比较耗费服务器资 源.ASP.NET 中提供了连 ...
- des加密解密——java加密，php解密
最近在做项目中,遇到des加密解密的问题. 场景是安卓app端用des加密,php这边需要解密.之前没有接触过des这种加密解密算法,但想着肯定会有demo.因此百度,搜了代码来用.网上代码也是鱼龙混 ...
- 使用AS编译jni文件无法编译出arm64-v8a，x86_64和mips64平台的.so文件的解决方法
我用的插件版本是:classpath 'com.android.tools.build:gradle-experimental:0.4.0',AS集成和使用ndk编译项目参考官方demo:https: ...
- Android ContentProvider介绍
在Android中数据的存储一共有五种形式,分别是:Shared Preferences.网络存储.文件存储,外储存储.SQLite.但是我们知道一般这些存储都只是在单独的一个应用程序之中达到一个数据 ...
- ASI 与 AFN
HTTP终结者.功能十分强大. 基于底层的CFNetwork框架,运行效率很高. 可惜
- spring mvc（1）：基础入门
依赖 pom.xml ( maven ) <properties> <spring.version>3.0.5.RELEASE</spring.version> ...