使用$ routeProvider重定向到Angular之外的路由

Question

我在Angular中编写了一个Web应用程序的一部分.为了确保覆盖所有路由,我想添加一个redirectTo属性$routeProvider,以便将无效路由返回到Web应用程序的根目录,而不使用Angular.

我试过了:

$routeProvider.otherwise({
    redirectTo: '/'
});

但显然这只是在URL的Angular控制部分中的路由,因此用户将被重定向到一个URL http://app.com/angular-part-of-web-app#,而不是http://app.com我希望他们去的地方.

我通过将一个空白的部分用作'404'页面,然后是一个只使用该$window对象重定向到所需页面的控制器来解决这个问题:

routes.js

// Redirect to site list.
$routeProvider.when('/404', {
    templateUrl: '/partials/404.html',
    controller: 'RedirectCtrl'
});

// Redirect to the 404 page.
$routeProvider.otherwise({
    redirectTo: '/404'
});

controllers.js

// Controller to redirect users to root page of site.
.controller('RedirectCtrl', ['$scope', '$window', function ($scope, $window) {

    $window.location.href = '/';
}]);

然而,这是掀起'太hacky,必须是更好的方式'的警钟.在Angular有更好的方法吗？

编辑:Angular路线 - 重定向到外部网站？没有回答同一个问题.我将打开我的问题,而不是将其标记为重复(现在),因为Angular世界移动如此之快,之前的答案可能不再是这样.

Answer 1

使用/ 404的上述解决方案对我不起作用.然而,这似乎有效

.otherwise({
    controller : function(){
        window.location.replace('/');
    }, 
    template : "<div></div>"
});

PS.我正在使用Angular 1.2.10

Answer 2

你可以这样做:

$routeProvider.when('/404', {
    controller: ['$location', function($location){
        $location.replace('/');
    }]
}).otherwise({
    redirectTo: '/404'
});

它本质上是相同的,只是它使用更少的代码.

Answer 3

不确定是什么版本的Angular JS写了接受的答案,但'redirectTo'属性接受了一个函数.所以,为什么不做这样简单的事情:

$routeProvider.otherwise({
    redirectTo: function() {
        window.location = "/404.html";
    }
});

显然,你必须创建自己的404.html.或者404页面的任何地方.

Answer 4

包括明确答案在内的所有答案都不适合我.我相信我的解决方案也可以解决您的问题,我也会分享我的用例以供将来读者参考.

使用路由控制器方法的问题: 当加载控制器时,路由已经为我访问了历史API状态(我使用HTML5模式,不确定这是否会影响非HTML5模式).

因此,即使我可以使用window.location.replace('/');将人转发到正确的页面,如果用户然后在他们的浏览器上单击Back,它将进入无效状态.

场景:我们实现了多页模型,并且我的管理页面模块与我的主页(非管理员)模块分开.我在我的一个管理员控制器中有一个$ location.path('/'),但由于主页没有打包到管理页面模块中,我想在检测到'/'路由时强制重页加载.

解决方案: 我们必须在ngRoute访问任何状态信息之前拦截$ routeChangeStart.这样我们甚至可以通过将url传递给$ route中的redirectTo param来指定外部href

angular.module('app',['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when('/admin/default', {template: somePageTemplate})
  /*
   *  More admin-related routes here...
   */
  .when('/',{redirectTo:'/homepage'})  // <-- We want to intercept this
  .otherwise({redirectTo: '/admin/default'}); 
}])
.controller('MainCtrl',[ // <- Use this controller outside of the ng-view!
  '$rootScope','$window',
  function($rootScope,$window){
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
      // next <- might not be set when first load
      // next.$$route <- might not be set when routed through 'otherwise'
      // You can use regex to match if you have more complexed path...
      if (next && next.$$route && next.$$route.originalPath === '/') {
        // Stops the ngRoute to proceed
        event.preventDefault();
        // We have to do it async so that the route callback 
        // can be cleanly completed first, so $timeout works too
        $rootScope.$evalAsync(function() {
          // next.$$route.redirectTo would equal be '/homepage'
          $window.location.href = next.$$route.redirectTo;
        });
      }
    });
  }
]);

请提供任何反馈,因为我将自己使用此代码.干杯

参考: https ://github.com/angular/angular.js/issues/9607