it-swarm.com.de

Der Controller mit dem Namen 'PokemonCtrl' ist nicht registriert

Ich versuche, einen Controller zu meiner Angularjs-App hinzuzufügen. 

Dies ist das erste Mal, dass ich es eingerichtet habe, ohne $scope als Abhängigkeit zu verwenden, und die Routen verwendet, um den verwendeten Controller anzugeben.

Was mache ich falsch, wenn PokemonCtrl nicht registriert ist? Wenn ich den Controller im Routing deklariere, bedeutet das auch, dass ich ihn nicht woanders deklarieren muss?

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!"

});
6
DDelgro

Das Problem ist, dass Sie Ihre Moduldefinition überschreiben. Wenn Sie diese Zeile schreiben: 

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

sie definieren ein Modul. Wenn Sie es erneut aufrufen, mit demselben Namen und einem leeren Array übergeben, überschreiben Sie es. Wenn Sie nur Ihr Modul abrufen möchten, gehen Sie mit 

var pokedexApp = angular.module('pokedexApp');
22
Leonardo Lana

In Ihrer pokemonCtrl.js müssen Sie den [] aus der angular.module-Anweisung entfernen. 

Was hier tatsächlich passiert, ist, dass Sie ein neues Modul generieren, anstatt auf Ihr Modul aus app.js zu verweisen

2
CraigR8806

Ja, du erstellst eine angular App in app.js, weisen es jedoch keiner globalen Variablen zu, die Sie später hinzufügen können , wie beim Definieren eines neuen Controllers. Das machst du später in pokemonCtrl.js, aber dann sind weder alle Angular Abhängigkeiten - ngAnimate und ngCookies - verfügbar, noch wird Ihre Konfiguration mit Routen eingerichtet.

Sie müssen es folgendermaßen einrichten:

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-Datei

<h1>{{text}}</h1>
1
Pixxl