In this section, we’ll delve further and enhance the app where we stopped last time. Now, let us go ahead and improvise the UI a bit, so that it feels good and look good. In order to get started, I will make use of some bootstrap templates which you can refer here @ Bootstrap. Now, from here i will pick Cyborg theme as shown below in the screen shot.
From here, I will just go ahead and download the css file and save in my bower components as shown below in the screen shot. I could have placed it in my app styles folder as well, but there my fonts and other dependent items are not there, hence it’s good to have consistency and place it at one place. Here, i have downloaded two themes cyborg and superhero.
Then, i have commented the initial reference of bootstrap and referenced new one as shown below.
With the above change in place, it produced the below theme.
Now, it feels better. I have also improvised a bit in the movies template with the below snippet.
One more change i have done for menu highlighting with the minor change as shown below.
With the above change in place, it will look like as shown below.
Now, let us go ahead and create Movies controller to put some data in. For doing that, I have used my yo generator to do the same.
Therefore, this is the benefit of using yo generator. Out of the box, it gave me test file as well. Now, let us go ahead let us put some data in there to display on the page. Off-course currently, it will be static data. Later we will see how to couple the same with data fetched from the server. By the way, below snippet is the default one created by generator.
Looks ok to me. But, I don’t need these stuffs, hence I will modify the same and make some necessary changes as shown below.
Now, i need to do corresponding view changes
With the above change in place, it will produce the below result. Although the page doesn’t look super impressive, but that’s ok. UI is least bothered for now.
I have also added two more views for Login page and Register as shown below in the screen shot.
Functionality of this, we will see in coming section. Till then stay tuned and Happy coding.