web-dev-qa-db-ja.com

「PokemonCtrl」という名前のコントローラーが登録されていません

Angularjsアプリにコントローラーを追加しようとしています。

$scopeを依存関係として使用せずにセットアップし、ルートを使用して使用しているコントローラーを宣言するのは初めてです。

PokemonCtrlが登録されていない場合、何が間違っていますか？また、ルーティングでコントローラーを宣言した場合、他の場所で宣言する必要はありませんか？

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

問題は、モジュール定義をオーバーライドしていることです。この行を書くとき：

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

モジュールを定義しています。同じ名前で空の配列を渡して再度呼び出すと、オーバーライドします。モジュールを取得したいだけなら、

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

PokemonCtrl.jsで、[]ステートメントからangular.moduleを削除する必要があります。

ここで実際に行われているのは、app.jsからモジュールを参照するのではなく、新しいモジュールを生成していることです

2
CraigR8806

ええ、あなたはangular app in app.jsしかし、それをグローバルスコープの変数に割り当てていないので、新しいコントローラーを定義するときのように、後でonに追加できます。後でpokemonCtrl.jsただし、すべてのAngular Dependencies-ngAnimateおよびngCookies-は使用できません。また、ルートを使用した構成もセットアップされません。

次のように設定する必要があります。

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ファイル

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