Tuesday, May 19, 2015

NodeJS with AngularJS

In my last post I showed how to create NodeJs application with MongoDb. In this post I will show how to add AngularJS functionality for the project.
First you should add Angular JS using bower. With that add AngularRouter and Angular Resource js files.
However, single page applications have one major problem. They are not indexable by search engines. To solve this issue, major search engines offer developers to mark their applications as single page applications. To mark your application routes as single-page application routes, you will need to use a routing scheme called Hashbangs. Hashbangs are implemented by adding an exclamation mark right after the hash sign, so an students URL would be http://localhost:3000/#!/students. Therefore, configure your main module for hashbang URL.
Add students folder into public folder. In that folder, create config, controllers, services an views folders.
AngularJS services are singleton entities that are usually used to share information between different entities of the same AngularJS application. AngularJS prebundled services and custom services. $http, $resource, $location, $q and $rootScope are commonly use services.
ngResource module provides easy way to communicate with a RESTful data source. In the above I have added angular resource module. And also I have added ngResource as dependency for our main module.
Then create a module for students folder.
Add student.client.service.js file into students/services folder. Content of that file should be like below.
Now we have to change student.server.controller.js file for the CRUD operations.
Then we have to change student.server.route.js file.
Then add student module as a dependency to main module.
Next we need to create angular js module controller for students.
Next we need to implement angular js views.
Next we have to wire angular routes for the above.
Next we need to add index.server.controller.js and it's router file like below.
Then change index.ejs file content like below.
Run the application via Visual Studio. Then you will be able to see student list like below.
Then click on First Name. You will see student view.
Then click edit link. You will see edit view. Then update name and save changes. This will give 500 error.
Reason for that is req.body undefined in student.server.controller.js.
You need to add body-parser and method-override npm packages.
The body-parser module provides several middleware to handle request data, and the method-override module provides DELETE and PUT HTTP verbs legacy support. To use these modules, you will need to modify your config/express.js file.
Then save function will work fine.

NodeJs with MongoDB

In my last post I showed how to write a NodeJS application using EJS view engine. In this post I will explain how to integrate NodeJS application with MongoDB.
First we need to install Mongoose module.
It is better if we save the mongodb connection in a environment specific file. Create a new folder called env in config  folder and add development.js file into that. The content of that file should be like below.
Now add a configuration file into config folder like below. Depending on the Node environment, the config file will load appropriate node environment file.
Add a file called mongoose.js into config folder, which contains mongodb related configurations.
Now we have to initialize mongoose configuration in server.js file. Notice, I have added environmental configurations in server.js file.
Then create student schema in app/model folder. In here first you will define your StudentSchema using Schema constructor. Then you will add Student model using StudentSchema instance.
First you must register the Student model in mongoose.js file like below.
Make sure, mongose configuration file is loaded before any other configuration file is loaded.
Change controller functionality accordingly.
Browse http://localhost:3000/ location. You will see results like below.

NodeJS with EJS Template engine

In my last post I explained, how to expose data using NodeJS. In this post I will explain how to render those data using EJS template engine.
First you have to install EJS using npm. Use following command for that.
Then package.json file should look like below.
In ExpressJS you should configure EJS as default template engine. Also set view folder like below.
In the student.server.controller, instead of returning JSON result, now you should return EJS view.
Add index.ejs file into view folder and content should be like below.
Run node server command and browse http://localhost:3000/. Then the page will display like
We can use Bootstrap for style the view. To add Bootstrap for the project, we will use Bower. Bower is a client side package management tool. First add bower.json file by run following command. You need to include that file into Visual Studio Project.
Create a folder called public and add lib folder into that. This public folder will contain all the files which can access from outside world.
We will have to change default installation path for bower packages. We will install all bower packages into public/lib folder. Configuring the Bower installation process is done using a dedicated configuration file called .bowerrc. Enter notepad .bowerrc command and save the file in the project folder.
Content of that file should look like below.
Using command prompt add Bootstrap library.
This will change bower.json file and add boostrap into lib folder.
Now change index.ejs file like below.
Refresh your browser window. You will see a page like below.