Proper way to manage landing to home transition in angularjs

Question

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

Answer 1

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});
});