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', []);

您正在定义一个模块。如果再次调用它，使用相同的名称并传递一个空数组，则覆盖它。如果您只想检索模块，请使用

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

Answer 2

在pokemonCtrl.js中，您需要从[]语句中删除angular.module。

这里实际发生的是你正在生成一个新模块而不是从app.js引用你的模块

Answer 3

是的，您正在app.js中创建一个角度应用，但不会将其分配给任何全局范围的var，然后您可以添加以便稍后添加，就像定义新控制器时一样。您稍后会在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>

控制器名为＆＃39; PokemonCtrl＆＃39;没有注册

3 个答案: