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

Question

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>

I was having this error due to gulp(ing) my angularJS code.

happyhardik
– happyhardik

2016-02-17 18:05:29 +00:00
Commented Feb 17, 2016 at 18:05 — happyhardik
– happyhardik, Commented Feb 17, 2016 at 18:05

Ravi Kumar · Accepted Answer · 2014-02-21 09:02:26Z

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.

answered Feb 21, 2014 at 9:02

Ravi Kumar

9931 gold badge12 silver badges39 bronze badges

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

Comments

Merlin · Accepted Answer · 2014-02-21 07:52:07Z

0

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', []);

edited Feb 21, 2014 at 7:52

answered Feb 21, 2014 at 7:46

Merlin

4,9252 gold badges35 silver badges53 bronze badges

4 Comments

Ravi Kumar Over a year ago

You mean to say that controllers are not created refrencing phoneCatApp but it is because on home.html#/phones i am getting the first controller(PhoneListCtrl) and i am able to display all the phones in the json it's only the problem with second controller(PhoneDetailCtrl). Anyway i tried what you suggest but it ends up with the same error on the first page home.html#/phones itself.

Merlin Over a year ago

What append if you remove $routeParams parameter from PhoneDetailCtrl and replace $http.get('phones/' + $routeParams.phoneId + '.json' with $http.get('phones/dell-streak-7.json is the error still showing ?

Merlin Over a year ago

Then sorry I can't find where the error comes from.. Your code looks fine. Try using GIT to get the working example on your computer as mentions in the tutorial. Good Luck!

Ravi Kumar Over a year ago

I got where i was wrong. It was my own stupidity. I will post the answer.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related