AngularJS、Node.js、ExpressJS应用程序集成问题
我已经使用Node.js和ExpressJS创建了一个RESTful服务。现在我想实现View part。为此，我选择了AngularJS。
这里的问题是，我不确定如何组织文件夹结构，以及如何将AngularJS与Node.js和ExpressJS集成。
我看了这个视频，但是没有可用的示例源代码。
Let's Get CRUDdy: AngularJS and Node.js Ferrari Example
项目文件夹结构
ExpressJS文件
var express = require('express'),
http = require('http'),
path = require('path'),
photos = require('./routes/photos');
var app = express();
app.configure(function () {
app.use(express.logger('dev')); /* 'default', 'short', 'tiny', 'dev' */
app.use(express.bodyParser());
app.use(app.router);
});
app.get('/photos', photos.findAll);
app.get('/view1', photos.index);AngularJS:
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);当我点击url http://www.domain/view1时，它应该会显示index.html。但我得到的是404代码。
如果你需要更多关于它的信息，请告诉我。
回答 2
Stack Overflow用户
发布于 2013-07-04 02:24:38
如果您使用AngularJS实现单页面体验，那么每次都应该提供相同的前端代码，然后让AngularJS接管处理URL和显示内容的工作。
请记住，您正在管理两个路由系统。一个用于前端，一个用于后端。Express路由映射到您的数据，通常以JSON格式返回。(您也可以直接呈现html，请参阅选项#1。)角度路由映射到您的模板和控制器。
选项#1：
设置静态文件夹来服务前端代码(HTML/CSS/JS/AngularJS)。
app.use(express.static(__dirname + '/public'));查看以下示例代码：
目录结构：
public/
index.html
js/
angular.js
css/
partials/
partial1.html
partial2.html
app/
node_modules/
routes/
web-server.js选项#2：
在不同的服务器上提供前端代码和后端代码。
这并不意味着你必须有两台机器。
下面是在您的本地计算机上使用Apache进行的一个可行设置
目录结构：
public/
index.html
js/
angular.js
css/
partials/
partial1.html
partial2.html
node/
app/
node_modules/
routes/
web-server.js设置主机文件
127.0.0.1 domain.dev将http://domain.dev/设置为指向公共/
<VirtualHost *:80>
DocumentRoot "/path/to/public"
ServerName domain.dev
ServerAlias www.domain.dev
</VirtualHost>设置http://api.domain.dev/以指向正在运行的节点web服务器
<VirtualHost *:80>
ServerName api.domain.dev
ProxyPreserveHost on
ProxyPass / http://localhost:3000/
</VirtualHost>(改编自：http://www.chrisshiplet.com/2013/how-to-use-node-js-with-apache-on-port-80/)
启动(或重新启动) Apache并运行您的节点服务器：
node web-server.jsAngular路由：
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives',
'myApp.controllers'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);index.html:
<!DOCTYPE html>
<html>
<head><title>Angular/Node exmaple</title></head>
<body>
<div id="main" ng-view></div>
</body>
</html>快速路由：
app.get('/', photos.index);
app.get('/photos', photos.findAll);通过$http或$resource服务访问Angular控制器中的以下路由：
$http.get('http://api.domain.dev/photos').success(successCallback);其他资源：
Stack Overflow用户
发布于 2013-12-06 20:47:54
我有一个现有的angular项目，其文件结构如下(大致)：
/
app/
img/
scripts/
styles/
templates/
index.html
test/我刚刚创建了一个新的express应用程序，并在从/public中删除所有现有内容后，将应用程序目录中的内容复制到express中的/public目录中
然后，在express的app.js文件中，我对默认配置进行了以下更改：
var express = require('express');
var routes = require('./routes');
// ** required my route module
var menu = require('./routes/menu');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
// ** I moved this above the app.router line below, so that static routes take precedence
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
// ** removed the default index route
// app.get('/', routes.index);
// ** defined my route
app.get('/api/menu', menu.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});然后显然用express编写了我的路由文件，并更改了angular服务中的URL以使用新的api。
此外，还有更多的工作涉及决定将规范放在哪里，以及合并bower和节点依赖等，但这可能对我的情况太具体了，不能包含在这个答案中，但如果有人发现它有用的话，我很乐意分享。
https://stackoverflow.com/questions/17451834
复制相似问题