Switching data-ng-app module configurations in angularjs

Question

I am trying to separate my application in modules. I have a login module and the rest of the application. My idea is that the user can not access the rest of the app without having to login at first. For that I use two angular.module with different configurations but I can't seam to dynamically have angular resolve the new app.js and use it's configuration on my webapp.

//index.html
<div data-ng-app="login" ui-view></div>

//login.js
.state('user.signin', {
            url: '/signin',
            templateUrl: 'login.html'
        })
        .state('appUIView', {
            url: '/appUIView',
            templateUrl: 'appUIView.html',
            resolve: {
                deps: ['uiLoad',
                  function( uiLoad ){
                    return uiLoad.load( [
                                            'js/app.js'//I try resolving the app.js so I can now use it's configuration
                                        ]);
                }]
            }
        })
 //appUIView.html
 <div data-ng-app="app" ui-view></div>//uses the app defined in app.js


 //app.js
 $urlRouterProvider
    .otherwise('/app');//when app.js is loaded if the new configuration is used the page should land on app.html
 $stateProvider   
        .state('app', {
            url: '/app',
            templateUrl: 'app.html'
        })

http://plnkr.co/edit/FOAegZmmWjuPeWp3VhBe

Thanks for the help!

wvdz · Answer 1 · 2014-11-04T15:09:18.927

1

A webapp in Angular normally has 1 ng-app module.

The most reasonable thing to do is, if you really need two separate apps, is to develop two separate angulars apps. You could have the login module redirect to the page that hosts the secure version of the app. Of course, this means you have to do a regular redirect, triggering a browser reload.

You can also have multiple ng-apps in 1 application. In this case you have to use bootstrap to switch between them. However, I wouldn't resort to this unless there were really good reasons. It seems a bit of a hack.

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

edited Nov 04 '14 at 15:09

answered Nov 04 '14 at 10:46

wvdz

16,251
4
53
90

What about this: http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page – Dave Nov 04 '14 at 15:00
Alright, didn't know that. I guess that answers your question. I edited my answer. – wvdz Nov 04 '14 at 15:09
Thanks, can someone show me how to implement that on my http://plnkr.co/edit/FOAegZmmWjuPeWp3VhBe – Dave Nov 04 '14 at 15:15
1

Instead of placing the ng-app directive you can use angular.bootstrap(html-element,angular-module) to inject the module into an element. So just figure out the right place in your code do this. – wvdz Nov 04 '14 at 15:27

score 1 · Answer 2 · answered Nov 04 '14 at 15:18

I use some server-side MVC (ASP.NET MVC, but I'm sure you could accomplish it with any similar platform) to accomplish this for a set of AngularJS modules that we use for our in-house apps. I simply set a ViewBag property that can be picked up by my (shared) page template within MVC, e.g.

<html ng-app="@ViewBag.NgApp">

This ViewBag property is set by my server-side routing, so requests to /App1 will serve scripts for that bundle, including the relevant module definition. Same for /App2, /App3 etc. Anything under /App1 is handle by the client-side routing for the SPA (we use ui-router).

It's worth keeping an eye on the router being created for Angular 2.0, but being back ported to 1.3 - this will supposedly support dynamic loading of child apps / routers in a single application. I'm hoping this implies dynamic loading of app modules...

Switching data-ng-app module configurations in angularjs

2 Answers2