angularjs technique for login then redirecting to dashboard page

I'am doing my first AngularJS project with ASP.NET Web API backend. What I am trying to do is, whenever a user visits www.mydomain.com, a login page (index.html) will displayed. After successfull login, he will be redirected to the dashboard.html (this is the shell page, partial views go here). My project structure is shown below-

enter image description here

I am confused about some issues:

  1. Is this the best/common practices what i am trying to do in above?
  2. As because dashboard.html is the main page, should i place app.js on dashboard.html?
  3. If i put app.js on dashboard.html, will index.html (login page) have another app.js (i.e. loginApp.js)?
  4. How should I manage the login state i.e. IsUserLoggedId, UserId etc in angular part?

This question may be silly. I googled, but did not find any example/article addressing such issue. Would you please help?

Thank you in advance.

I am not sure how ASP.NET deals with it, but to my knowledge ASP.NET is just a server side framework whereas AngularJS is client side framework. These two framework solve different problem, but has some overlapping features. If you start using angularjs, then most of the time you will deal with the term "Single Page Application (SPA)".

There are different approaches in how you can handle the url redirection after login. I will just show you two example. There are many more how you can handle the user authentication and session.

First Approach: In SPA, most of the time browser will change the url route and state directly in the page itself without making the entire page request from the server. With that said, your dashboard.html will most likely be come a static template file which will be loaded from the browser directly. (i.e. the server does not dynamically parse the dashboard.html but only serve as a static file). Upon the user login, the angularjs will fire a asynchronous HTTP request into the ASP.NET authentication end point. A successful login may return a token to the browser, and the client will use it to manage the user session. At the same time, the Angular will have to change the route to /dashboard/. Notice that that the entire flow happens transparent to the user, it does not fire a full page HTTP request.

Second Approach: Alternatively, if you choose to redirect from the server, you will have to send a HTTP Redirect 302. and since HTTP redirect will eventually call make a full HTTP request to /dashboard/, and it will then have to reload and bootstrap the angular app.js from the browser again. In this case, the user will have to wait for the dashboard page to be processed by the server upon login

Issues:

  1. Is this the best/common practices what i am trying to do in above? there are many approaches, I think it is best to find the one that works for you. If you have a RESTful API, then you might want to have a look at the SPA approach in more detail.
  2. As because dashboard.html is the main page, should i place app.js on dashboard.html? in SPA, you don't need to load app.js twice. but if you use the second approach, you have to reload the app.js again.
  3. If i put app.js on dashboard.html, will index.html (login page) have another app.js (i.e. loginApp.js)? depends on your approach as stated above
  4. How should I manage the login state i.e. IsUserLoggedId, UserId etc in angular part? Authentication Strategy, UNIX style authorization

There are more official guide that can help AngularJS Developer Guide.

Hope this helps you to integrate with the ASP.NET authentication mechanism.

you should have multiple shell pages. this link can help you...
refer to Multiple Shell Pages part.