Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular add modules after angular.bootstrap

I'm using meteor + angular. My intention is to add more dependencies after the app bootstrap (This is because the package is the one handling the bootstrapping at the start and I don't have much control of it). Now while doing that, I would also want to enforce a basic code structure wherein for example, I would compile all controllers in one module.

Here's the basic idea:

'use strict';

angular.module('app.controllers', [])

    .controller('MainCtrl', function() {
        // ...
    })

    .controller('SubCtrl', function() {
        // ...
    })

    .controller('AnotherCtrl', function() {
        // ...
    });

Then include that to the main module as dependency:

angular.module('app', [
    'app.filters',
    'app.services',
    'app.directives',
    'app.controllers' // Here
]);

After some research, I've discovered that what I'm trying to do (Adding dependencies after bootstrap) is actually a part of a feature request to the angular team. So my option is using, for example, $controllerProvider and register() function:

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('MainCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('SubCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('AnotherCtrl', function($scope) {
        // ...
    });
});

It's works though not that elegant. The questions are:

  • What's a more elegant way of doing the config and register part?
  • Is there a way to register a module instead?
like image 284
user1966211 Avatar asked Feb 05 '14 03:02

user1966211


People also ask

Where do I put Angular modules?

While it is common in HTML applications to place scripts at the end of the <body> element, it is recommended that you load the AngularJS library either in the <head> or at the start of the <body> . This is because calls to angular. module can only be compiled after the library has been loaded.

Can an Angular app have multiple modules?

So now, you need to follow some simple steps to use multiple modules in an Angular application. Create a simple application using Angular CLI. If you are going to use Angular for the first time, click here. I am going to create an application which contains three modules: App, Employee, Admin, Home.

Can we bootstrap multiple module in Angular?

You can manually bootstrap your app by using angular. bootstrap() function, for multiple modules.

Can multiple Angular applications be bootstrapped using same element?

ans : only one angularjs application can be auto-bootstrapped. the first 'ng-app' found in the document will be used to define the root element to auto-bootstrap as an application. to run multiple applications in an html document, one must manually bootstrap them using angular bootstrap service.


2 Answers

Create your module:

angular.module('app.controllers', []);

Add it as a dependency:

angular.module('app').requires.push('app.controllers');
like image 180
Diego Avatar answered Sep 25 '22 19:09

Diego


according to this presentation (slide 12) you can assign controllerProvider to app.

Example of replacing module's controller method: http://jsfiddle.net/arzo/HB7LU/6659/

var myApp = angular.module('myApp', []);

//note overriding controller method might be a little controversial :D 
myApp.config(function allowRegisteringControllersInRuntime($controllerProvider) {
    var backup = myApp.controller;
    myApp.controller = $controllerProvider.register;
    myApp.controller.legacy = backup;
})

myApp.run(function ($rootScope, $compile) {

    myApp.controller('MyCtrl', function($scope) {
        $scope.name = 'Superhero';
    })

    var elem;
    var scope=$rootScope;
    elem = $compile('<p ng-controller="MyCtrl">{{name}}</br><input ng-model="name" /></p>')($rootScope, function (clonedElement, scope) {
        console.log('newly created element', clonedElement[0])
        document.body.appendChild(clonedElement[0]);
    });
    console.log('You can access original register via', myApp.controller.legacy);
})
like image 42
test30 Avatar answered Sep 23 '22 19:09

test30