Structuring RequireJS + AngularJS

Question

I'd like to work with both angularjs and requirejs. Before that, I worked with backbonejs and requirejs. I felt a bit more comfortable with that combination. I also got the bower-seed from github, but it's too nested for the beginning.

Here's what I don't understand:

Require forces me to bootstrap angular myself.
Therefore I create a module named by my app. Then I bootstrap that module to the document.

angular.module('app', []);
angular.bootstrap(document, ['app']);

That happens after the document ist ready, which is checked by this function: angular.element(document).ready(function() { ... bootstraping ... }

So far I get it. But how and at what point do I put the ng-app into the header?

app.js has the function to put all my controllers, routers etc. into the app. By returning all modules I loaded inside the require-module. In my case I only load controllers

///app.js///
define(['angular', 'controller'], function (angular){
    return angular.module('app',[
        'app.controller',
        'app.router'
    ]);
});

My controller:

define(['index', 'uirouter'], function(controllers){
    controllers.controller('homeCtrl', function($scope, $routeParams){
         $scope.logId = "testId";
    });
});

Each controller puts it's content in a collection inside the index-module

my Index file:

///index///
define(['angular'], function(angular){
    return angular.module('app.controllers',[]);
});

The Index file returs the controller-module to every controller-file requiring it. So I have all controllers in one module, by loading different controller-files Here's my question: is this procedure correct and can I go on loading all angular-modules like this?

Im confused by working with angular-modules and require-modules ... Maybe anyone got a nice instruction in how to set up a angular-require project easily :)

Here's a link to the project:LINK ;) Maybe anyone could help me a little bit :)

i am also in the same boat as you are . I m just as beginner as you are . However in my understanding angular modules are determined by angular specific segments but it has nothing to do with requirejs modules . requirejs modules and define sections work on their own. They dont collide with angular modules . rather angular modules are loaded through require js — Joy
– Joy, Commented Sep 25, 2013 at 10:38

Community · Accepted Answer · 2017-05-23 12:14:11Z

4

I am experimenting with this example: https://github.com/nikospara/angular-require-lazy

I also mentioned it in this SO question.

It needs work, but it is working; discussion on this topic really interests me.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Sep 25, 2013 at 9:28

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

1 Comment

marcel Over a year ago

Thank you, I'll have a look at your example :)

Collectives™ on Stack Overflow

Structuring RequireJS + AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related