Question

我已经制作了模块代码结构，这是我的index.html：

<!doctype html>
<html>
    <head>

        <!-- AngularJS -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.0-beta.18/angular-route.min.js"></script>

        <!-- Lazy loading module -->
        <script src="assets/libs/ocLazyLoading.min.js"></script>

        <!-- App -->
        <script src="app/app.js"></script>
        <script src="app/config.js"></script>

        <script src="app/article/article.js"></script>

        <base href="http://localhost/angularjs-blog/">

    </head>

    <body data-ng-app="Blog">

        <div data-ng-view></div>

    </body>
</html>

app.js：

var app = {};

app.main = angular.module('Blog', [
    // Tools
    'ngRoute',
    'oc.lazyLoad',

    // Modules
    'Blog.Article'
]);

config.js：

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

    $routeProvider.otherwise({
        redirectTo: '/'
    });

}]);

article.js：

app.article = angular.module('Blog.Article', ['ngRoute', 'oc.lazyLoad']);

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

    $routeProvider
        .when('/', {
            templateUrl: 'app/article/views/articles.html',
            controller: 'ArticlesController',
            resolve: {
                lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'Blog',
                        files: [
                            'app/article/controllers/articles.controller.js',
                            'app/article/article.service.js',
                            'common/directives/button.directive.js'
                        ]
                    });
                }]
            }
        })
        .when('/article/:id', {
            templateUrl: 'app/article/views/article.html',
            controller: 'ArticleController',
            resolve: {
                lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'Blog',
                        files: [
                            'app/article/controllers/article.controller.js',
                            'app/article/article.service.js'
                        ]
                    });
                }]
            }

        });

}]);

article.controller.js：

// Controller
app.article.controller('ArticleController', ['$scope', 'ArticleService', function ($scope, ArticleService) {


}]);

这是问题，我无法写app.article.controller，因为我的路由器找不到＆＃34; ArticleController＆＃34;。我必须写app.main.controller。这对我来说似乎很奇怪。我为这个模块创建了一个对象属性，我不想在main属性中看到控制器，对吧？

我真的不明白发生了什么。我使用AngularJS版本1.3.0-beta.18。

ANSWER ：正如我的button.directive.js位于app.main，正确的路由是：

app.article = angular.module('Blog.Article', ['ngRoute', 'oc.lazyLoad']);

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

    $routeProvider
        .when('/', {
            templateUrl: 'app/article/views/articles.html',
            controller: 'ArticlesController',
            resolve: {
                lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load([{
                        name: 'Blog',
                        files: ['common/directives/button.directive.js']
                    }, {
                        name: 'Blog.Article',
                        files: [
                            'app/article/controllers/articles.controller.js',
                            'app/article/article.service.js'
                        ]
                    }]);
                }]
            }
        })
        .when('/article/:id', {
            templateUrl: 'app/article/views/article.html',
            controller: 'ArticleController',
            resolve: {
                lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'Blog.Article',
                        files: [
                            'app/article/controllers/article.controller.js',
                            'app/article/article.service.js'
                        ]
                    });
                }]
            }

        });

}]);

Answer 1

来自文档

controller - {（string | function（）=} - 控制器fn应该与新创建的作用域关联，或者如果作为字符串传递，则与已注册控制器的名称相关联。

当您编写ArticleController angular时，不知道要查找哪个命名空间，因为您的控制器存储在其他模块中，因此您必须为您的控制器提供正确的引用（命名空间）

更新1： 问题是你嵌入了角度lib后身体和你的脚本（jsffidlle脚本）在角度附加之前工作了让我更新例子

This is an updated example

AngularJS：模块组织的奇怪控制器调用

1 个答案: