web-dev-qa-db-fra.com

Le contrôleur avec le nom 'PokemonCtrl' n'est pas enregistré

J'essaie d'ajouter un contrôleur à mon application Angularjs. 

C'est la première fois que je le configure sans utiliser $scope comme dépendance et utilise les routes pour déclarer quel contrôleur j'utilise.

Qu'est-ce que je fais mal lorsque PokemonCtrl n'est pas enregistré? De plus, si je déclare le contrôleur dans le routage, cela signifie-t-il que je n'ai pas à le déclarer ailleurs?

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

});
javascriptangularjscontrollers
6
DDelgro

Le problème est que vous redéfinissez votre définition de module. Lorsque vous écrivez cette ligne: 

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

vous définissez un module. Si vous l'appelez à nouveau, avec le même nom et en passant un tableau vide, vous le remplacez. Si vous voulez juste récupérer votre module, vous allez avec 

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

Dans votre pokemonCtrl.js, vous devez supprimer le [] de l'instruction angular.module. 

Ce qui se passe réellement, c’est que vous générez un nouveau module au lieu de référencer votre module à partir de app.js

2
CraigR8806

Oui, vous créez une application angulaire dans app.js, mais vous ne l'attribuez pas à une variable globale que vous pouvez ensuite ajouter à ajouter, comme lors de la définition d'un nouveau contrôleur. Vous le ferez plus tard dans pokemonCtrl.js mais toutes les dépendances angulaires - ngAnimate et ngCookies - ne seront pas disponibles et votre configuration avec les routes ne sera pas configurée.

Vous devrez le configurer comme suit:

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!";
}]);

Fichier HTML 

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