2

I've made a module code structure, here is my 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) {


}]);

This is the problem, I can't write app.article.controller as my router does not find "ArticleController". I have to write app.main.controller instead. And it seems weird for me. I've created an object property for this module, and I don't want to see the controller in the main property, right?

I really don't understand what's going on. I'm using AngularJS version 1.3.0-beta.18.

ANSWER: As I my button.directive.js was in app.main, the right routing is:

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

        });

}]);
9
  • It's unclear to me why you have two modules, app.main and app.article, and app.main loads app.article as a dependency? It would be so much simpler if you put everything under one module.
    – Brett
    Aug 19, 2014 at 14:26
  • Because there is a main "app" with modules as dependencies (here just one). I'm trying to reproduce this behavior: github.com/sgebhardt/ng-module-boilerplate
    – Syl
    Aug 19, 2014 at 14:29
  • @sylouuu are you sure ocLazyLoad works well with $routeProvider? I believe the problem is that the article.controller.js script is not being loaded in time, that's why angular can't find the "ArticlesController" on the 'Blog.Article' module. Try adding <script src="app/article/controllers/article.controller.js"></script> to the HTML and see if it works.
    – bmleite
    Aug 19, 2014 at 15:06
  • I'm sure it works without a module organization, I checked.
    – Syl
    Aug 19, 2014 at 15:09
  • In that case I keep my question: Are you sure ocLazyLoad works well with $routeProvider? All their examples are with ui-route and not ngRoute...
    – bmleite
    Aug 19, 2014 at 15:19

1 Answer 1

1

from documentation

controller – {(string|function()=} – Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.

when you are writing ArticleController angular don't know in which namespace to look, because your controller stored in other module therefore you must provide the right reference (namespace) for your controller

UPDATE 1: the problem was that what you embedded the angular lib after body and your script (jsffidlle script) worked before angular had been attached let me update example

This is an updated example

6
  • I tried but didn't find the right syntax to call the namespaced controller.
    – Syl
    Aug 19, 2014 at 14:32
  • app.article.ArticleController Aug 19, 2014 at 14:34
  • As a string I got an error: docs.angularjs.org/error/ng/…
    – Syl
    Aug 19, 2014 at 14:39
  • Blog.Article.ArticleController Aug 19, 2014 at 14:49
  • Same result, I don't understand.
    – Syl
    Aug 19, 2014 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.