AngularJS nested app | 易学教程

问题

I need to nest an app inside another app, I am looking for good practice on how to do that.

I have a "userApp" that manages a control panel for authenticated user. So the structure for non-authenticated users looks like this.

<html>
  <body>
    <nav>
      Login
    </nav>
    <div>
      ....
    </div>
  </body>
</html>

The login is managed by PHP, so when the user is logged he's being redirected to the control panel and the structure looks like this.

<html>
  <body>
    <nav>
      User
    </nav>
    <div ng-app="userApp">
      <div ng-view="">...</div>
      ....
    </div>
  </body>
</html>

So, now I need to define a main app on top of this one, that's shared by authenticated and non-authenticated users, the structure will looks like this.

<html>
  <body ng-app="mainApp">
    <nav>
      User
    </nav>
    <div ng-app="userApp">
      <div ng-view="">...</div>
      ....
    </div>
  </body>
</html>

The two apps doesn't need to share anything, it's just that I need a main app that manages common data between authenticated and non-authenticated users. For example can manage the navbar, a sidebar, different ajax calls but does not care if a user is authenticated or not (this is partially true, the userApp can set localStorage variables that can be read outside the userApp and can be managed by the mainApp). The userApp has routes, the mainApp don't.

I did not tried yet but I'm pretty sure it's going to break and I am looking for best practice on how to achieve the same result (I don't want to mess up the code and after two months find out that this is a frankenstein....)

Any advice? Is this something achievable or I need to rethink the structure and avoid the mainApp (let's say, I can use jQuery to do the same things...). I just don't want to loose the routing in the userApp and if possible I don't want to change anything in this one as it's being maintained separately, it's ready and tested as it is.

Thanks

Edit

Looks like the answer is no AngularJS applications cannot be nested within each other.

So my question is, is it possible to move the userApp at the body level and use routing only when the user is authenticated and only in the control panel?

Example

/ index

/user#/ control panel

/user#/account angular route

/some-url not angular route

/some-url/some-page not angular route

回答1:

In my opinion you should rethink your structure and, for example, you could create an app with nested controllers and a service to manage the authentication.

I found some question about nested apps, seems that someone was able to do something but probably is not your case. Anyway take a look:

Can I use one ng-app inside another one in AngularJS

AngularJS: How to nest applications within an angular app

来源：https://stackoverflow.com/questions/28515851/angularjs-nested-app

标签

jquery

angularjs

structure