javascript - 错误: ng:areq Bad Argument AngularJS

Question

我正在开发一个新的作品集网站，希望使用 AngularJS 来显示我的作品，并使用纯 css 来格式化布局等。

我找到了一个有用的教程，概述了如何构建应用程序以供将来扩展，并设置了如下所示的文件树:

所以每个组件基本上都是一个迷你 MVC。我已经在 app.routes.js 中设置了路线并组织了 app.module.js，如下所示:

app.module.js:

angular.module('app', ['ngRoute', 'appControllers', 'appResources']);
angular.module('appControllers', ['ngRoute']);
angular.module('appResources', ['ngResource']);

app.route.js:

angular.module('app')

    .config(['$routeProvider', function ($routeProvider) {

        'use strict';

        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'app/components/home/home-view.html',
            controller  : 'HomeCtrl'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'app/components/about/about-view.html',
            controller  : 'AboutCtrl'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'app/components/contact/contact-view.html',
            controller  : 'ContactCtrl'
        });
}]);

所以这是我的设置，现在，我只需要看到路线的每个 Controller 都在工作，然后我将开始添加我的内容，但我立即遇到了障碍，因为每个 View 的 Controller 显示为未定义。

这是一个 Controller 的示例，它们目前都是相同的，但具有不同的消息:

angular.module('appControllers')

    .controller('AboutCtrl', ['$scope', '$http', function ($scope, $http) {
    'use strict';
    $scope.message = 'This will be the about page';
    }]);

html 是正确的，没有拼写错误，所以我很困惑为什么这会显示为错误。

这与我设置模块的方式有关吗？

任何帮助将不胜感激。

提前非常感谢。

Answer 1

此错误告诉您，您的HomeCtrl未定义。您需要包含 <script src="app/components/home/HomeController.js"></script>在你的index.html文件以包含具有此类应用配置的每个 Controller 。

如果你想避免这种情况，你可以像这样搭建你的应用程序。

(function () {
    "use strict";

    angular.module('appControllers')

        .controller('HomeCtrl', ['$scope', '$http', function ($scope, $http) {
            $scope.message = 'This will be the home page';
        }])

        .controller('AboutCtrl', ['$scope', '$http', function ($scope, $http) {
            $scope.message = 'This will be the about page';
        }]);

})();

没有单一的“最佳”方法来做某事。这完全取决于您的应用程序的需求和偏好。