由网友(劫)分享简介：我有一个目录结构的角度应用I have an angular app with a directory structure app ..views....partials......main.jade......foo.jade....index.jade和路线像定义的：使用严格; angular.m...

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

I have an angular app with a directory structure

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

和路线像定义的：

使用严格;

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

我使用服务器端的前preSS和相关code是：

I'm using express on the server side and the relevant code is:

    // 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.jade 负载。然而，当我尝试访问/富/栏直接在网址我从防爆preSS 404响应不能GET /富/栏这是有道理的，因为有这样的前preSS定义的路由。不过，我认为这是确定的角router..i.e整点。它应该拦截此请求，实际上要求/谐音/富。我尝试添加

The main route "/" loads fine and when i click to "/foo/bar" the partial view foo.jade loads as expected. However, when I try visiting "/foo/bar" directly in the URL i get a 404 response from Express "cannot GET /foo/bar" which makes sense since there's no route like this defined in express. However, I thought this was the whole point of defining the angular router..i.e. it's supposed to intercept this request and actually ask for "/partials/foo". I tried adding

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

但它没有解决这个问题，似乎要赶上即使是静态的js资产的请求，并与的内容响应的index.html 这是pretty坏。我敢肯定，我做错了什么。我怎样才能解决的事情，这样我就可以直接访问网址吗？

but it didnt solve the issue and seemed to be catching even the requests for static js assets and responding with the contents of index.html which is pretty bad. I'm sure I'm doing something wrong. How can I fix things so that I can directly visit the URLs?

推荐答案

路由原因的行为就像这是html5mode开启。注意行： $ locationProvider.html5Mode（真）;

The reason routing is behaving like this is html5mode turned on. Notice the line: $locationProvider.html5Mode(true);

您要明白，当您试图访问/富/栏直接在浏览器发送HTTP GET请求到此URL。当您尝试访问通过链接点击这个网址，就像你说的，角拦截了这一行动，并呼吁History.pushState，只有更新浏览器的链接。

You need to understand that when you try to access "/foo/bar" directly your browser sends HTTP GET request to this URL. When you try to access this url via link clicking, like you said, Angular is intercepting this action and calls History.pushState that only updates browser's link.

您需要为了使html5mode路由的工作正在实施URL重写做什么。每个请求被重定向到索引文件白手起家AngularJS应用程序，但是这需要在服务器上完成。角会自行渲染所需的页面。

What you need to do in order to make html5mode routing work is implementing url rewrite. Every request has to be redirected to your index file that bootstraps AngularJS application, but this needs to be done on your server. Angular will render the desired page by itself.

查看连接mod-rewrite咕噜任务，做exacly这一点。

Check out connect mod rewrite grunt task that does exacly that.

您也可以中间件直接。