1

Question Background:

I have encountered what seems to be a common issue with AngularJS where I am implementing:

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

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.

The Issue:

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.

The following is the routes used:

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

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.

The Code:

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:

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

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

    //code

});

If I refresh the Results.html page how can I immediately redirect to the Home.html view instead of reloading the Results.html page?

EDIT:

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('/');
    });
});

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>
user1352057
  • 3,162
  • 9
  • 51
  • 117

3 Answers3

3

Use $locationChangeStart

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

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('/');
            }
       });
}]);
KrishCdbry
  • 1,049
  • 11
  • 19
  • thanks for your reply. Where does this code need to be placed? In the ResultsController.js? – user1352057 Sep 13 '16 at 23:37
  • Yes buddy ! and if you want to go with run just write it in your main app file after .config() write .run() – KrishCdbry Sep 13 '16 at 23:40
  • Thanks again for your reply. I have edited my original post with the edit. This still is not redirecting to the home page though. – user1352057 Sep 13 '16 at 23:53
  • Try this one buddy which I just edited my answer and I have tested in my local machine. It works !! Put the run function in app.js like app.run(...) – KrishCdbry Sep 14 '16 at 00:17
1

some pseudo code

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

if your results data isn't available just do $state.go('home'); in the ResultsController

Ronnie
  • 11,138
  • 21
  • 78
  • 140
  • Thanks for your reply Ronnie. I did think about just checking the $scope data and if it was null then return like you show. Would that be a valid way of doing this? – user1352057 Sep 13 '16 at 22:51
  • I don't see why not. I've done it before in the past. Charli's answer would work too. – Ronnie Sep 13 '16 at 23:01
1

Looks like that's been answered here: 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');
});
Community
  • 1
  • 1
Charli W.
  • 71
  • 1
  • 4