Now, in this section we’ll delve further creating controllers, services and many other things. So, the very 1st thing which i’ll do is I’ll create controller’s folder and create my first controller say “homeController”. Now, this would be the place which will serve all the HTTP actions like (Get,Post…). Now, since this going to be controllers for web pages, hence i need to follow one convention where in needs to be self executing function.
So, as shown above i’m passing in “module.exports” and renaming to home controller means hence its clear to me that i am adding methods to home controller. Like here i added an init function using “homeController” and i accept my reviews object. So, here i have taken the get function which i have written on my “server.js”.
Now as shown below in the screen shot “server.js” page have made controllers folder self referencing. So, this will give access to all the controllers. Now, in order to use this i need one more file which will list all the controllers like “index.js”. Now, this file also follow the same pattern what i used while writing our 1st controller. Now, here i have initialized controllers itself. So, whenever any new controller gets added, i’ll initialize here itself, so this way i’ll wireup each of the required controllers. The significance of this would be server page is going to invoke only the main controllers. After doing all these when i ran the program, it produced the same output but this time via controller.
So, now let’s create our 1st service. So, Service which i am going to create will be served as a repository for data. So, for this i’ll create one more folder say “dataRep” and inside that i’ll create “index.js”, which will be used by our home controller as shown below. So, as you can see in the below screen shot, currently for populating data i’m referring another JS file which is known as seed data. This is temporary, so once database is up and running, we’ll fetch the data from db itself.
Now, once i have created the seed data, i’ll go ahead and create the instance of the data object in home controller. Then, i’ll go ahead and invoke the seed data to populate the same here as shown below in the screen shot. So, here i need to modify my model as well, so that it can take part in data binding as well.
Now, i need to modify my index view to print these values.
Now, with these changes, it will print the data as shown below in the screen shot.
But, now the look and feel is very bad. So, to fix this we need to use css and other static resources like images and other things. So, for this i’m going to create a new folder “public”. Now, this name “public” is by convention. It is going to hold all the static resources. so, i already have all the static files in place, basically one bootstrap theme. so, i simply copy pasted the same in public folder as shown below.
Now, once that is done, then in order to use the same i need to tell server.js to use the static files as shown below. Now, __dirname is the implicit variable which picks up the root directory. so, with this definition, it will include all the files inside the public folder.
After this i have included the same file in the layout file as shown below and then i have modified the view structure to present the same in little presentable manner. However, there is one more npm technique to download the static resources in the project and that is called “BOWER”. But, for now that is ok.
Now, with the above changes in place, it will present the modified UI as shown below.
so, with this i am going to wrap this for now. In the next section we’ll see more on data access. Till Then Stay tuned and Happy coding.
1,301 total views, 1 views today