页面刷新后如何重定向到主页视图 - AngularJS

Question

问题背景：

在我正在实施的 AngularJS 中，我遇到了一个似乎很常见的问题：

 $locationProvider.html5Mode({ enabled: true, requireBase: false });

这已从我的 URL 路由中删除了“#”，进而导致 404 错误。我通过调整 web.config 解决了这个问题，现在页面重新加载。

问题：

我有两个视图，分别称为 Home.html 和 Results.html。我还有一个 index.html，它包含在我的应用程序中，其中包含一个 <div ui-view>，主视图和结果视图被注入其中。

以下是使用的路线：

http://localhost:5XXXX/ - home
http://localhost:5XXXX/results - results

我想在刷新 results.html 时重定向到 home.html 视图。目前，当刷新 results.html 时，所有 y 范围数据以及指令中的 jquery 插件对象状态都会丢失。

守则：

app.js - 这包含应用程序的路由：

 angular
  .module('app', [
    'ui.router',
    'ui.bootstrap',
    'ngAnimate',
    'ngResource',
    'rzModule',
    'angular-ladda',
    'jcs-autoValidate'
  ])
  .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function ($urlRouterProvider, $stateProvider, $locationProvider) {

      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'home.html',
            controller: 'HomeController'
        })


          $stateProvider.state('results', {
              url: '/results',
              templateUrl: 'Results.html',
              controller: 'ResultsController'
          })

          $locationProvider.html5Mode({
              enabled: true,
              requireBase: false
          });
    }]);

ResultsController.js：

var app = angular.module('app');

app.controller('ResultsController', function ($scope, $rootScope, $timeout, $location, $anchorScroll, $window, searchService) {

    //code

});

如果我刷新Results.html 页面，如何立即重定向到Home.html 视图而不是重新加载Results.html 页面？

编辑：

我已使用以下内容更新了 ResultsController.js，但似乎不会在重新加载时调用此代码，它不会重定向到主页。

var app = angular.module('app');

app.controller('ResultsController', function ($scope, $rootScope, $timeout, $location, $anchorScroll, $window, searchService) {

    $rootScope.$on('$locationChangeStart', function (event) {
        $state.go('/');
    });
});

此外，我已将以下内容添加到我的应用程序的 Web.config 以处理重新路由：

<rewrite>
  <rules>
    <rule name="AngularJS" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

Answer 1

使用 $locationChangeStart

$rootScope.$on('$locationChangeStart', function(event) {
   $state.go('/');
});

正确的代码：$locationChangeStart 运行
将它放在主应用程序文件中并将其附加到 app.config 之类的应用程序中，就像 app.run() 一样

.run(['$rootScope', '$state', function($rootScope, $state, userService) {
       $rootScope.$on("$locationChangeStart", function(event, next, current) {
          if(next == current) {
                event.preventDefault();
                $state.transitionTo('/');
            }
       });
}]);

Answer 2

一些伪代码

var app = angular.module('app');
app.controller('ResultsController', function ($scope, $rootScope, $timeout, $location, $anchorScroll, $window, searchService, $state) {
  if (data unavailable) {
    $state.go('home');
  }
});

如果您的结果数据不可用，只需执行 $state.go('home');在ResultsController

Answer 3

似乎已在此处回答：How to redirect on different view on refresh in AngularJS?

$rootScope.$on("$locationChangeStart", function(event, next, current) { 

if(next==current && next=='/results')
    event.preventDefault();
    $state.go('home');
});