CODEWITHSUNDEEP
angularjsrequirejs
marcel
marcel

Reputation: 3272

Structuring RequireJS + AngularJS

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 :)

Upvotes: 3

Views: 1578

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

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.

Upvotes: 4

Related Questions