Der controller mit dem Namen 'PokemonCtrl' ist nicht registriert

Ich versuche, um einen controller hinzuzufügen zu meinem Angularjs app.

Dies ist das erste mal, ich habe es eingerichtet, ohne mit $scope als Abhängigkeit und nutzte die Strecken, um zu erklären, welchen controller ich verwende.

Was mache ich falsch, wo PokemonCtrl ist nicht registriert? Auch, wenn ich verkünde, daß Sie den controller in der routing bedeutet das, dass ich nicht zu erklären, es irgendwo anders?

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

});
Fügen Sie Ihre controller 'pokemonCtrl.js' index-Seite 🙂
Diese Feste!!!! Ich vergessen, dass Sie anrufen müssen jeden controller in die index-Seite! Ich bin es gewohnt .Net MVC, wo Sie bündeln können und sich keine Gedanken mehr über ihn! Danke!!!

InformationsquelleAutor DDelgro | 2016-12-22

  1. 22

    Das problem ist, Sie überschreiben Ihre Modul-definition. Beim schreiben dieser Zeile : 

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

    definieren Sie ein Modul. Wenn Sie nennen es wieder, mit den gleichen Namen und die übergabe eines leeren array überschrieben wird. Wenn Sie nur wollen, um das abrufen Modul, gehen Sie mit 

    var pokedexApp = angular.module('pokedexApp');
    Genial! Funktioniert wie ein Charme. Danke

    InformationsquelleAutor Leonardo Lana

  2. 2

    In Ihrem pokemonCtrl.js Sie müssen entfernen Sie die [] von der angular.module - Anweisung.

    Was ist eigentlich hier passiert, Sie generieren ein neues Modul anstelle von verweisen auf Ihre einem aus app.js

    InformationsquelleAutor CraigR8806

  3. 1

    Yeah, erstellen Sie eine angular-app in app.js aber nicht die Zuordnung zu globalen Gültigkeitsbereich var, dann können Sie add-on später, wie bei der Definition eines neuen Controllers. Sie, die später in pokemonCtrl.js dann aber alle Winkel-Abhängigkeiten -- ngAnimate und ngCookies -- nicht verfügbar sein, noch wird Ihre Konfiguration mit Routen eingerichtet werden.

    Werden Sie brauchen, um es einzurichten, etwa 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-Datei

    <h1>{{text}}</h1>
    Wie kann ich dies tun, ohne Verwendung von $scope? Ich habe Jon Pappa ' s Winkel-Stylesheet, dass es besser ist, nicht zu verwenden, $Umfang, damit es nicht zu Kollisionen mit übergeordneten Bereichs-und-Kind-Bereich.
    Verwenden Sie $scope zu lassen, die Seite oder ein element, das gebunden ist, um den controller-Zugriff auf diese Informationen.
    Ich empfehle zu geben, die ein Lesen durch des Winkel-Dokumentation. $scope spielt eine große Rolle in Eckige Apps und wissen, was es ist und wie es zu benutzen ist entscheidend für eine nette app. Darüber hinaus werden die "übergeordneten" Bereich, oder Ihr root-controller (Sie können mehrere Controller geht) würde aufgerufen werden, indem Sie $parent sowieso. docs.angularjs.org/guide/scope

    InformationsquelleAutor Pixxl

Schreibe einen Kommentar