Am I Doing Dynamic Views with AngularJS Right?

I have played around with a lot more JavaScript and single page applications (SPAs) as of late. More specifically, I have fiddled with AngularJS in my most recent personal project and it has been a lot of fun. However, client side web application development is not the same as server-side web application development. In this post, I will describe a challenge I had with client side routing using AngualrJS, how I solved it, and how I feel about the solution. Hopefully, somebody will give me a little feedback on my approach.

The Problem

The Facebook home page when you are not logged in.
The Facebook home page when you are not logged in.

At the root level of my web site, I want to show one view to an authenticated use and a different view to an anonymous user. This is a very common need and feature in many web applications. For example, let’s look at Facebook. When you point your browser to, you will get one of two things depending on whether you have an authenticated session. If there is no active session, then you are presented with a welcome message which asks you to create an account. If there is an active session, then your get your timeline.

The solution for this from the server-side is actually simple. When the server receives the request for the home page, then we can simply check the session and use it to decide which view to respond with. Done. Easy as pie!

With a SPA, the solution wasn’t as clear. At least not to me with my limited AngularJS experience.


To be honest, I hope somebody else has a better solution than this to share with me. But this is what I did. I started an app.js file containing some simple AngularJS configuration logic:

The template pulled down by the root route was empty at this point and I was forced to make a choice. Should this template contain the welcome page content? Or should it contain the authenticated user content? Or what?

I decided it would contain the authenticated user content. This is because I expect (well more like hope) that most people who visit my application will log in and use it. This hopeful assumption made sense and so I set out to build my home page controller.

The first thing that I thought I would do was to inject the $http service so I could make a call to my website’s API and get the user’s session object. If I get a session back then I can go ahead with displaying the home page for the authenticated user. If I don’t then I can route them to the welcome page using the injected $location service and ask them to sign up or log in.

At this point my update app.js file looks like this:


This approach is very simple. At the end of the day, it is not really what I wanted. What I wanted to do is to dynamically tell the $routeProvider which tempalteUrl to use dynamically. This is probably due to my experience writing server-side MVC logic to select a view based on the session state. I didn’t like that I now have an extra route for my welcome page. This doesn’t feel right to me. At least, it doesn’t feel natural.

Another approach that I considered after this implementation is using an ngView directive in my template and dynamically setting the templateUrl value using the $scope in the controller. However, I don’t like the idea of branching logic in the controller to populate the scope differently based on the session. That doesn’t feel right either.

So what’s next? Well, I think I am going to stick with this solution for a bit and probably create a session service to get the session object since I will probably need it between various controllers. I will probably also push a response interceptor in the $httpProvider to handle unauthorized responses from the API. While I am not entirely comfortable with this approach yet. It looks promising giving my limited exposure to AngularJS. I am hopeful that a fellow reader may offer some suggestions and/or advice.