AngularJS，Node.js，ExpressJS应用程序集成问题
我已经使用Node.js和ExpressJS创build了一个RESTful服务。 现在我想实现View部分。 为此，我select了AngularJS。
这里的问题是，我不知道如何组织文件夹结构，以及如何整合AngularJS与Node.js和ExpressJS。
我观看了这个video，但是没有示例源代码可用。
让我们来获取CRUDdy：AngularJS和Node.js Ferrari示例
项目文件夹结构
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代码。
请让我知道，如果你需要更多的信息。
如果您使用AngularJS来实现单页面体验，那么您应该每次都使用相同的前端代码，然后让AngularJS接pipe处理URL并显示内容。
请记住，您正在pipe理两个路由系统。 一个用于前端，一个用于后端。 Express路线映射到您的数据，通常以JSON格式返回。 （您也可以直接渲染HTML，请参阅选项＃1。）angular路由映射到您的模板和控制器。
选项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
<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.js
angular度路线：
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);
其他资源：
我有一个文件结构像这样（大致）现有的angular项目：
/ app/ img/ scripts/ styles/ templates/ index.html test/
我刚刚创build了一个新的快速应用程序，并从/ public中删除所有现有的内容后，将我的应用程序目录的内容复制到/ express目录中
然后在app.js文件中，我对默认configuration进行了以下更改：
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')); });
然后显然写了我的路线文件中，并改变angular服务的URL使用新的API。
此外还有更多的工作涉及到决定在哪里放置规格，并且合并凉亭和节点依赖等，但这可能是太特定于我的情况包括这个答案，但高兴地分享，如果任何人可能会发现它的用处。