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 ...
随机推荐
- C语言学习笔记（一）_hello world程序中涉及的c语言元素
#include <stdio.h> //使用printf函数之前必须include<stdio.h> int main() { int i; //声明一个变量 printf( ...
- Mathmatics
点 到直线 距离 公式 . 平面内
- grep使用多个查询条件－－或
[root@mail ~]# grep 'usrquota\|grpquota' /etc/fstabLABEL=/1 / e ...
- 安全标识符SID技术介绍及查看技巧
说到安全标识符SID就要先说说安全主体(Security Principals),安全主体是一个能够对它分配权限的对象,例如,用户.组和计算机: 对于每一个Windows 200x域中的安全主体都有一 ...
- 2016年&2017年
2016年在IBM已经工作4年了,从门户项目到今年的保险行业灾备项目,从之前的技术到现在的项目推进,由面对机器工作到,跟更多的人打交道,工作继续进行着,希望今天的项目尽早结束. 由于工作的原因,今年回 ...
- String和string的区别（C#）
从位置讲: 1.String是.NET Framework里面的String,小写的string是C#语言中的string 2.如果把using System;删掉,没有大写的String了,Sys ...
- MVC4 本地正常运行，发布到IIS7->403 - 禁止访问: 访问被拒绝。
代码编写完成,计划发布一个版本测试,没想到发布到IIS7 竟然报错“403-禁止访问”.还真第一次遇到这种问题..... 折腾了半天,终于解决. 1.提示报错403: 禁止访问: 访问被拒绝.您无权使 ...
- 记一次PHP7+opcache+zmq出现SIGSEGV 问题的查找(一次不成功的bug查找)
Title: 记一次PHP7+opcache+zmq出现SEGSEGV问题的查找(一次不成功的bug查找) bug来历自述:线上代码PHP环境是5.2,为了提升性能(逼格),于是升级为PHP7并使用 ...
- Linux中的输入重定向，变量
1 :分号 格式:命令1:命令2;命令3 说明:命令之间用分号隔开是顺序执行,命令之间没有任何逻辑关系 2 && 逻辑与 格式:命令1 && 命令2 说明:命令1正 ...
- Apache htpasswd命令用法详解
一. 基础 htpasswd建立和更新存储用户名.密码的文本文件, 用于对HTTP用户的basic认证. # /usr/local/apache/bin/htpasswd –help Usage: h ...