Building FrontEnd App with Yeoman – 3rd Part

Hi Friends,

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.

31th

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.

33rd

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.

34th

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.

35th

36th

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.

38th

37th

39th

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.

40th

41th

I have also added two more views for Login page and Register as shown below in the screen shot.

login_adv

register_adv

Functionality of this, we will see in coming section. Till then stay tuned and Happy coding.

Thanks,
Rahul Sahay
Happy Coding

2,535 total views, 1 views today

3 thoughts on “Building FrontEnd App with Yeoman – 3rd Part

  1. Very good post. I discovered your blog and wished to mention that We have truly liked looking your site threads. Whatever the case I will be opt-in in the feast using this program . hoping you’re writing yet again rapidly!

    • Thanks!!!Yes off-course. Currently, I am actually busy with my next book on angular, which is getting released next week. Hence, just verifying the stuffs in there:)

Comments are closed.