Javascript 将AngularJS HTML5模式与nodeJS和Express一起使用

我正在使用带有Express的nodeJS服务器来服务我的AngularJS应用程序。当我使用angularJS默认路由（hashbangs）时，这一切都很好，但现在我正试图激活html5模式

我正在激活HTML5模式，如下所示：

$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 < 

但还是没有运气

我还尝试将

app.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 HTML5模式与nodeJS和Express配合使用？谢谢。

您的初始修复（为特定前缀声明静态中间件处理程序）应该可以正常工作，但您需要确保在任何其他路由之前声明它们（和

app.router

，尽管您不需要显式使用它）：

---

此外，您需要确保前缀静态处理程序实际上声明为OK（正确路径），否则它们将无法找到任何请求的文件，请求将通过中间件链传递，并最终由catch all处理程序处理（通过注释catch-all处理程序并查看是否有任何JS/CSS/…请求可以正常工作，应该很容易进行测试）。

我正在开发一个web应用程序，在客户端使用Angularjs和Requirejs，在服务器上使用Nodejs

下面是一些示例代码，向您展示如何设置它

注意：这个示例显示了一个散列url，但是您可以通过修改中间件函数和角度配置轻松地更改它

中间件功能 服务器路由配置 客户端路由配置 应用加载程序文件 路由文件

---

按如下方式配置express 4服务器：

app.use(express.static(__dirname + '/public'));

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

而且像：

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
    });
});

---

没错，如果您使用的是像NGINX这样的代理服务器，那么您最好在代理级别设置依赖路由。您可能看到了

未捕获的SyntaxError:Unexpected token<

，因为未按预期找到路径。而不是返回Javascript（或CSS等）您想要的文件，正在触发“catch all/*”路由并将HTML发送回。应用程序没有方法“配置”未捕获的语法错误：由于未加载您的angular js应用程序文件，导致出现意外标记。请检查到js目录的路由。您可能希望从

/

t更改它们o

/public

或比

/

更独特的其他名称

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);
    }
}

//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);
    });
 })

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);
 });

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'
    }

 }

})

app.use(express.static(__dirname + '/public'));

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

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
    });
});