CODEWITHSUNDEEP
javascriptangularjsrequirejs
gabric
gabric

Reputation: 1975

requirejs + angularjs code structure split in different files

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!

Upvotes: 1

Views: 351

Answers (2)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

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.

Upvotes: 1

outoftime
outoftime

Reputation: 765

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

Upvotes: 0

Related Questions