Search code examples
javascriptangularjsangular-ui-routerpartial-page-refresh

How to redirect on different view on refresh in AngularJS?


i'm developing an application in AngularJS. Basically, i have a "home" page and a "new project". In the home page i have a menu with a link to "new project".

I configured the $stateProvider as follows :

$stateProvider.state('home', {
    url: '/',
    templateUrl: 'partials/home.jsp'
}).state('newproject', {
    url: '/newproject',
    templateUrl: 'partials/new-project.html'
})

So, when i enter the app, i'm in the home page. Then i click on "new project" link and i'm in the "new project" page. Now the url is http://myapp/newproject

My problem is, when i refresh the page, i want to be redirected on the home page, even if the url in my browser bar is still http://myapp/newproject

How can i achieve that?

UPDATE :

Thank you very much squiroid for your answer. I used the second solution and it worked like a charm. A little clarification, just in case someone should have the same problem, before redirecting to home you have to prevent default operation. So the correct working code is :

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

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

});


Solution

  • Use this in your controller of 'newproject' it is listening your refresh:

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

    or put this in app.run();

    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
    
        if(next==current && next=='/newproject')
            $state.go('home');
    
    });