使用带有nodeJS和Express的AngularJS html5mode

我正在使用Express的nodeJS服务器来服务我的AngularJS应用程序。 这一切工作正常,当我使用angularJS默认路由(hashbangs),但现在我试图激活html5模式。

我正在像这样激活html5mode:

$locationProvider.html5Mode(true).hashPrefix('!'); 

这就是我的nodeJS app.js文件的样子:

 var path = require('path'), express = require('express'), app = express(), routes = require(path.join(__dirname, 'routes')); app.configure(function() { app.use(express.logger('dev')); app.use(express.compress()); app.use(express.methodOverride()); app.use(express.bodyParser()); app.use(app.router); app.all("/*", function(req, res, next) { res.sendfile("index.html", { root: __dirname + "/../app" }); }); app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); 

然而,这现在作为我的index.html文件服务于所有请求,所以我从requireJS得到以下错误:

 Uncaught SyntaxError: Unexpected token < 

我试着将下面的内容添加到我的nodeJS app.js以便正确地为我的资源提供服务:

 app.use("/js", express.static(__dirname + "/../app/js")); app.use("/img", express.static(__dirname + "/../app/img")); app.use("/css", express.static(__dirname + "/../app/css")); app.use("/partials", express.static(__dirname + "/../app/partials")); 

但还是没有运气。

我也尝试用下面的app.allreplaceapp.all语句:

 app.use(function(req, res) { // Use res.sendfile, as it streams instead of reading the file into memory. res.sendfile(__dirname + '/../app/index.html'); }); 

但是这也不起作用。 我能做些什么来获得angularJS html5mode与nodeJS和Express工作? 谢谢。

       

网上收集的解决方案 "使用带有nodeJS和Express的AngularJS html5mode"

你的初始修复(为特定前缀声明静态中间件处理程序)应该可以正常工作,但是你需要确保它们任何其他路由之前被声明(和app.router ,虽然你不需要明确地使用它)。

 // these need to go first: app.use("/js", express.static(__dirname + "/../app/js")); app.use("/img", express.static(__dirname + "/../app/img")); app.use("/css", express.static(__dirname + "/../app/css")); app.use("/partials", express.static(__dirname + "/../app/partials")); // any other routes: app.all("/*", ...); 

另外,你需要确保前缀的静态处理程序实际上被声明为正确的(正确的path),否则他们将无法find任何请求的文件,并且请求将传递到中间件链中并最终由catch-所有处理程序(应该很容易通过注释全部处理程序进行testing,看看是否有任何JS / CSS / …请求工作正常)。

configuration快递4服务器,如:

 app.use(express.static(__dirname + '/public')); app.get('/*', function(req, res){ res.sendFile(__dirname + '/public/index.html'); }); 

和像angular:

 app.config(function($stateProvider, $urlRouterProvider, $locationProvider){ $stateProvider .state('home', { url: '/', templateUrl: 'templates/main.html' }) .state('register', { url: '/register', templateUrl: 'templates/register.html' }); $urlRouterProvider.otherwise("/"); $locationProvider.html5Mode({ enabled: true, requireBase: false }); }); 

我正在使用服务器上的Nodejs在客户端上使用Angularjs和Requirejs的Web应用程序。

以下是一些示例代码,向您展示如何设置它。

注意这个例子显示了一个哈希URL,但是你可以通过修改中间件function和angular度configuration来轻松地改变它

中间件function

 isXHR: function (req, res, next) { if (req.xhr || req.get("angular-request") === "ajaxRequest") { next(); } else { var url = req.url; var urls = url.split("/"); var last = _.last(urls); urls = _.without(urls, last); url = urls.join("/") + "#/" + last //remove the hash if you want to make it html5mode; res.redirect(url); } } 

服务器路由configuration

 //I'm using express-namespace to group my routes app.namespace("/requirements", function(){ //Shared local variable used across the application var info = { app: { title: "Requirements", module: "app/requirements" // where the angular application stored } } //this is the main url that will user request Route.get("/", function (req, res) { res.cookie("profileRegisterationSteps", 0); res.render("app/requirements/index", info); }); //this is the url angular js will request Route.get("type", filters.isXHR, function (req, res) { res.render("app/requirements/profile/type", info); }); }) 

客户端路由configuration

 require(['App', 'underscore', 'ngAmd'/*angular amd*/, 'autoload'/*No Sense*/, 'appLoader' /*i used to load my scripts file for the route user requested (not all scripts files only who requested) before template laoded*/, 'appRoute'/*this is a list of routes*/], function (app, _, amd, autoload, loader, routes) { app.config(function ($routeProvider, $locationProvider, $httpProvider) { //remove a clearn URL $locationProvider.html5Mode(false); //ku dar header kan si uu server ka u ogaado Request in yahay Ajax $httpProvider.defaults.headers.common['angular-request'] = "ajaxRequest"; //Route Config var Route = $routeProvider; //get all routes objects that defined in routes module _.each(routes, function (route) { // extend the routes module objects and use its properties Route.when(route.url, _.extend(route, { //call returning function in loader module and write the promise resolve: _.extend(loader(route)) })); }); Route.otherwise({ redirectTo: "/" }); }); //start the application amd.bootstrap(app); }); 

Apploader文件

 require.config({ paths: { //pages type: "Apps/requirements/pages/type" } }); define(['App'], function(app) { return function (options) { return { loader: function ($q, $rootScope) { var defer = $q.defer(); var module = options.name// the name of the route (this name corresponds to the requirejs module name above; if (!!(module)) { if (require.defined(module)) { defer.resolve(); } else { require([module], function () { $rootScope.safeApply(function () { defer.resolve(); }) }); } } else { defer.resolve(); } return defer.promise; } } } }); 

路线文件

 define(function(){ return { { name : "type", url : "/", templateUrl : "/requirements/type", view : 'services' } } })