angularjs > router resolve > "Error: [$injector:unpr] Unknown provider"

Question

im trying to add a resolve\promise to my project, so when you ask for a page it will load up only after receiving the json from the server. this is my js code:

'use strict';

 angular.module('myApp.show', ['ngRoute'])

 .config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/show', {
    templateUrl: 'views/show.html',
    controller: 'showCtrl',
    resolve: {
        booksList: function ($http) {
            return ($http.get('data/books.json')
                .then(function (data) {
                    return data;
                }));
        }
     }
  });
}])

.controller('showCtrl', ['booksList', '$scope', function (booksList, $scope) {
    $scope.books = booksList;
    $scope.removeRow = function (productIndex) {
       if (window.confirm("are you sure?")) {
           $scope.books.splice(productIndex, 1);
    }
  }
}])

but this is what i get: Error: [$injector:unpr] Unknown provider: booksListProvider <- booksList <- showCtrl

i kinda new to angular, but i followed several tutorials and while it worked in the video - i keep getting errors.

html:

<div class="table-responsive"> 
    <div ng-app="myApp.show" ng-controller="showCtrl">   <!-- ctrl -->
        <table st-table="rowCollection" class="table table-striped">
            <thead>
                <tr>
                    <th st-sort="author">Author</th>
                    <th st-sort="date">Date</th>
                    <th st-sort="title">Title</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(bookIndex, book) in books">
                <td class="col-md-3">{{ book.author }}</td>
                <td class="col-md-3">{{ book.date | date }}</td>
                <td class="col-md-4">{{ book.title | beutifyTitle }}</td>
                <td class="col-md-1"><ng-include src="'views/partials/editBook.html'"></ng-include></td>
                <td class="col-md-1"><button class="btn btn-warning" ng-click="removeRow()">Delete</button></td>
                </tr>
            </tbody>
        </table> 
    </div> 
</div

I'd expect that loading the Controller using ng-controller won't work with the router....The resolve needs to be injected via ngRoute - I only have experience with UI-Router though — Daniel
– Daniel, Commented Mar 26, 2017 at 12:10

Pankaj Parkar · Accepted Answer · 2017-03-26 12:26:28Z

3

You should be removing ng-controller="showCtrl" from your template. The reason being is, you are assing showCtrl via router already. But as you are again wrote ng-controller over inline template in that case it fails to get booksList resolve provider.

answered Mar 26, 2017 at 12:26

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

user3328918 Over a year ago

wow! thanks!! i spent so many time on this issue.. not realizing its in the html code and not the JS.. anyway, your help is much appreciated!

Pankaj Parkar Over a year ago

@user3328918 thanks, You could accept mine answer :)

Collectives™ on Stack Overflow

angularjs > router resolve > "Error: [$injector:unpr] Unknown provider"

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