by

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.

35th

 

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.

36th

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.

40th

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

41th

 

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.

42nd

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.

45th

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

32nd

 

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

46th

 

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.

47th

 

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

48th

 

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

49th

 

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

50th

 

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

52nd

 

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

51th

 

46th

 

32nd

 

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.

55th

 

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.

57th

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.

60th

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.

Thanks,
Rahul
Happy coding