Building FrontEnd with Yeoman – 2nd Part

Hi Friends,

In today’s section, we will begin customizing the project our way. 1st let us open the project in WebStorm and let’s inspect the folder structure. Below is the folder structure of yeomen project looks like.

15th

Now, if you expand node modules, then you will see, node has installed many dependencies which include testing dependencies as well.

16th

However, if you are not familiar with testing frameworks like jasmine. I would suggest, visit http://jasmine.github.io/ website, how to get started with this. Now, if you delve further in the folder structure, you will find that it gave us some per-written test to get started.

17th

Now, if you open the test, then it will look like

In order to run this test, here in webstorm, i need to make few configuration changes like shown below.

18th

19th

20th

Then, do the Karma environment settings as shown below.

21th

Then, click on apply and then ok. With this, Config section for karma will get enabled in webstorm.

22nd

By, clicking on this play button, it will launch the karma server and execute the test as shown below.

23rd

This shows that all my per-written tests are executing fine, which means all the components are setup correctly and everything is looking healthy, hence we can proceed with app development. Hence, now let us turn our attention towards, app folder and open index.html page. Below is the snippet of default HTML page.

Here, you can see many things like boiler plate code for HTML 5 template, plus menus, then we have google analytics also built in here. Apart from this from angular perspective, you can find that main controller is injected here with ng-view in place. One point to note here, here i have modified app name and one of the menu section and once i saved the same, it just automatically refreshes in the browser, i don’t have to refresh the same manually.

And the reason for this is watch window which is taking live update and update at the same time in UI as shown below in the screen shot. This uses Grunt script which detects the change and updates the UI at the same time.

24th

25th

Now, the next thing which i will do is register a movies view with angular generator from the webstorm terminal window. If you are not using webstorm, doesn’t matter, you can open another command prompt and do from there.

26th

Upon, successful creation, it will display the below message.

27th

And, if you refer the views folder, then you will see that new view has been generated.

28th

And, when you open this file, it will look something like below

It’s entirely up-to you, whether you want to use generator to create the template for you or you want to do the same manually.Next thing, i need to define the route for the same. Below is the modified snippet for the same.

Since, i do not have any logic for this template and just a simple plain HTML, hence i have not provided controller name and aliasing name.

With the above change in place, I have also changed menu section in index page as shown below.

Now, when i go ahead click Movies link, it will produce the below shown result, prettiest page in the world; jokes apart.

30th

We will improvise more on the functionality and UI in coming section. Till then stay tuned and happy coding.

Thanks,
Rahul Sahay
Happy Coding

1,558 total views, no views today