使用带有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工作？ 谢谢。
你的初始修复（为特定前缀声明静态中间件处理程序）应该可以正常工作，但是你需要确保它们在任何其他路由之前被声明（和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' } } })