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.
