Building FrontEnd with Yeoman

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.

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

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.

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.

Then, do the Karma environment settings as shown below.

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

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

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.

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.

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

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

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.