Scribd
Upload
68 views

Angular Project Setup STEPS

The document provides steps to create an Angular application with backend integration. It involves installing Angular CLI, generating components like create-employee, update-employee, services like employee.service, and models. The employee.service connects to a backend API to perform CRUD operations. Components and templates are generated to display a list of employees fetched from the backend service.

Uploaded by

BTechMag com
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
68 views

Angular Project Setup STEPS

The document provides steps to create an Angular application with backend integration. It involves installing Angular CLI, generating components like create-employee, update-employee, services like employee.service, and models. The employee.service connects to a backend API to perform CRUD operations. Components and templates are generated to display a list of employees fetched from the backend service.

Uploaded by

BTechMag com
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

angular project creation

1. check node version


node -v
if not installed then install node.js

2. Check npm version


npm -v

3. Install the latest version of Angular CLI. To install or update Angular CLI,
type this command in the Terminal or Node Command-Line.
npm install -g @angular/cli

4. Check angular version {Note if ng may not work in windows powershell, run it in
command prompt console}
ng --version

5. command to generate an Angular Client application


ng new angular-frontend

6. Creation of components, services, and modules


For example -
Components
create-employee
update-employee
employee-list
employee-details
Services
employee.service.ts - Service for HTTP Client methods
Modules
We use below in-built modules provided by Angular:
FormsModule
HttpClientModule
AppRoutingModule
Employee Class (Typescript class)
employee.ts: class Employee (id, firstName, lastName, emailId)

7. Create Angular Components


ng g c create-employee
ng g c update-employee
ng g c employee-details
ng g c employee-list
Here ng refers Angular
g meaning generate
c meaning component

8. Service Classes
ng g s employee
Here ng refers Angular
g meaning generate
s meaning service

9. Use NPM to download Bootstrap & JQuery


npm install bootstrap jquery --save

10. Configure installed Bootstrap & JQuery in an angular.json file:


"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

If bootstrap won't work then try to import bootstrap CSS in style.css like:
@import '~bootstrap/dist/css/bootstrap.min.css';

.footer {
position: absolute;
bottom: 0;
width:100%;
height: 70px;
background-color: blue;
text-align: center;
color: white;
}

11. Create an Employee Model (TypeScript)


Path - src/app/employee.ts
let’s define an Employee class for working with employees. create a new file
employee.ts inside src/app folder and add the following code to it
! is used to tell the compiler, If the 'id' property will be assigned a
value later in your code, you can use the definite assignment assertion (!) to
inform TypeScript that the property will be assigned before it is used.

export class Employee {


id!: number;
firstName!: string;
lastName!: string;
emailId!: string;
}

12. Create Employee Service - REST Client


update the file from this path
Path - src/app/employee.service.ts
The EmployeeService will be used to get the data from the backend by calling
spring boot APIs.
Update the employee.service.ts file inside src/app directory with the
following code to it -

import { Injectable } from '@angular/core';


import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';
import { Employee } from './employee';

@Injectable({
providedIn: 'root'
})
export class EmployeeService {

private baseURL = "http://localhost:8080/api/v1/employees";

constructor(private httpClient: HttpClient) { }

getEmployeesList(): Observable<Employee[]>{
return this.httpClient.get<Employee[]>(`${this.baseURL}`);
}
createEmployee(employee: Employee): Observable<Object>{
return this.httpClient.post(`${this.baseURL}`, employee);
}

getEmployeeById(id: number): Observable<Employee>{


return this.httpClient.get<Employee>(`${this.baseURL}/$
{id}`);
}

updateEmployee(id: number, employee: Employee):


Observable<Object>{
return this.httpClient.put(`${this.baseURL}/${id}`,
employee);
}

deleteEmployee(id: number): Observable<Object>{


return this.httpClient.delete(`${this.baseURL}/${id}`);
}
}

13. Creating Employee List Component and Template


Path - src/app/employee-list/employee-list.component.ts
Let's create the EmployeeListComponent component which will be used to
display
a list of employees,
create a new employee,
and delete an employee.

You might also like