Question

我有一个带有目录结构的角度应用

app 
..views
....partials
......main.jade
......foo.jade
....index.jade

和路由定义如下：

'use strict';

angular.module('myApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute', 
  'firebase', 
  'myApp.config'
])
  .config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);  

    $routeProvider
      .when('/', {
        templateUrl: '/partials/main',
        controller: 'MainCtrl'
      })
      .when('/foo/:fooName', {
        templateUrl: '/partials/foo',
        controller: 'FooCtrl'
      })            
      .otherwise({
        redirectTo: '/'
      });
  });

我在服务器端使用express，相关代码是：

    // server.js 
   app.configure('development', function(){
     app.use(express.static(path.join(__dirname, '.tmp')));
     app.use(express.static(path.join(__dirname, 'app')));
     app.use(express.errorHandler());
   });

   app.configure('production', function(){
    app.use(express.favicon(path.join(__dirname, 'public/favicon.ico')));
    app.use(express.static(path.join(__dirname, 'public')));
   });

    app.get('/', routes.index);
    app.get('/partials/:name', routes.partials);

    //routes.js
    exports.index = function(req, res){
      res.render('index');
    };


    exports.partials = function(req, res){
      var name = req.params.name;
      res.render('partials/' + name);
    };

主路线"/"加载正常，当我点击"/foo/bar"时，部分视图foo.jade按预期加载。但是，当我尝试直接在URL中访问"/foo/bar"时，我会收到来自Express "cannot GET /foo/bar"的404响应，这是有道理的，因为没有像express这样定义的路由。但是，我认为这是定义角度路由器的全部要点。它应该拦截这个请求并实际要求"/partials/foo"。我尝试添加

//redirect all others to the index (HTML5 history)
app.get('*', routes.index);

但它没有解决问题，似乎甚至捕获静态js资产的请求，并回复index.html的内容，这是非常糟糕的。我确定我做错了什么。如何解决问题以便我可以直接访问URL？

Answer 1

路由行为的原因是打开了html5mode。请注意以下行：$locationProvider.html5Mode(true);

您需要了解当您尝试直接访问"/foo/bar"时，您的浏览器会向此URL发送HTTP GET请求。当您尝试通过链接点击访问此URL时，如您所说，Angular正在拦截此操作并调用仅更新浏览器链接的History.pushState。

为了使html5mode路由工作，您需要做的是实现url重写。每个请求都必须重定向到引导AngularJS应用程序的索引文件，但这需要在您的服务器上完成。 Angular将自行呈现所需的页面。

查看connect mod rewrite grunt任务，该任务确实非常明确。

你也可以直接this middleware 。

在浏览器中直接访问URL时，角度路由不起作用，但在单击时可以正常工作？

1 个答案: