0

Does anybody have an idea how to create an angularjs app with modules loginApp and mainApp, login will use login.html and mainApp will use index.html?

Below is the scenario I want to achieve.

  1. Run loginApp
  2. Once authenticated, run mainApp

I am currently doing the above scenario since I want my login page to load faster, so instead of using index.html which has lots of <script> included.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
imprezzeb
  • 706
  • 1
  • 7
  • 18
  • try to use angular.bootstrap(document, ['mainApp']); – Jayant Patil Sep 28 '16 at 06:31
  • I don't think it is a good idea to have separate apps for this. Probably, you have to look into using lazy loading if you want application to respond faster. http://www.codeproject.com/Articles/1039826/Angularjs-Lazy-Loading-with-Requirejs-and-OcLazylo – Ravi Teja Sep 28 '16 at 06:40
  • @RaviTeja, yes I can do that with RequireJS and ocLazyLoad maybe later, just want to get one simple dirty trick instead of restructuring the whole app. – imprezzeb Sep 28 '16 at 06:50
  • http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page. Does this help you? – Ravi Teja Sep 28 '16 at 07:12
  • Nope, the post was about two ng-app on the same html page. My situation is two different html files to serve both loginApp and mainApp instead of just index.html – imprezzeb Sep 28 '16 at 07:15

2 Answers2

0

You can manually bootstrap app. see here [more][1]

Manually Bootstrapping an AngularJS Application

Let's start by defining our application's main module:

   var myApplication = angular.module("myApplication", []);

Now, instead of relying on the ng-app attribute, we can call the angular.bootstrap function manually. We need to hand it both the application root and the name of our main module. Here's how you call it as soon as the DOM has finished loading:

 angular.element(document).ready(function() {
    angular.bootstrap(document, ["myApplication"]);
  });

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp 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 you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp

See also

https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
http://docs.angularjs.org/api/angular.bootstrap
D Coder
  • 572
  • 4
  • 16
0

Angular app initialization manually.

angular.module('myApp', [])
  .controller('MyController', ['$scope', function ($scope) {
    $scope.greetMe = 'World';
  }]);

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

More information Bootstrap Angular App

Mohit Tanwani
  • 6,608
  • 2
  • 14
  • 32