Angular ui.router resolve not working when ng-controller put in html view

Question

I have the following nested states for the ui-router

index.html

<body ng-app="testApp">
  <div ui-view></div>
<body>

view.homepage.html

<div id="header" ng-controller="controllerHome">
  <div id="middle">
    <div ui-view>
     <input type="text" ng-model="check">
     <button ng-click="test()">Click</button>
    </div>
  </div
</div>

Here is my state definition js file

var testApp = angular.module('testApp',['ui.router']);

testApp.config(function($stateProvider, $urlRouterProvider){

    $urlRouterProvider.
        otherwise('/');

    $stateProvider
        .state('home',
            {
                url:'/',
                templateUrl : './templates/view.homepage.html',
                controller : 'controllerHome',
                resolve : {
                    userSession : function($http){
                     return $http({
                            method : "POST",
                            url : '/getSession'
                        });
                    }
                }
            })
})

homeController.js

testApp.controller('controllerHome',function($scope,$http,userSession){

    $scope.check = "";
    $scope.test = function(){
      console.log($scope.check);
    }

})

When I put the resolve I in the state definition I get the following error Error: $injector:unpr Unknown Provider.

So I tried removing the ng-controller directive but when I remove the ng-controller directive from the view, the value of $scope.check in the controllerHome is blank after click on the button.

I want to remove the ng-controller directive from the html view and put the resolve in the state definition.

Don't add child elements to ui-view <div id="header" ng-controller="controllerHome"> <div id="middle"> <div ui-view></div> <input type="text" ng-model="check"> <button ng-click="test()">Click</button> </div </div> — simon
– simon, Commented Nov 23, 2016 at 7:04

Aravind · Accepted Answer · 2016-11-23 07:37:53Z

As per the Documentation, Resolve property in UI-Router works that way.

The properties that are in resolve will be retrieved before activating that state.

resolve: block is an object on a state definition. Each key is the name of some data to load, and each value is a function which returns a promise for the data. Resolve functions are injected using Angular’s injector.

By the properties you have in the resolve, those properties and corresponding functions are resolved and the promises are injected into controller of the state.

So it is mandatory to have a controller name in the state instead of having it in the HTML as ng-controller.

An the problem that you are facing is to be solved using a factory sessionService which has the session Details and return them by calling a method in that service.

Have a look at the below

Your config must contain the state as below

.state('home',
    {
        url:'/',
        templateUrl : './templates/view.homepage.html',
        controller : 'controllerHome',
        resolve : {
            userSession : function(sessionService){
               return : sessionService.getUserSession();
            }
        }

Create a factory with the name sessionService as below

testApp.factory('sessionService', function() {
    var getUserSession= function(){
            $http({
                    method : "POST",
                    url : '/getSession'
            });
    }
    return {
            getUserSession:getUserSession
    }
});

Try displaying your session value in the console in your controller which can be modified as

testApp.controller('controllerHome',function($scope,$http,userSession){

    $scope.check = "";
    console.log(userSession);
    $scope.test = function(){
      console.log($scope.check);
    }
})

Collectives™ on Stack Overflow

Angular ui.router resolve not working when ng-controller put in html view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related