如何在页面刷新后重定向到主视图 - AngularJS [英] How to redirect to home view after page refresh - AngularJS
问题描述
问题背景
我遇到了AngularJS的一个常见问题:
I have encountered what seems to be a common issue with AngularJS where I am implementing:
$locationProvider.html5Mode({ enabled: true, requireBase: false });
这已从我的URL路由中删除了'#',反过来导致404错误。我通过调整web.config并立即重新加载页面来修复此问题。
This has removed the '#' from my URL routes and in-turn caused a 404 error. I fixed that by adjusting web.config and the page reloads now.
问题:
我有2个名为 Home.html
和 Results.html
的视图。我还有一个index.html,它包含在我的应用程序中,其中包含< div ui-view>
,其中注入了home和result视图。
I have a 2 views called Home.html
and Results.html
. I also have a index.html which houses the in my app which houses a <div ui-view>
where the home and result views are injected into.
以下是使用的路线:
http://localhost:5XXXX/ - home
http://localhost:5XXXX/results - results
我想重定向刷新results.html时的home.html视图。目前,当刷新results.html时,所有y范围数据都会随指令中的jquery插件对象状态一起丢失。
I want to redirect to the home.html view when results.html is refreshed. Currently when results.html is refreshed all of y scope data is lost along with jquery plugin object state in the directives.
代码:
app.js - 这里有app的路线:
app.js - this houses the routes of the app:
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:
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
页面? / strong>
If I refresh the Results.html
page how can I immediately redirect to the Home.html
view instead of reloading the Results.html
page?
编辑:
我更新了ResultsController.js以下但这个代码似乎没有在重新加载时被调用,它不会重定向到主页。
I have updated the ResultsController.js with the following but this code does not seem to be called on a reload, it does not redirect to home.
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中以处理重新路由:
Also to add I have added the following to the Web.config of my app to handle rerouting:
<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>
推荐答案
使用$ locationChangeStart
Use $locationChangeStart
$rootScope.$on('$locationChangeStart', function(event) {
$state.go('/');
});
正确代码:$ locationChangeStart 运行
Put这在主应用程序文件中,并将其附加到应用程序,如app.config,如app.run()
Proper code : $locationChangeStart run
Put this in main app file and attach it to app like app.config do it like app.run()
.run(['$rootScope', '$state', function($rootScope, $state, userService) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
if(next == current) {
event.preventDefault();
$state.transitionTo('/');
}
});
}]);
这篇关于如何在页面刷新后重定向到主视图 - AngularJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!