requirejs + angularjs code structure split in different files

Question

I'm using requirejs and Angular and I'm trying to create an application structure that allows me to split every controller/services/directives etc in different files. This is the structure I'd like to achieve:

src/
components/
    Navigation/
        index.js
        module.js
        NavigationController.js
        NavigationService.js

In module.js I'd like to do something like this:

define(['angular', './NavigationService', './NavigationController'], function (angular, NavigationService, NavigationController) {
    'use strict';
    return angular.module('Myapp.Navigation', [])
        .controller('NavigationController', NavigationController)
        .service('NavigationService', NavigationService)
});

And having the controller/service definition defined in a separated js file.

The issue is that I don't know how to define these files. I've tried with this syntax:

//NavigationService.js
define( function() {

            this.doNavigation = function () {
                console.log('I am navigating');
            }
    });

but doesn't look to be working. Have you ever seen this kind of structure using requirejs?

Thanks!

Nikos Paraskevopoulos · Accepted Answer · 2015-06-20 11:08:05Z

1

Try:

//NavigationService.js
define([], function() {
    NavigationController.$inject = ['$scope', '$q', 'myOwnService', 'etc'];
    function NavigationController($scope, $q, myOwnService, etc) {
        ...
    }
    return NavigationController;
});

You may also be interested in angular-require-lazy.

answered Jun 20, 2015 at 11:08

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

outoftime · Accepted Answer · 2015-06-20 10:51:37Z

0

Actually, you don't need requirejs in case of single application. Top level hierarchy in angular is application. All applications have its set of modules and angular should have all it's sources from the start, so you have no need to load it using requirejs.

Instead, I'd recommend you to use grunt with concat plugin. It will assemble you application's pieces all together and you will have single file for each application.

Then, when you have one file for each application, you can load it with requirejs, it have sense, but not loading modules.

Also check angular code style, it has a lot of suggestions of how to write in right way.

UPD: About your problem: if you have set of modules that are common for your applications (I mean you have a lot of them) then you probably interested in using require.js with angular.js. In this case read and follow recommendations from this article. Otherwise, you don't really need require.js

edited Jun 20, 2015 at 10:51

answered Jun 20, 2015 at 10:43

outoftime

7638 silver badges21 bronze badges

2 Comments

gabric Over a year ago

Thanks for the response. Unfortunately I have to use requirejs for other reasons (the project is more complex, it uses libraries and this is just a small part of it). I'm using grunt-contrib-requirejs

outoftime Over a year ago

@gabric read article above, it has few main thoughts I found not obvious: requirejs and angularjs has separate injection managers; you should use manual bootstraping for angular, if you use requirejs.

Collectives™ on Stack Overflow

requirejs + angularjs code structure split in different files

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related