Угловая настройка маршрутизации дает ошибку «не является функцией»

Question

Я получаю эту ошибку Error: Argument 'readingController' is not a function, got undefined. и ничего не отображается на странице. Что я сделал не так?

var app = angular.module('Tutorials', ['functions', 'ui.utils', 'tutorials']).controller('main', function($scope, $element, Position, Romanize) { 
$scope.sectionNumber = Position.sectionNumber; 
$scope.tutorialNumber = Position.tutorialNumber; 
$scope.questionNumber = Position.questionNumber; 
$scope.sections = sections; 
$scope.currentMaterials = [] 
    $scope.currentMaterial = ""; 

var readingController = function($scope, Romanize) { 
    $scope.currentMaterials = $scope.sections[$scope.sectionNumber].tutorials[$scope.tutorialNumber].material; 
    $scope.currentMaterial = $scope.currentMaterials[$scope.questionNumber]; 
    $scope.getRomanization = function(Romanize) { 
     Romanize.get($scope.currentMaterial).then(function(d) { 
      $scope.romanized = d; 
     }); 

     $scope.$apply(); 
    }; 
    $scope.getRomanization(Romanize); 
    $scope.$apply(); 

    $scope.checkRomanization = function(userRomanization) { 
     if ($scope.romanized === userRomanization) { 
      $scope.questionNumber++; 
      $scope.getRomanization(Romanize); 
     }; 
    } 
}; 

$scope.loadFromMenu(0, 0, true); 

}).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
$routeProvider.when('/grammar/Reading/Basic Vowels', { 
    templateUrl: '/grammar/Templates/Reading.html', 
    controller: 'readingController' 
}).when('/test/secondTab', { 
    templateUrl: '/js/test/angular/views/secondTab.html', 
    controller: 'SecondTabCtrl' 
}).otherwise({ 
    redirectTo: '/' 
}); 

$locationProvider.html5Mode(true); 
}]); 

Answer 1

Угловой внешний вид контроллеров, которые определены внутри углового модуля.

Вы определили функцию контроллера, но вы должны сказать Угловая об этом:

app.controller('readingController', readingController) 

Или, как один из комментариев к вашему вопросу предлагает, просто определить функцию контроллера внутри вызова controller:

app.controller('readingController', function($scope, Romanize) { 
    // controller stuff 
}); 

Answer 2

Вот другой пример организации контроллеров (или что-нибудь еще для вашего приложения):

angular.module('MyApp', []) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/', { controller: 'MainCtrl' }) 
    .when('/first-page', { controller: 'FirstCtrl' }) 
    .when('/second-page', { controller: 'SecondCtrl' }); 
}]) 

.controller('MainCtrl', ['$rootScope', '$scope', function ($rootScope, $scope) { 
    // ... 
}]) 

.controller('FirstCtrl', ['$scope', function ($scope) { 
    // ... 
}]) 

.controller('SecondCtrl', ['$scope', '$http', function ($scope, $http) { 
    // ... 
}]); 

Или, может быть, в собственном файле, например. foobar.js

angular.module('MyApp').controller('FoobarCtrl', ['$scope', function ($scope) { 
    // ... 
}]);