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');