Angular Js -> UI - routing -> resolve issue

Question

I am developing a simple AJS app with ajs(1.4.7) and angular-ui-router(0.2.15).

Went through this article and opted Route Resolve technique.

Here is the error i'm getting

Error: [$injector:unpr] Unknown provider: actorGridDataProvider <- actorGridData <- mainController http://errors.angularjs.org/1.4.7/$injector/unpr?p0=actorGridDataProvider%20%3C-%20actorGridData%20%3C-%20mainController at REGEX_STRING_REGEXP (angular.js:68) at angular.js:4289 at Object.getService [as get] (angular.js:4437) at angular.js:4294 at getService (angular.js:4437) at Object.invoke (angular.js:4469) at ident.$get.extend.instance (angular.js:9136) at nodeLinkFn (angular.js:8248) at compositeLinkFn (angular.js:7680) at publicLinkFn (angular.js:7555)

I am guessing 'actorGridData' is not defined before the mainController is being invoked. I'm trying to populate a grid on the home page on load of application. Hence the resolve technique approach.

router code:

    'use strict';

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

    $urlRouterProvider.otherwise('/homeGridPage');

    $stateProvider

    .state('homeGridPage', {
        url : '/homeGridPage',
        templateUrl : 'uiapp/imdbapp/models/commonPages/homeGridPage.html',
        controller: 'mainController',
         resolve :{
            'actorGridData' : function($stateParams, imdbHttpService){
                return imdbHttpService.loadAllActors();
            }
         }
    });
});

This is controller code:

/**
 * Home Page Controller for IMDB App.
 */
'use strict';
imdbapp.controller('mainController', function($scope, $http, $rootScope, $location, imdbHttpService, actorGridData) {

    $scope.init = function() {
        /**
         * un-commenting this line calls the service after controller being
         * activated (Controller Activate). This is working as expected and grid
         * loads after application is instantiated.
         */
        // $scope.loadAllActors({});
        $scope.actorGridData = actorGridData;
    };

    $scope.loadAllActors = function(inputArgs, outputArgs) {
        imdbHttpService.loadAllActors().then(function(actorListHTTPResponseData) {
            $scope.actorGridData = [];
            if (actorListHTTPResponseData != null && actorListHTTPResponseData.actorList.length > 0) {
                $scope.actorGridData = actorListHTTPResponseData.actorList;
            }
        }, function(errorMessage) {
            $scope.error = errorMessage;
        });
    };

    $scope.imdbActorGridOptions = {
        data : 'actorGridData',
        showGridFooter : true,
        resizable : true,
        sortable : false,
        enableFiltering : false,
        columnDefs : [ {
            name : 'actor_id',
            displayName : 'Actor Id',
            enableFiltering : true,
            width : 100,
            pinnedLeft : true,
            sortable : false
        }, {
            name : 'first_name',
            displayName : 'First Name',
            width : 155
        }, {
            name : 'last_name',
            displayName : 'Last Name',
            width : 160
        } ]
    };

});

index.html

<!DOCTYPE html>
<!-- define angular app -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SCROLLS -->
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css"
    type="text/css">
<link
    href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
    rel="stylesheet">
<!-- Custom styles for this template -->
<link href="uiapp/imdbapp/styles/styles.css" rel="stylesheet">

<title>IMDB AJS app</title>
</head>

<!-- define angular controller ng-controller="mainController"-->
<body ng-app="imdbapp" ng-controller="mainController">
    <div id="wrap">
        <nav class="navbar navbar-default" role="navigation">
            <!-- Header and Navigation section -->
            <div ng-include="'uiapp/imdbapp/models/header/application-navigation.html'"></div>
        </nav>

        <!-- angular templating; this is where content will be injected -->
        <div ui-view></div>
    </div>
    <!-- Footer section -->
    <footer class="footer">
        <div ng-include="'uiapp/imdbapp/models/footer/footer.html'"></div>
    </footer>

    <!-- JavaScript libraries -->
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

    <!-- AJS libraries -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script> -->
    <script src="uiapp/imdbapp/components/angular/1.4.7/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-date/0.0.8/date.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-resource.min.js"></script>
<!--    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>

    <!-- Main app file -->
    <script src="uiapp/imdbapp/scripts/app.js"></script>

    <!-- imdbapp controllers -->
    <script src ="uiapp/imdbapp/scripts/routes/imdb-route.js"></script>

        <!-- imdbapp services -->
    <script src =uiapp/imdbapp/scripts/services/HTTPServiceWrapper.js></script>
    <script src ="uiapp/imdbapp/scripts/services/ActorServices.js"></script>

    <!-- imdbapp routes -->
    <script src ="uiapp/imdbapp/scripts/controllers/UserController.js"></script>


    <!-- imdbapp directives -->


</body>
</html>

I have written a wrapper around for HTTP calls. I can post the code if this info is not sufficient.

Please help me if I'm overlooking. Thanks in advance. Same thing happens when I opted ngRoute instead of ui-route.

Anid Monsur Anid Monsur · Accepted Answer · 2015-10-02T00:58:29

When you are using ui-router, you should not use ng-controller anywhere. Your controllers are automatically instantiated for a ui-view when their appropriate states are activated.

Change <body ng-app="imdbapp" ng-controller="mainController"> to <body ng-app="imdbapp">.

Angular Js -> UI - routing -> resolve issue

1 Answers