0

I'm working on a single page app and I wonder how I should manage the transition from the landing to the home.

Both views have a very different layout. The landing allows the user to register or log (exactly like twitter or facebook landing pages). The home displays the content of my website and the information about the logged in user.

What is the best way to handle this with angular? Do I make two different angular apps (one for landing and one for home)? Or only one? I'm planning to use ui-router. Once the user is connected and has checked "Remember me", he shouldnt be able to go back to the landing, and will always be redirected to the Home page ( except if he disconnects, of course ).

Thank you

Nuzzob
  • 371
  • 1
  • 4
  • 23
  • I would start by having a look at this question [Redirecting to a certain route based on condition](https://stackoverflow.com/questions/11541695/redirecting-to-a-certain-route-based-on-condition) – pasine Dec 13 '15 at 19:02
  • Thank you, that will be useful for the conditional redirection part – Nuzzob Dec 14 '15 at 16:08

1 Answers1

0

I would recommend against using Angular for your landing page, because it will force the download of your entire app just to view that landing page.

In my case I have a landing page under /frontend, where it includes all of the html, css, and javascript needed for that page (I even went so far as to add a Ghost blog here). So Angular is only loaded when someone clicks the 'login' or 'register' button.

I have two .html pages in my root /app directory - one is app.html and one is frontend.html, and I use Node.js/Express to route between them. That's the tricky part. Here's the express code:

// Frontend Homepage & Blog
app.get('/', function (req, res, next) {
  res.sendFile("frontend.html", {root: root + process.env.APP_PATH});
});

// Backend App
app.get('/*', function (req, res, next) {
  res.sendFile("app.html", {root: root + process.env.APP_PATH});
});
James Gentes
  • 7,528
  • 7
  • 44
  • 64
  • What do you mean by " Angular is only loaded when someone clicks the 'login' or 'register' button " ? How do you handle the API call to login or register methods in your landing ? With ajax for example ? It seems to be a nice solution, because my app is kind of "private", so users that cant register or login do not have to load the entire angular app. I don't use node on server side, only a java API + oAuth, so how do I handle the routing ? – Nuzzob Dec 14 '15 at 16:14
  • @Nuzzob you would need to use Node.js or some other routing service on the server in order to make this configuration work. – James Gentes Dec 15 '15 at 19:29