$routeProvider .when added in child modules

[Doug Briere]

I have a working route defined as follows (names changed):

angular.module('myParentApp', [
  'ngRoute'
])
 
    .config(['$routeProvider',function($routeProvider) {
      $routeProvider
          .when('/view1', {
            templateUrl: 'views/view1.html',
            controller: 'View1Controller'        
          })

Then I have my new app which, uses the above parent as a dependency , adding a second route for view2 (doesnt work)

angular.module('newChildApp', [
  'myParentApp',
  'ngRoute'
])


    .config(['$routeProvider',  function($routeProvider) {
    $routeProvider


        .when('/view2', {
            templateUrl: 'views/view2.html',
            controller: 'View1Controller'
        });
}]);

I have included a script tag for the child app, but I cant seem to get view2 to display (if I move to myParentApp it works).  

Questions:

1. When creating newChildApp is ngRoute redundant since will it be inherited from myParentApp ?
2. Can I create routes in this fashion? or is the view2 route not working being out of scope?

3. is using the <script tag to import the js for the child app not enough ?

Thank you

[Sander Elias]

Hi Doug,

I was confused by your naming of things. Normally, you include children into your parent app. That makes sure the running order is correct. I have build applications in exactly that fashion.

answers:

1. Technically, yes. However, I strongly advise to inject it anyway, so you(or the person doing maintenance on your app) knows it is an required resource.
2. Yes you can create routes this way. Done it many times already.
3. Again, yes, it is enough. However, as your app grows, and modules keep getting added, you should consider using a build tool that takes care of this automatically. It takes a small investment of your time to learn a tool like gulp, but it will pay back manifold.

With kind regards

Sander

[Doug Briere]

Thanks Sander,

So in my html I have something like:

<script src="scripts/main/myParentApp.js"></script>

<script src="scripts/helper/newChildApp.js"></script>

But the routes defined in newChildApp.js appears to not be registered (well because they never work). I feel as if newChildApp registrations are being done in a different scope. Is there any debugging you could suggest I try ?

Thanks again.

[K M SivaKumar]

Hi Doug,

Please take a look at http://stackoverflow.com/questions/12885422/angular-js-2-applications-on-the-same-page-only-1-should-affect-browsers-loca

and Working Example : http://jsfiddle.net/2yUAD/1/

Thanks

K M Siva Kumar

[Sander Elias]

Hi Doug,

Here is a working sample.

Does that makes it clear enough?

Regards

Sander

[Doug Briere]

Thank you Sander, your example helped me figure out my problem.

We dont use ng-app to bootstrap, rather within the main module contains:

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

Of course if I try to add a similar line to the child app

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

I get an error about document already being bootstrapped.  If I add the child app to the main module, things do work... but ideally i would like modules self contained , right?

// Works, but not ideal...

angular.element(document).ready(function() {
    angular.bootstrap(document, ['myParentApp', 'newChildApp' ]);

[Sander Elias]

Hi Doug,

That is strange, Usually you inject it into your top module, not inside your bootstrap. Should not matter if you are using angular.bootstrap, or ng-app. Can you reproduce your issue in a plunk?

Regards

Sander

[Doug Briere]

So I noticed more about your application.  You use ng-app="myPlunk" this is bootstrapping both child and parent (dependencies).  So this is exactly what Im trying to avoid. Maybe I should detail more what Im trying to do.  Please understand Im a long time backend java developer, javascript/angular is all new to me, it really lacks the organization Im use to.  

We have a main page index.html that has links.  Right now all those links are angular routes defined in app.js (I didnt write this)  I have been put on a project that will add a new link, for a new page.  I would like to create a new app for this it will have a more meaningful name, but for now lets suppose its app2.

I feel I should be able to define the new link/route in app2, the link will be referenced in the index.html.  Now app2 might list app1 as a dependency (honestly Im not sure if it will be just yet).  I would like to make a single change to index.html to hook in my app2 and link.  I really dont want to touch app1.  So is there a way to bootstrap app2 without having to touch app1?  

I made changes to your original in a new plunk

http://plnkr.co/edit/nai70evaERjZwYwMJVZ8

I really appreciate your insight and help into this. Perhaps Im over thinking this module separation thing.  My visions is app2 should be able to be plug-and-play someday on any web container. I really dont want to be hooked into everything else.  Maybe Im just not use to the lack of organization of sloppyness javascript is well known for

[Sander Elias]

Hi Dough,

The only way to do that, is add another module, that works as an holder module, and bootstrap that. That way you don't need to change your module, or the already existing module. With future extensions, you only need to add added modules to this 3rth holder module.

For ng1, that's the only way at the moment. You issue is taken care of in version 2. (This is one of the creation reasons..)

Regards

Sander

[Doug Briere]

Thanks Sander thats what I just did and it works. I created a new app called startupApp (not using bootstrap just incase it causes issue with the actual js)..  It was really bothering me that earlier that app1 would have to have app2 required code.. while not perfect this feels better. Thank you

angular.bootstrap(document, ['startupApp', 'app1','app2']);