Angular.js-重定向不起作用

Question

我在理解Angular.js路由的行為時遇到了一些困難

這是我的代碼

我的app.js：

'use strict';

var app = angular.module('myApp', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/game/room', {templateUrl: 'roomGame', controller: roomCtrl});
    $routeProvider.otherwise({redirectTo: '/game/room'});
    $locationProvider.html5Mode(true);
  }]);

我在其中定義路由服務器端的index.js：

app.get('/game', function (req, res)
{
  console.log("we are in /game");
  res.render("game/index", {
      user: req.session
  });
});
app.get('/game/roomGame', function (req, res)
{
  console.log("we are in /game/roomGame");
  res.render("game/roomGame";
});

index.jade：

div(ng-controller="indexCtrl")
    a(href='/') Quitter

    div(ng-view)

還有另一個文件：roomGame.jade，但向您顯示源代碼並不重要。

現在，我打開瀏覽器並輸入：localhost：3000 / game。

正如預期的那樣，我被重定向到localhost：3000 / game / room，它向我顯示了預期的視圖。

但是當我輸入：localhost：3000 / game / room或localhost：3000 / game / foo時，它顯示我“無法獲取/ game / xxx”

我想重定向到/ game，然后重定向到/ game / room。 怎么可能？

Answer 1

當您看到預期的視圖時，是否將您重定向到http://localhost:3000/#/game/room ？ 注意# 。

當您輸入http://localhost:3000/game/room ，它將命中Express服務器，而不是您的Angular應用程序，從而嘗試匹配/game/room ，因此顯示您所看到的消息。

一種想法是在服務器上執行以下操作：

app.get('/game/:what', function (req, res) {
    res.redirect('/#/game/' + req.params.what);
});

或更可能：

app.get('/game/*', function (req, res) {
    res.redirect('/#/game');
});

這會將事物從express重定向到Angular可以處理的地方。