Angularjs - Route To Another Page Of Different Ng-app Module After Login

I have a basic knowledge of AngularJS only. I have created one AngularJS application. index.html has two links for login and register. With ng-view. By default, login is the view.

Solution 1:

I know this is over 2 years old and i'm sure you might have moved past this but i'm going to tell you how i did as i have a similar set up. Doing everything on the client side wont do it for you. You need to offload some of that routing logic to the server-side. Others might be suggesting using only one ng-app throughout your application but for me that was not a requirement. multi app was a necessity.

My application consisted of 6 ng-apps sharing some common modules and services. each with its own responsibility for e.g I had one like yours with views for login, signup and password-reset while the others were "protected ng-apps".

The trick to get mine working was with the login request. I dont return 200 json back on successful login from the server, I just redirect to the main page i.e I serve the protected main ng-app on successful login. Then i set a httpOnly Cookie with the user information serialized as a JWT String.

Point is...treat every angular application as one page and have your server-side code decide what to show based on your auth rules.

Hope this helps anyone using model :)

Solution 2:

We can add many ng-view tags in as many div but it will paste whatever routes mandate to be pasted to the dom.

Solution 3:

As I know only one ng-app can be used per html document and same is true for the ng-view also. The idea I would suggest you to use $routeProvider to navigate between pages in the application.

Use services to have the login information of the user and also have ng-show/ng-hide to show them particular pages based upon their login state.