The goal of this series to start with basics of MEAN stack development and cover all the concepts that are required for MEAN stack development and finish with a web application that is completely written in JavaScript technologies.
In the initial phase of JavaScript, JavaScript was only limited to the client side part of the application. We used JavaScript to handle events at client side. But in the last few years, everything has changed, now JavaScript is not used only for handling events at client side, now it is used at each phase of a software and application development, for example, at database level, server level, etc. We can build an application that is completely written in JavaScript technologies from front end to backend and also at database level. MEAN stack application is an example of this. MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Node.js. In MEAN stack, we use Angular for front end, Node for server and Express as upper layer of Node and MongoDB for the database.
MEAN stack application is a combination of four JavaScript technologies.
MongoDB
In MEAN stack, "M" represents to MongoDB. MOngoDB is an open source NoSQL database that uses a document-oriented data model. In MongoDB, instead of storing data in relational format like table, we store data into JSON formatted.
ExpressJS
In MEAN stack, "E" stands for ExpressJS. Express.js is a Node.js framework and allows JavaScript to be used outside the Web Browsers, for creating web and network applications. This means we can create the server and server-side code for an application like most of the other web languages.
AngularJS
In MEAN stack, "A" stand for AngularJS. Angular is a structural framework for dynamic web apps. We use HTML as your template language and using Angular to extend HTML's syntax. Latest version of Angular is 2.0. Angular 2.0 is completely written and now it is component based. In MEAN stack 1.0, we use Angular 1.x version and for MEAN stack 2.0, we use Angular 2.0. In this series, we will use Angular 2.0 for front end of application.
Node.js
In MEAN stack, "N" stand for the Node.js. Node.js provides open source and cross-platform runtime environment for developing server side application. Node.js provides a platform to develop an event-driven, non-blocking I/O lightweight and efficient application.
The objective of this series is to provide a step by step instruction to setup the environment for MEAN stack 2.0 application and provide a deep knowledge of how MEAN stack application works.
What Will We Learn from This Series
The goal of this series is to start with the basics of MEAN stack development and cover all the concepts that are required for MEAN stack development and finish with a web application that is completely written in JavaScript technologies. In this series, we will create "Employee Management System(EMS)". In EMS system, we can manage the employee
level information like project
that is undertaken by employee
and employee
’s basic details.
We will cover the following topics in this series:
- Initial setup with Node.js
- Add express and make the API
- Setup database with MongoDB
- Setup front-end with Angular2
- Add a new employee entry
- View list of all employees
- Edit the details of an existing employee
- Delete an existing employee
- Add filter and search functionality
- Add Sorting functionality
- Conclusion
Pre Requests
- Basic knowledge of Angular2, MongoDB, Node.js and Express.js. If you are new to all these terms, then I prefer you first take a tour of all these technologies.
- Pre installation of NPM. If NPM is not configured in your system, then first install NodeJS.
- Install the Visual Studio Code for the IDE. You can use any IDE but I will recommend you to use the Visual Studio Code, it makes development easy.
Application Setup
Now we setup development environment for our application. First of all, we create server using the Node.js and Express and after that, using Angular2, we create the front end of application and use MongoDB as our database.
First of all, create a folder anywhere in your system where you like and name this folder as MeanStack2. Now, open this in Visual Studio Code. Now go to View tab and click on Integrated Terminal. After opening the Integrated Terminal, now follow the below steps to the application.
Step 1: Create Package.json File
In your integrated terminal, paste npm init
command and press enter. This command will create the package.json file for Node.js application. When you run this command, it will ask you to enter some information like name, version, license, etc. Point to consider that, it will ask you about the "entry point" of application, for "entry point", write server.js instead of index.js, for other fields, you can enter any information that you want.
After completing this step, you can see that a package.json file has been created and this file contains the information that we enter in Integrated Terminal.
Step 2: Add Express and Other Dependencies
For Node.js server setup, we require some packages for Express as upper layer of Node.js, ejs as template engine and body-parser to parse the request body. So paste npm install express body-parser ejs –save
command in your integrated terminal and press enter. This command adds three packages in node_modules folder and also adds the dependency in your package.json file.
Step 3: Add "server.js" File
As we defined in our package.json file, server.js file is the entry point of our application, so add the server.js file in root directory of application and paste the following code into this file:
var express=require('express');
var path=require('path');
var bodyParser=require('body-parser');
var index=require('./routes/index');
var api=require('./routes/api');
var port=4500;
var app=express();
app.set('view engine','ejs');
app.set('views',path.join(__dirname,'/client/views'));
app.engine('html',require('ejs').renderFile);
app.use(express.static(path.join(__dirname,'/client')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use('/',index);
app.use('/api',api);
app.use('*',index);
app.listen(port,function(){
console.log('Server Started At '+port);
})
In the above lines of code, we create a server and set all the middle-ware and other required dependencies and later, we run this server on 4500
port. In the first three line of code, we import the required modules to setup the server. In the next line, we import index and api files. Actually in these two files, we implement the routing for our application. Later, we set the ejs
as template view engine for our application and set the path of our template pages. Using the express.static
middleware function, we define the path for the static files images, js and css files.
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
In these two lines of code, we set the bodyParser
and urlencoded
middleware. The bodyParser
middleware is used to get the data from request body like POST
, PUT
and DELETE
type request. The urlEncoded
middleware is used to get the data from URL of the request.
app.use('/',index);
app.use('/api',api);
app.use('*',index);
In the above line of code, we set the middleware for the /
and api
and requests. It means if request is home page, then it will be handled by code written in index.js and if request is related to the api
, then it will be handled by code written in api.js file. We also define the default routing, in case of default, it will be handled by the index.js file.
app.listen(port,function(){
console.log('Server Started At '+port);
})
In the above line of code, we set the server and this server will listen to the 4500
port number.
Step 4: Add Routing Files
Now add the route folder to the root directory of the of application. After creating the route folder, now add index.js file and paste the following code into this file:
var express=require('express');
var router=express.Router();
router.get('/',function(req,resp,next){
resp.render('index.html');
});
module.exports=router;
In the above line of code, we perform the routing, if request is get
type, then we will render the user to index.html page that is present in client/views folder. After creating the index.js page, now add another page and name this page as api.js, and paste the following code into this file:
var express=require('express');
var router=express.Router();
router.get('/',function(req,resp,next){
resp.send('this is api data');
});
module.exports=router;
In the above code, we are sending a simple text message response to the request.
Step 5: Add Client Folder
Now add a client folder in your application root. This folder will contain all the client side related code. After creating this file, now add another folder in client folder and name this folder as views. In views folder, we will create our index.html and Angular2 related code and files. After adding the client and views folder, now add index.html file in views folder and paste the following code into this file:
<html>
<head>
</head>
<body>
<h2>This is Mean Stack2 Application.</h2>
</body>
</html>
Till now, we performed all the basic required configuration to run the server and check the client application. Let’s check the structure of our application. Following will be the structure of our application.
Step 6: Install the Nodemon
We can run any node.js file using the node
command, but if we make any changes in our files, then we need to restart our server again and again that takes a lot of time. To overcome this scenario, we can add nodemon
. nodemon
will watch the files in the directory in which nodemon
was started, and if any files change, nodemon
will automatically restart your node application. To add the nodemon
package, open your command line terminal and paste the npm install –g nodemon
line of code and press enter.
Step 7: Run the Application
After adding the nodemon
, now go to Integrated Terminal of Visual Studio Code and run the nodemon sever
command. After running this command, if you get the below screen, that means everything configured very well.
Now open your browser and paste the "localhost:4500
" URL and hit enter. When you press enter and everything is configured properly, then you will get this screen.
If you are not getting this screen, that means something is going wrong with your code and you should try to find and resolve that issue. Now we create a database and establish the connection with this database using the "mongoose
" library.
Step 8: Create Database and Establish the Connection With Database
If you have installed "MongoDB", then open a command prompt window and run the "mongod
" command. This command runs the "MongoDB" server at "27017" port and is ready to connect with a client.
After starting the sever, now we run a client and create a new database. Now open another command prompt window and run the mongo
command. This command creates a client and establishes the connection to server running at port "27017".
After creating the connection to server, now use employeeDetails
command. This command creates a new database (employeeDetails
) and switches to this new database.
Now paste the following code into client command prompt and press enter.
db.employees.insert([{"EmployeeName":"Ankur Verma","Designation":"Mobile Developer",
"Project":"OUP","Skills":"Java, Android Studio, Xamarin"},
{"EmployeeName":"Dheeraj Sharma","Designation":" Developer",
"Project":"Lion Servcies","Skills":"C#,Asp.Net,MVC,AngularJS"},
{"EmployeeName":"Dhramveer","Designation":" Developer","Project":"VMesh",
"Skills":"C#,Asp.Net,MVC,AngularJS"},
{"EmployeeName":"Prakash","Designation":" Web Developer","Project":"OUP",
"Skills":"C#,Asp.Net,MVC,AngularJS"},
{"EmployeeName":"Raj Kumar","Designation":"Developer","Project":"CNS",
"Skills":"C#,Asp.Net,MVC"}])
The above code creates a new collection in our database and inserts some data into this collection. After inserting some default data into employees
collection, let’s check the data that we entered. To get the data from a collection, we run the "find
" command.
Now paste db.employees.find().pretty()
command and press enter. When you run this command, it will show all the data of employees
collection.
Now our database is ready. Let’s create model classes and make connections to this database.
Step 9: Install Mongoose and Make Connection to the Database
Now open Integrated Terminal of Visual Studio Code and run the npm install mongoose --save
command. This command will install the dependencies for the mongoose
. In this project, we are going to use the mongoose
for MongoDB CRUD operation. The mongoose
is an object modeling package for Node that essentially works like an ORM that you would see in other languages (Entity framework for C#). Using Mongoose
, we can define the schema for the documents in a particular collection. It provides a lot of convenience in the creation and management of data in MongoDB
.
After installing the dependency for mongoose
, now create a database folder in root directory of the project and create a dataFile.js file in this folder and paste the following code into this file:
var mongoose = require('mongoose');
var db = 'mongodb://localhost:27017/employeeDetails';
mongoose.connect(db, function (error) {
if (error) {
console.log(error);
}
});
var Schema = mongoose.Schema;
var Employee_Schema = new Schema({
EmployeeName: String,
Designation: String,
Project: String,
Skills:String
});
var Employee = mongoose.model('employees', Employee_Schema);
module.exports=Employee;
In the first lines of code, we simply make a connection to our MongoDB database. We create a schema for the employees
collection and define totally four attribute for the Employee_Schema
and in the next line, we create an employees
model using this schema. So when we perform any CRUD operation, we will take this employee
model and perform the CRUD operations.
After creating the Employee
models and schema, now go to api.js file and replace the code of this file with following code:
var express=require('express');
var router=express.Router();
var Employee=require('../database/dataFile');
router.get('/',function(req,resp,next){
Employee.find({},function(err,docs){
resp.send(docs);
})
});
module.exports=router;
In the above code, we import the Employee
model that we created in dataFile.js file and execute the Find
method, this find
method is similar to the find
method of the MongoDB, so when we hit this api, it will fetch out all records from Employees
collection and return this data as response. Let’s check whether it is working or not. Now save all the changes and open your browser and paste this URL http://localhost:4500/api in browser and press Enter. When we hit the api/ route, it will return the list of all employees as below:
Now our "API
", "Database
" and "Server
" all are ready, the only remaining part is "client
" application. Let’s start the work on "client
" application of the project.
Step 10: Create package.json File
Now go to client folder and create a package.json file and paste the below code into this file:
{
"name": "mytasklist",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"angular-cli": "^1.0.0-beta.28.3",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
}
}
The above code defines all the packages and dependencies that we need to create a Angular2 client and also contain the commands for start, typescript, and lite server. lite-server provide a Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or JavaScript change, injects CSS changes using sockets, and has a fallback page when a route is not found.
Step 11: Create tsconfig.json File
Now create another file in client folder and name this file as tsconfig.json and paste the following code into this file. This file contains the some configuration code for the typescript.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
Step 12: Create systemjs.config.js File
Again, create a new file in client folder and named this file as systems.config.js and paste the following code into this file. This file contains all information about the client system like Angular packages, path and main file for the application(main.js) and also contains other information.
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser':
'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic':
'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Step 13: Install All the Packages
We defined a list of the packages in package.json file, so now we install all these packages. For this, move to your client directory and run the npm install --save
command. This command takes a little bit of time and installs all the packages that we defined in package.json file. After completion of this command, you will find that a new folder node_modules has been created and this folder contains all the required modules.
Step 14: Create app.module.ts File
Now create a folder in your client directory and name this folder as app. After creating the folder, now create app.module.ts file and paste the following code into this file. The app.module.ts file is the parent module of all other modules, whenever we create a component, services, filter and directives, then first of all, we need to register all of these in app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './components/app/app.component';
@NgModule({
imports: [BrowserModule, HttpModule, FormsModule],
declarations: [AppComponent,
],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 15: Create Main.ts file
Now create a new file in client directory and name this file as main.ts and paste the following code into this file. This file is the starting point of our application and bootstrap the AppModule
.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
Step 16: Create App Component
Now create an app folder in client directory. In this app folder, we will insert all our components, services and custom filters. After creating the app folder, now create another folder in this App folder and name this folder as components. In this component folder, we create the components. After creating the components again, create an app folder into this components folder, in this app folder, we create files for the app
component.
Now create an app.component.ts file and paste the following code into this file:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent { }
In the above code, we create a simple component and defined the app.component.html as templateUrl
for this component, so we need to create an html template file also. Again, create a file and name this file as app.component.html and paste the following code into this file.
<div class="container">
<h1>Congrats! You set MEAN Stack2 Application Successfully</h1>
</div>
Till now, we create all the files and make all the setup that is required to run a MEAN Stack application, a last step is renaming to run the application that starts the client app. Now open integrated Terminal, move to client directory and run the npm start
command. This command builds all the typescript files and creates the corresponding JavaScript and map files. The npm start
command runs the lite server
.
If your node
server is already running, then refresh the browser, else run the nodemon server
command and you will get the following output on your screen:
If you get the above screen, then congratulations to you! Here, we complete the MEAN Stack configuration and now we start work on our Employee Management system part. If you don’t get the above screen, then there is a chance that you are getting some error, so try to resolve that error.
Add Bootstrap and Create Project Layout
Till now, we successfully configured the MEAN Stack 2 application, now we add some required files for the bootstrap and create the layout for our application. Now go to index.html file, add the following code at the top of the head
section. In the below code, we add CDN for the jQuery and bootstrap and we also add a base
tag in the first line, this base
tag will be used at the time of routing and provide a base(common
) URL to all the routes that we will create later in this project.
<base href="/" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
Create Home Component
We create a home
component and show the list of all employees
using this component. Now go to component folder add a new folder and named this folder as home. In this folder, add a new home.component.ts file and paste the following code:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'home',
templateUrl: 'home.component.html',
})
export class homeComponent {
}
Now create a home.component.html file and paste the following code into this file.
<h1>This is home page</h1>
Add newEmployee Component
Using this component, we will provide the functionality to add a new employee
. Now go to component folder, add a new folder and name this folder as newEmployee. In this folder, now add a new newEmployee.component.ts file and paste the following code:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: newEmployee,
templateUrl: newEmployee.component.html',
})
export class newEmployee Component {
}
Let’s add a template file for this component, now create a newEmployee.component.html file and paste the following code into this file.
<h2>Add New Employee</h2>
Add Details Component
Using the details
component, we will show the details of an employee
. Similar to the previous step, add a details folder and add Details.component.ts file and paste the following code into this file.
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'edit',
templateUrl: 'edit.component.html',
})
export class editComponent {
}
Now create a details.component.html page and paste the following code into this file.
<h2>This is a Details page</h2>
Add Edit Component
Using this component, we add the functionality to edit the information of an existing employee
. So create a edit folder and create Edit.component.ts file and paste the following code into this file.
@Component({
moduleId: module.id,
selector: 'nav-menu',
templateUrl: 'navmenu.component.html',
styleUrls: ['navmenu.component.css']
})
export class NavMenuComponent {
}
Now create edit.component.html page and paste the following code:
<h1>This is edit page</h1>
Create navMenu Component
We will add a side menu into our application and using this side menu, we will provide the functionality of redirect to the newEmployee
and Home
page of the application. So add a navmenu folder into component
section and create a navmenu.component.ts file and paste the following code:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'nav-menu',
templateUrl: 'navmenu.component.html',
styleUrls: ['navmenu.component.css']
})
export class NavMenuComponent {
}
Now create a navmenu.component.html file and paste the following code:
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle'
data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' [routerLink]="['/home']">EMS</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/new']">
<span class='glyphicon glyphicon-user'></span> New Employee
</a>
</li>
</ul>
</div>
</div>
</div>
After creating the .ts and .html file, now we create a .css file to add the style for this sidemenu, so add the sidemenu.component.css file and paste the following code into this file:
li .glyphicon {
margin-right: 10px;
}
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
@media (min-width: 768px) {
.main-nav {
height: 100%;
width: calc(25% - 20px);
}
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.navbar-header {
float: none;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
After adding all these component
s, now following will be the structure of our component
section.
Register the Components and Perform the Routing
After creating all the required component
s, now we needs to register all these component
s into app.modules.ts file, so open your app.modules.ts file and replace the code with the following code into this file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component';
import {NavMenuComponent} from './components/navmenu/navmenu.component';
import { newEmployeeComponent } from "./components/newEmployee/newEmployee.component";
import {homeComponent} from "./components/home/home.component";
import {editComponent} from "./components/edit/edit.component";
import {detailsComponent} from "./components/details/details.component";
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
newEmployeeComponent,
homeComponent,
editComponent,
detailsComponent
],
imports: [BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: homeComponent },
{ path: 'details/:id', component: detailsComponent },
{ path: 'new', component: newEmployeeComponent },
{ path: 'edit/:id', component: editComponent },
{ path: '**', redirectTo: 'home' }
])],
bootstrap: [AppComponent]
})
export class AppModule { }
In the above code lines of code, we register all the component
s into declarations
section and also perform the routing for these component
s.
Add router-outlet
Now go to your app.component.html page and replace the code of this file with the following code:
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3'>
<nav-menu></nav-menu>
</div>
<div class='col-sm-9 body-content'>
<router-outlet></router-outlet>
</div>
</div>
</div>
In the above code, we add the sidemenu
using the nav-menu
selector and also add the router-outlet
, this router-outlet
work as a primary outlet for all the components, in other words, RouterOutlet
is a placeholder
component that gets expanded to each route's content.
After making all the changes, now save all the changes and refresh or restart your application. Now following will be the structure of our application:
Add Service
Now, our API is ready to return the employee
list. Let’s use this API and display the employee
information. We need a Service
, which can use this API and get the result. Add a Service folder in an app
section. After creating the folder, add a TypeScript
file and name this file as services.ts and paste the code given below into this file:
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from "RxJS/Rx";
@Injectable()
export class EmployeeServcies {
constructor(private http: Http) {
}
getEmployeeList() {
return this.http.get('http://localhost:4500/api');
}
}
In the code given above, we create an EmployeeServcies
class and decorate this with @Injectable
meta data. @Injectbale
meta data is used to define a class as a Service
. In this Service
class, we add getEmployeeList
method. In this method, we are using GET
method of HTTP
class to perform HTTP GET
request to the Server.
After creating the Service, now we need to register this Service
in app.modules.ts file. Open your app.modules.ts file, import this Service
and register this Service
into providers. We are registering this Service
in an app.modules.ts file, which means now this Service
is a global Service
. We can use this Service
in any component and we don’t need to register this Service
in each component.
After creating and registering the Service
, now we use this Service
in our home
component, so open home.component.ts file and paste the code given below:
import { EmployeeServcies } from './../../services/services';
import { Component } from '@angular/core';
import { Response } from '@angular/http';
@Component({
moduleId: module.id,
selector: 'home',
templateUrl: 'home.component.html',
})
export class homeComponent {
public EmployeeList = [];
public constructor(private empService: EmployeeServcies) {
this.empService.getEmployeeList()
.subscribe(
(data: Response) => (this.EmployeeList = data.json())
);
}
}
In the code given above, we create an instance(empService
) of EmployeeServcies
Service and use the getEmployeeList
method of this Service
to get the employee
list. You can see that we are using a subscribe
. Actually, an Angular 2 provides a new pattern to run asynchronous requests, which are known as Observables
, http is the successor to Angular 1's $http.
Instead of returning a Promise
, its http.get()
method returns an Observable
object. Using subscribe
method, we can use the observable
, the subscribe
method tells the observable
that you perform your task. Here is someone who is listening and watching you. Perform the callback function when you return the result. In subscribe
method, we get the data and assign the data into EmployeeList
. Now, we use this list to display the employee
list.
Open home.component.html file and paste the code given below:
<div class="row">
<div class="col-md-12">
<h3>Employee List</h3>
<br />
</div>
</div>
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
S.No.
</th>
<th>
EmployeeName
</th>
<th>
Designation
</th>
<th>
Project
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let empData of EmployeeList ; let i = index;
trackBy: employeeId">
<td>
{{i+1}}
</td>
<td>
{{empData.EmployeeName}}
</td>
<td>
{{empData.Designation}}
</td>
<td>
{{empData.Project}}
</td>
<td>
<a [routerLink]="['/details/',empData._id]"
class="btn btn-primary">
Detail
</a>
<a [routerLink]="['/edit/',empData._id]"
class="btn btn-success">
Edit
</a>
<a
class="btn btn-danger"
(click)="deleteEmployee(empData._id)">
Delete
</a>
</td>
</tr>
</table>
</div>
</div>
In the code given above, we perform ngFor
on an EmployeeList
and create a list of employees
. We also add three anchor tags (Edit
, Delete
and Detail
) for an each employee
entry. We use the routerLink
to link the anchor
tag to the specific part of our app.
After making all the changes, save the project and refresh the browser and you will get the result given below:
Summary
This is the first part of "Build Modern App with MEAN Stack 2.0" series. Today, we learned how to setup Angular 2 Application with Node.js., create a Node.js server, use the mongoose library to make the connection with MongoDB database. We created some component and performed the routing for these components. Create Service to get the data from Web API, using built in http Service and display these data into a tabular format. In the next article, we will create some screens to add, delete or edit the employee information. We also provide the functionality of searching and sorting employee information.
You can download this project from https://github.com/Pankajmalhan/MeanStack2.
History
- 3rd May, 2017: Initial version