Here we are, in this post we are going to create a CRUD application in NodeJs with mongoDB as database and ejs as a templating engine.
You can download the application from here: github
Before diving in to this post please checkout my previous post, then you will get to know why i choose ejs as a templating engine.
In next post we will use Angularjs instead these templating engines.
Prerequisite: Not much but for creating a CRUD app you must be knowing the basics like:
NodeJs: what it is, why we use it, its packages etc.
MongoDB: Collections, models, schema etc.
EJS: JavaScript and some basics loops in it.
Lets start coding…
So now you must be worried about the project structure ? There are two ways start nodejs application we can use the default package express to setup the app structure. Run `express node-crud` as soon as you run this command everything will be there 😉
But express uses jade as a templating engine by default, but we have to use ejs so we are going to create everything manually for learning purpose 😀
so run `npm init` and answer every question carefully, like name, description, git link (if you want to show it off).
Okay, in this case we have to install all required dependencies manually like, body-parser, express, mongo, ejs etc., but not to worry we have to learn it 😉
I like Lecare’s compositions so one for you `don’t forget what you’re fighting for‘.
Here is our package.json dependencies:
"dependencies": { "body-parser": "^1.15.2", "ejs": "^2.5.2", "express": "^4.14.0", "mongoose": "^4.6.7" }
Project Structure : It’s going to be our project structure.
Lets start with app.js this is the starting point of our application
In this file we will include some mandatory package and will create our server (yes server, because here nodeJs comes in place 😉 ) and will give a port number where our application will run in browser.
var express = require ('express'); var todoController = require('./controllers/todoController'); var app = express(); //setting template engine app.set('view engine','ejs'); //setting assets/static files app.use(express.static('./public')); //Firing controllers todoController(app); //listen to port app.listen(3000); console.log("Server started at port number: 3000");
*The views created using ejs have the .ejs extension.
todoController contains routes need to display particular views.
Listen is used to let the server listen at particular port.
See everything is easy.
todo-list.js we created to write ajax calls. Simple js ajax syntax.
Like this yea:
$.ajax({ type: 'POST', url: '/todo', data: todo, success: function(data){ //do something with the data via front-end framework location.reload(); } });
Now its time to clone the project and go through these files which I mentioned, and you will be able to get it all.
I commented in code, above every function, what it is, why it is and how it is.
In case of any confusions, comment here, I will reply.
Reblogged this on Coding, Unix & Other Hackeresque Things.