AngularJS Routing to different page with different controller

Question

I have two HTML pages. One is the exam.html and other is result.html. On certain condition in the controller ExamCtrl of exam.html, I route to result.html using $location.path. But however, on the result page, the controller ResultCtrl doesn't seem to load though I have added it in the config file.

angular config file:

angular.module('exam').config(['$stateProvider',
  function ($stateProvider) {
    // Exam state routing
    $stateProvider
      .state('exam', {
        abstract: true,
        url: '/exam',
        template: '<ui-view/>'
      })
      .state('exam.list', {
        url: '',
        templateUrl: 'modules/exam/client/views/exam.client.view.html',
        controller: 'ExamCtrl'
      })
      .state('/result', {
        url: '/result',
        templateUrl: 'modules/exam/client/views/exam-result.client.view.html',
        contoller: 'ResultCtrl'
      });
  }
]);

ExamCtrl:

angular
.module('exam')
.controller('ExamCtrl', ['$scope', '$stateParams', '$location', 'Authentication', '$http',
  function ($scope, $stateParams, $location, Authentication, $http) {


$scope.submitAnswer = function (selected) {         
      //some code
      if (qtnCounter > 5) {
        // loads the result page.
        $location.path('/result');
      } else {
        $scope.getQues();
      }
    };
  }
]);

ResultCtrl:

angular
.module('exam')
.controller('ResultCtrl', ['$scope', '$stateParams', '$location', 'Authentication', '$http',
  function ($scope, $stateParams, $location, Authentication, $http) {

    console.log('ResultCtrl');

   }
]);

result.html:

<body ng-controller="ResultCtrl">
    <h1>Result page!</h1>   
</body>

Marcus Höglund · Accepted Answer · 2017-02-05 11:35:24Z

1

Insted of using $location use the $state to change to a given state in your app.

Inject the $state in the controller and then call the transitionTo() which will load the view and setup the controller

angular
.module('exam')
.controller('ExamCtrl', ['$scope', '$state', 'Authentication', '$http',
  function ($scope, $state, Authentication, $http) {


$scope.submitAnswer = function (selected) {         
      //some code
      if (qtnCounter > 5) {
        // loads the result page.
        $state.transitionTo('/result');
      } else {
        $scope.getQues();
      }
    };
  }
]);

answered Feb 5, 2017 at 11:35

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akhilesh Chobey Over a year ago

Oh. Got it. Thanks a lot!

Marcus Höglund Over a year ago

Np, happy coding:)

Collectives™ on Stack Overflow

AngularJS Routing to different page with different controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related