AngularJS：具有模块组织的奇怪控制器调用_Angularjs_Angularjs Routing

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

angularjs

AngularJS：具有模块组织的奇怪控制器调用,angularjs,angularjs-routing,Angularjs,Angularjs Routing,我制作了一个模块代码结构，下面是我的index.html： <!doctype html> <html> <head>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script> <s

我制作了一个模块代码结构，下面是我的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>

config.js:

var app = {};

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

    // Modules
    'Blog.Article'
]);

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

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

}]);

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

        });

}]);

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


}]);

article.js:

var app = {};

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

    // Modules
    'Blog.Article'
]);

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

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

}]);

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

        });

}]);

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


}]);

article.controller.js:

var app = {};

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

    // Modules
    'Blog.Article'
]);

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

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

}]);

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

        });

}]);

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


}]);

这就是问题所在，我无法编写

app.article.controller

，因为我的路由器找不到“ArticleController”。我必须写

app.main.controller

。这对我来说似乎很奇怪。我已经为这个模块创建了一个对象属性，我不想在

main

属性中看到控制器，对吗

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

回答：当我在app.main中找到我的button.directive.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: ['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'
                        ]
                    });
                }]
            }

        });

}]);

从文件

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

编写

ArticleController

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

更新1: 问题在于，在附加angular之前，在body和脚本（JSFfidle脚本）之后嵌入angular库的内容工作正常。让我更新示例

我不清楚为什么你有两个模块，

app.main

和

app.article

，和

app.main

作为依赖项加载

app.article

？如果你把所有的东西都放在一个模块下，那就简单多了。因为有一个主“app”以模块作为依赖项（这里只有一个）。我试图重现这种行为：@sylouuu您确定ocLazyLoad与

$routeProvider

配合得很好吗？我认为问题在于article.controller.js脚本没有及时加载，这就是angular找不到“ArticlesController”的原因在“Blog.Article”模块上。尝试将

添加到HTML中，看看它是否有效。我确定它在没有模块组织的情况下有效，我检查了。在这种情况下，我保留我的问题：你确定ocLazyLoad与

$routeProvider

一起工作良好吗？他们所有的示例都是带有而不是

ngRoute

。我尝试了，但没有找到正确的语法要将名称空间的controller.app.article.articleControllera作为字符串调用，我得到一个错误：Blog.article.articleControllerName result，我不明白。