Error: [$injector:unpr] in angular.js

Question

Error: [$injector:unpr] in angular.js

I have just started learning angularjs. I am trying the tutorial one given on their official website.

http://docs.angularjs.org/tutorial/step_08

What i am trying to achieve is to build multiple views by adding routing.

when i access home.html it is displaying all the mobile list perfectly but once i click on the link to get the details of any of the mobile the next page gives me this error

[$injector:unpr]

do notice there is no unknown provider error

and all the expression on phone-detail.html is being printed as it is not being evaluated.

here is my app.js code

var phonecatApp = angular.module('phonecatApp', [
        'ngRoute',
        'phonecatControllers'
    ]);

    phonecatApp.config(['$routeProvider',function($routeProvider) {
        $routeProvider.
        when('/phones', {
            templateUrl: 'partials/phone-list.html',
            controller: 'PhoneListCtrl'
        }).
        when('/phones/:phoneId', {
            templateUrl: 'partials/phone-detail.html',
            controller: 'PhoneDetailCtrl'
        }).
        otherwise({
            redirectTo: '/phones'
        });
    }]);

then my controller.js code is

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',function ($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        alert(data);
        $scope.phones = data;
    });

    $scope.orderProp = 'age';
}]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams','$http',function($scope, $routeParams,$http) {
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
        $scope.phone = data;
    });
}]);

home.html code

<html lang="en" ng-app="phonecatApp">
        <head>
        <title>Hello world example from angular js</title>
        <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
        <link type="text/css" rel="stylesheet" href="css/custom.css"/>
        <script type="text/javascript" src="scripts/angular.min.js"></script>
        <script type="text/javascript" src="scripts/angular-route.min.js"></script>
        <script type="text/javascript" src="scripts/app.js"></script>
        <script type="text/javascript" src="scripts/controller.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="container">
                <div ng-view></div>
            </div>
        </div>
    </body>
</html>

phone-list.html code -

<div class="col-lg-12">
    <hr>
    <p class="pull-right col-lg-4">
        <input type="text" ng-model="query" class="form-control col-lg-6" placeholder="Search" style="width:auto;">
        <select ng-model="orderProp" class="form-control col-lg-6" style="width:auto;">
            <option value="name">Alphabetical</option>
            <option value="age">Newest</option>
            <option value="-age">Oldest</option>
        </select>
    </p>
    <p class="col-lg-6">Total number of phones: {{phones.length}}</p>
    <div class="clearfix"></div>
    <hr>
    <h3 ng-bind-template="Thumbnail view | Search for : {{query}}">List view</h3>
    <div class="row">
        <div class="col-lg-4"  ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            <div class="thumbnail">
                <a href="#/phones/{{phone.id}}">
                    <img src="{{phone.imageUrl}}" data-src="{{phone.imageUrl}}" alt="{{phone.name}}">
                </a>
                <div class="caption">
                    <h3>{{phone.name}}</h3>
                    <p>{{phone.snippet}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

phone-detail.html code -

<div class="phone-images">
  <img ng-src="{{img}}"
       class="phone"
       ng-repeat="img in phone.images"
       ng-class="{active: mainImageUrl==img}">
</div>

<h1>{{phone.name}}</h1>

<p>{{phone.description}}</p>

javascript
angularjs

Answer 1

I got it where was the problem.

It was because i copied content in phone-detail.html from github which should come in a later step. in phone-detail there was some code like

here checkmark is a filter but i didn't introduced filter at all.

So solution was I added filter.js with content

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

then import script.js in home.html and it worked fine.

So i did two mistake - 1. Introducing code for filters without registering any filter. 2. Didn't post the whole code for phone-detail.html so that you can figure out the mistake number one.

A special thanks to @Lorenzo to help me dig out the problem.

Answer 2

As you defined an App module with var phonecatApp = ... you have to use it to create your controllers for Angular to know that phonecatController "belongs to" phonecatApp.

So just replace angular.module with phonecatApp.controller

Replace this line

var phonecatControllers = angular.module('phonecatControllers', []);
//------------------------^-------------^---------------------------

With this

var phonecatControllers = phonecatApp.controller('phonecatControllers', []);
//------------------------^--------------------^---------------------------

Or you can do

angular.module('phonecatApp').controller('phonecatControllers', []);