Error in component $injector

Question

I am loading my views in my app.js:

// create the module and name it testApp
var testApp = angular.module('testApp', ['ngRoute']);

// configure our routes
testApp.config(function($routeProvider) {
    $routeProvider

    // route for the contact page
    .when('/contact', {
        templateUrl : 'js/ng-app/views/contact.html',
        controller  : 'contactController'
    });

    .when('/search', {
        templateUrl : 'js/ng-app/views/search.html',
        controller  : 'searchController'
    });

});

My search partial looks like that:

My searchController.js:

testApp.controller("searchController", function($scope, $http){

    $scope.apiKey = "97f25560b91ea3ad6c84e6f8c7677e4d";
    $scope.results = [];
    $scope.filterText = null;
    $scope.init = function() {
        //API requires a start date
        var today = new Date();
        //Create the date string and ensure leading zeros if required
        var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
        $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
            //As we are getting our data from an external source, we need to format the data so we can use it to our desired affect
            //For each day get all the episodes
            angular.forEach(data, function(value, index){
                //The API stores the full date separately from each episode. Save it so we can use it later
                var date = value.date;
                //For each episodes add it to the results array
                angular.forEach(value.episodes, function(tvshow, index){
                    //Create a date string from the timestamp so we can filter on it based on user text input
                    tvshow.date = date; //Attach the full date to each episode
                    $scope.results.push(tvshow);
                });
            });
        }).error(function(error) {

        });
    };
});

However I get:

Module Error
error in component $injector
Failed to instantiate module testApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.2.8/$injector/nomod?p0=digi...
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:6:449
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:20:260
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:21:262
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:29:175
    at Array.forEach (native)
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:7:274)
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:29:115)
    at $b (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:32:232)
    at Zb.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:17:431

I think that is because I use ngRoute. However how to fix this issue without removing ngRoute?

I appreciate your replies?

Answer 1

The ngRoute module (or angular route) is not bundled with angular.js anymore and needs to be included separately. Have you remembered to do so?

From the docs:

$route is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.

Requires the ngRoute module to be installed.

And here is the documentation page with information on how to obtain angular-route.js.

ngRoute was moved to its own module from version 1.2.0 of angular. From the changelog:

due to 5599b55b, applications that use $route will now need to load an angular-route.js file and define a dependency on the ngRoute module.