In my previous post I give some basic and required information related to AngularJs now in this post I cover some most important topics which help you to build your own application in AngularJs. I am also using NodeJs as backend. In Node, I built my REST API through which we can perform CRUD operation on the database. Now before we start creating our Angular Application I think you have good knowledge of NodeJs and Express because first we can create a REST Api for our Application.

REST API in NodeJs using Express

Step 1. Install ExpressJs from the official website or open terminal and go to that location where you want to install or create your application and after that run below command on terminal.

If you want to install all require module together you can create package.json file in your folder and add below code on it and run npm install command on the terminal and it will install all required module for your project

Once it will install all required module for your application you can move to next step.

Step 2. Now create server.js file and add below code in it

Above code is very simple to understand if you have basic knowledge of Node and ExpressJs, we create our application and allow specific port in which we can run this and also create some method/routes which handle the requests. I am using MySQL as default Database for this application so you also need to create Database and table where we put our data and perform CURD operation.You need to create Database and run below query to create table inside your database.

Now your Database and REST API is ready and we move to our main Application which is AngularJs application.

Simple AngularJs Application Performing CURD operation

Now create a new separate folder where we can create our application.

Step 1. First, we can install AngularJs CLI which help to setup our application fast and also helpful to create components so type below commands in terminal and lets get started.

I am running my application in 3001 port if you want to run your application in default port which is 4200 you can type 

Step 2. Now open browser and type http://localhost:3001 or 4200 if you are using default port if everything is fine you get welcome page.

Step 3. Now we create our first/default screen so we need to create a component using CLI to create your component type bellow command and it will generate component for u.

this code generate component for you after this we create some other component which we use in our application

this will generate all component and folder inside app folder. Now open app.module.ts inside app folder add routes in it which define which component we need to load according to request URL

You need to import RouterModule from angular and define your routes. In Angular 2  whatever you need you need to import that module or component etc.

Above I pass Array of routes which explain our application which component we want to load when this type of request is made. Bellow is my complete code of app.module.ts in this I also import some other module which I explain later in this project.

Step 4. For this application, i am using bootstrap so we need to add bootstrap library in our application to add those link open index.html which is inside src folder of your project open that and add Scripts and CSS in it

Step 5. Now we can create menus for our application through which we can navigate in our application. To create menus for your application open app.component.html file which is inside app folder open this file and create a menu for your application as shown bellow.

The RouterOutlet directive is used to display views for a given route. This is where templates of specific routes are loaded while we navigate. If you want to pass some dynamic data in your HTML file or need to create dynamic menus you can pass from your main app component to do this open app.component.ts file and create array title for your page

Now if you want to call this variable in your HTML file call like this as shown bellow

and this will print value it contains.  Our menu is ready and now we can create our home page which load’s when we land on this site. Now open home.component.html in this page I paste simple static content 

After creating this page switch to the browser and check your application it looks like this.

Simple Angular JS 2 Application Tutorial

Step 6.  Now edit add.component.ts which is inside add folder. In this file, we can communicate with our API and save form data to Database. In this, i also import some other module like Http Module which helps to send and get a response from server and Routes through which we can redirect our application after we get the success message from the server. In this, I also import FormBuilder which help us to inflate value in form.

In above class I also create a submitForm() method which helps to post data to server and when data is saved we redirect to lists page where we show list of save information. Now open add.component.html and paste below code in it 

Please note how we call FormGroup and NgSubmit in form

After saving form data in Database we need to load that data and show in our views.

Angular 2 Tutorial Create a CRUD App with Angular CLI

Step 7. Now we load data from API this part is little confusing for the first time but once you understand then this is very easy. Fisrt create new file inside lists folder and name it as lists.ts in this class we define which type of data we load and name of object we get from service.

After this we can create service class lists.service.ts which load data from API and save it into Array list.

I import Injectable module because we are going to use this class in our main class so we make this class @Injectable() in this we use map and pass json response to Array list. Here i also import List class which i create and when i get response from API I will save that data as Array using that class.

Now open main class lists.component.ts in this file we import our service class and call method which we create to load data from API and pass that data to view

I call my service inside ngOnInit and pass that data to Observable Array. I also create a method to delete data from list and after deleting data i reload data from API. Now open lists.component.html and paste below code init.

Simple AngularJs2 Application tutorial

Step 8. Now when we click on edit link we need to load data from API and inflate that data into a form, now edit edit.component.ts  file in this file first we get ID from routes using activatedRoute . 

Now add below Html code in your edit.component.html file inside edit folder

After this, you can check this in your browser. 

Perform CURD operation using AngularJs2 application

Hope this will help you to understand basic of Angular Js 2 🙂