The controller with the name 'PokemonCtrl' is not registered

Question

I am trying to add a controller to my Angularjs app.

This is the first time I have set it up without using $scope as a dependency and used the routes to declare what controller I am using.

What am I doing wrong where PokemonCtrl is not registered? Also, if I declare the controller in the routing does that mean I don't have to declare it anywhere else?

app.js

    'use strict';

/**
 * @ngdoc overview
 * @name pokedexApp
 * @description
 * # pokedexApp
 *
 * Main module of the application.
 */
angular
    .module('pokedexApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch'
    ])
    .config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl',
                controllerAs: 'main'
            })
            .when('/pokemon', {
                templateUrl: 'views/pokemon.html',
                controller: 'PokemonCtrl',
                controllerAs: 'controller'

            })
            .otherwise({
                redirectTo: '/main'
            });
    });

pokemonCtrl.js

    'use strict';

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

pokedexApp.controller('PokemonCtrl', function() {
    var vm = this;

    vm.text = "Catch em All!"

});

Answer 1

The problem is you are overriding your module definition. When you write this line :

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

you are defining a module. If you call it again, with the same name and passing an empty array, you override it. If you just want to retrieve your module, you go with

var pokedexApp = angular.module('pokedexApp');

Answer 2

In your pokemonCtrl.js you need to remove the [] from the angular.module statement.

What is actually happening here is you are generating a new module instead of referencing your one from app.js

Answer 3

Yeah, you are creating an angular app in app.js but are not assigning it to any global-scoped var that you can then add on to later, like when defining a new controller. You do that later in pokemonCtrl.js but then all the Angular Dependencies -- ngAnimate and ngCookies -- will not be available, nor will your config with routes be setup.

You'll need to set it up like so:

app.js

// Define your global angular app var
var pokedexApp = angular
.module('pokedexApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
]);

pokedexApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
            controllerAs: 'main'
        })
        .when('/pokemon', {
            templateUrl: 'views/pokemon.html',
            controller: 'PokemonCtrl',
            controllerAs: 'controller'

        })
        .otherwise({
            redirectTo: '/main'
        });
});

pokemonCtrl.js

// Adding a note here, I am setting up this controller 
// by enclosing the function within an Array, you don't *have* to
// do this, but it helps in the future if this file gets minified
// by letting Angular *know* what the mapping is for this controller's
// dependencies.

pokedexApp.controller('PokemonCtrl', ['$scope', function($scope) {
  // you need to let this controller know you want to have access
  // to the "scope" -- $scope
  $scope.text = "Catch em All!";
}]);

HTML File

<h1>{{text}}</h1>