All geek questions in one place

Redirect to page on first load and after update

I am working on a two-page AngularJS application where the user must complete the first page before moving 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'});

Thus, the user first goes to the configuration page, and after filling in some fields, they click the button and go to the "Levels" page. The problem is that if they refresh the page while they are on the Levels page, I need them to be returned to the Configuration page to fill in the fields again before they can return to the Levels page.

Is there any way to achieve this?

+4
source share
2 answers

What you can do is 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 could be:

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

I have a similar use case: a wizard-style stream with 3 pages; the user fills in the data in the 1st, then confirms the data in the 2nd, and the third displays the result.

Bookmarking internal "pages" does not make sense: if the relevant data is not filled out, the user should always be redirected to the first page.

The way we solve these cases does not use routing; all N pages under ng-switch are placed in one route:

 <div ng-switch="view.state"> <div ng-switch-when="dataEntry"> <div ng-include="..."></div> </div> <div ng-switch-when="confirmation"> <div ng-include="..."></div> </div> <div ng-switch-when="outcome"> <div ng-include="..."></div> </div> </div>

And in the route controller:

 angular.extend($scope, { view: { state: "dataEntry", .... }, .... });

Therefore, whenever this controller is activated, the user will see the "dataEntry" screen. This, combined with some fantastic animations, does the trick.

The ng-include alternative is a directive for each inner page.

I don't have code right now, but I think HTML can be shortened to:

 <div ng-switch="view.state"> <div ng-switch-when="dataEntry" ng-include="..."></div> <div ng-switch-when="confirmation" ng-include="..."></div> <div ng-switch-when="outcome" ng-include="..."></div> </div>
+1
source

Source: https://habr.com/ru/post/1502238/

More articles:


All Articles