Redirect to page on first load and after refreshing

advertisements

I'm working on a two-page AngularJS app, where the user must complete the first page before moving on to the second page.

I have my $routeProvider setup as follows:

$routeProvider.
        when('/config', {templateUrl: 'views/config.html', controller: ConfigController}).
        when('/levels', {templateUrl: 'views/levels.html', controller: LevelsController}).
        otherwise({redirectTo: '/config'});

So the user is initially sent to the Config page, and after filling in some fields, they press a button and are taken to the Levels page. The issue is that if they refresh the page while they are on the Levels page, I need them to be taken back to the Config page to fill in the fields again before they can come back to the Levels page.

Is there any way to achieve this?


What you can do is to create a scope variable in your main controller and then check if this variable has been initialized or not.

angular.module('MyApp', [], function($routeProvider) {
$routeProvider.
        when('/config', {templateUrl: 'views/config.html', controller: ConfigController}).
        when('/levels', {templateUrl: 'views/levels.html', controller: LevelsController}).
        otherwise({redirectTo: '/config'});
});

function MainCntl($scope) {
  $scope.hasConfig = false;
}

function ConfigController($scope, $location) {
  // they press a button and are taken to the Levels page
  $scope.onSubmit = function () {
    $scope.hasConfig = true;
    $location.path('/levels');
  }
}

function LevelsController($scope, $location) {
  if($scope.hasConfig) {
    $location.path('/config');
  } else {
    //Stay on page
  }
}

And your html might be :

<body ng-app="MyApp">
  <div ng-controller="MainCntl">
    <div ng-view></div>
  </div>
</body>