Making the app into SPA

Hi Friends,

As we already know that Angular is a fully featured SPA Framework. So, let’s try to convert our app into mini spa. so, i’ll be moving few components and making the same very modular as shown below.



so, i have cut the above code from the moviescontroller and put that in a different class under models folder. Now, let’s create another folder for ViewModel for Moviereviews.


Now, let ‘s create a movieVMBuilder. so, here in the VM builder am building two objects basically and serializing the same, one for movies and the another one moviesReview. currently, am hard coding the data in here, just to keep the things simple, but in real time project, we might be using some kind of api mechanism to fetch the data from the database. But, for now it’s ok.


so, here i have one more VM for movieReview as shown below.



Now, let’s go back to our moviesController and will create an instance of movieVMBuilder to serialize the movies as shown below.39th


and, we need to also create one controller for our MoviesReview. so, let’s create one. This controller is actually very much similar to movies controller. Only it is going to return serialized MoviesReview.


Now, we need a view for that, so rt-click on the index and create one view as shown below

43th 44th

now, we need to create the movieReviews controller for the same. Below, is the screen shot for the same.


so, now if i build and refresh the page, it will produce me the same output as shown below, but this like SPA.



Now, when i change the url to moviesReview, i would be able to see the another view as shown below



so, now we have movie and it’s review page, but each of these pages are getting bootstrapped by it’s own data. But, these pages are getting rendered by separate controllers and separate views. so, now let’s try to convert the same in SPA app. so, if i see the network requests for each of them, i can see that each page is requesting 21 requests actually.



now, let’s create one controller which will take care both of these, so let’s create one mvc controller say Common Controller. so, here also, i need to get one instance of VmBuilder, which is going to fairly simple like



now, here i got the reference of movieVMBuilder, and that is calling the Method BuildMovieBuilder, which is nothing but taking the combination of movie and movieReview all together as shown below



Now, if i see the View Model, it looks like something



so, now let’s go ahead and create the view as shown below for the new Common Controller.



Now, when i build the same and refresh the page, I would see the below results.







Now, when i click any of these it is creating the pages independently, so still this is not SPA.  so, in case of page we just pull one page from the server, and we are clicking on different links, it’s just swapping the HTML inside it. so, now i need to create angular view which means whenever i switch views in SPA, this is where i want you to go. so, for this view switching i need to create templates for the same. so, let’s create a template folder for the same.

53rd 54th


so, if you notice the html for the above two htmls are basically the same div what we used in the views. Now, i need to setup the routes. so, am going to write the route in the module itself as shown below.



so, now i have set up the routes, since these routes also have knowledge about controllers, hence i could go ahead and remove the controllers from the individual views. Then, in the common page, we need to update the links as shown below.


so, now, i have the common page in place with the references of my both angular controllers. so, now when i build and check the same i can flip through views, but i cannot see data moving in there.

58th 59th


so, now, i need to create one more section to bootstrap the movies and movieReview data as shown below.


then, need to fix the controllers to use common service as shown above.

61th 62nd

Then, when i refresh the page, i will be able to see the data properly with SPA in picture now as shown below.

63rd 64th

Now, in the next section we’ll see how to deep linking in Angular. @ the end of this project, i’ll also upload the solution, so that, you guys can tweak with existing app and get the feel of the same. Till then, stay tuned and Happy Coding.

Happy coding