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

Question

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

}); 

Answer 1

。この行を書くとき：

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

あなたはモジュールを定義しています。同じ名前で空の配列を渡してもう一度呼び出すと、その配列は上書きされます。あなたは自分のモジュールを取得したい場合は、あなたがangular.moduleの文から[]を削除する必要があなたのpokemonCtrl.jsで

var pokedexApp = angular.module('pokedexApp'); 

Answer 2

で行きます。実際にあなたが新しいモジュールを生成する代わりにapp.js

Answer 3

からあなたの1うん、あなたはapp.jsで角度アプリを作成しているが、任意のグローバルスコープのVARに代入されていないを参照しているされ、ここで何が起こっている

新しいコントローラを定義するときのように、をに追加することができます。後でpokemonCtrl.jsを実行しますが、すべての角度依存性 - 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>