Load controller after bootstrap angularjs

Question

I am using requirejs and angularjs to load the module inside my application. The problem I am facing is I dont know how to load the controller after angular has been bootstrapped. Here is my code :

main.js :

require(['app', //all my scripts go here 
function(){
 angular.bootstrap(document, ['myApp']);
});

app.js :

define([], function(){
    var myApp = angular.module('myApp', ['ngRoute']);
    $routeProvider.
        when('/home', {
                templateUrl : 'partials/home.html',
                controller : 'UserRegisterCtrl'
            }).
            otherwise({
                redirectTo : '/home'
            })
    return myApp;
})

controller.js

define(['app'], function(app){
    app.controller('MyCtrl', function($scope){});
})

myApp.html

body(ng-app)
     <div ng-controller = 'MyCtrl'></div>  <-- I can not put MyCtrl here 
because I think the MyCtrl has been declared before myApp has been bootstrapped

Therefore I really need to know if there is a way to load the MyCtrl controller after myApp has been bootstrapped. I am really new to Angularjs. Any help would be really appreciate.

A complex problem. Take a look at a couple of efforts, there are even more in the wild... none is complete I think: angular-require-lazy, angularAMD — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jan 10, 2014 at 8:24

Community · Accepted Answer · 2017-05-23 10:24:19Z

1

If you are manually bootstrapping your angular app there is no need for ng-app, because this is just a directive that pretty much does the same thing.

This little trap caused some people a headache before:

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Jan 10, 2014 at 8:57

angabriel

5,0582 gold badges37 silver badges37 bronze badges

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

Comments

marcoseu · Accepted Answer · 2014-01-10 09:51:48Z

1

When you use ng-app in your html, the bootstrap happens automatically. In this case, it depends what you put in the <script> tag in your index.html.

I am assuming that you follow the RequireJS usage where you load angular using RequireJS. If so, make sure you declare the dependency of angular to your app using shim. If that is not the case, please state how your are loading angular and share the content of your main.js.

It was really tricky for me to get RequireJS to work with AngularJS so I created following project that helped me deal with the complexity:

http://marcoslin.github.io/angularAMD

answered Jan 10, 2014 at 9:51

marcoseu

3,9622 gold badges21 silver badges36 bronze badges

Collectives™ on Stack Overflow

Load controller after bootstrap angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related