📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
Use below links to visit different parts of this tutorial:
- Spring Boot + Angular 9 CRUD Example Tutorial - Main Tutorial
- Spring Boot + Angular 9 CRUD Tutorial - Part 1 - Develop Spring Boot CRUD Rest APIs
- Spring Boot + Angular 9 CRUD - Part 2 - Create an Angular 9 App
- Spring Boot + Angular 9 CRUD - Part 3 - Develop Angular 9 CRUD Operations
- Spring Boot + Angular 9 CRUD, Part 4 - Angular 9 CRUD App Configuration
- Spring Boot 2 + Angular 9 CRUD, Part 5 - Running Angular 9 CRUD App
Table of contents
- Install the latest version of Angular CLI
- Create Angular 9 client application using Angular CLI
- Identify Components, Services, and Modules
- Create Service & Components using Angular CLI
- Integrate JQuery and Bootstrap with Angular
Angular 9 Client App Development
C:\Angular>node -v
v10.15.3
C:\Angular>npm -v
6.9.0
Install the latest version of Angular CLI 9
npm install -g @angular/cli@9.0.0-rc.7
C:\Angular\angular9-springboot-crud-tutorial>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.0-rc.7
Node: 10.15.3
OS: win32 x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.900.0-rc.7
@angular-devkit/core 9.0.0-rc.7
@angular-devkit/schematics 9.0.0-rc.7
@schematics/angular 9.0.0-rc.7
@schematics/update 0.900.0-rc.7
rxjs 6.5.3
Create an Angular 9 App using Angular CLI 9
ng new angular9-springboot-client
Identify Components, Services, and Modules
Components
- create-employee
- employee-list
- employee-details
Services
- employee.service.ts - Service for Http Client methods
Modules
- FormsModule
- HttpClientModule
- AppRoutingModule
Employee Class (Typescript class)
- employee.ts: class Employee (id, firstName, lastName, emailId)
Create Service & Components using Angular CLI
- ng g s employee
– ng g c create-employee
– ng g c employee-details
– ng g c employee-list
C:\Angular\angular9-springboot-crud-tutorial\angular9-springboot-client>cd src/app
C:\Angular\angular9-springboot-crud-tutorial\angular9-springboot-client\src\app>ng g s employee
CREATE src/app/employee.service.spec.ts (343 bytes)
CREATE src/app/employee.service.ts (137 bytes)
C:\Angular\angular9-springboot-crud-tutorial\angular9-springboot-client\src\app>ng g c create-employee
CREATE src/app/create-employee/create-employee.component.html (34 bytes)
CREATE src/app/create-employee/create-employee.component.spec.ts (685 bytes)
CREATE src/app/create-employee/create-employee.component.ts (304 bytes)
CREATE src/app/create-employee/create-employee.component.css (0 bytes)
UPDATE src/app/app.module.ts (509 bytes)
C:\Angular\angular9-springboot-crud-tutorial\angular9-springboot-client\src\app>ng g c employee-list
CREATE src/app/employee-list/employee-list.component.html (32 bytes)
CREATE src/app/employee-list/employee-list.component.spec.ts (671 bytes)
CREATE src/app/employee-list/employee-list.component.ts (296 bytes)
CREATE src/app/employee-list/employee-list.component.css (0 bytes)
UPDATE src/app/app.module.ts (617 bytes)
C:\Angular\angular9-springboot-crud-tutorial\angular9-springboot-client\src\app>ng g c employee-list
ERROR! src/app/employee-list/employee-list.component.html already exists.
ERROR! src/app/employee-list/employee-list.component.spec.ts already exists.
ERROR! src/app/employee-list/employee-list.component.ts already exists.
ERROR! src/app/employee-list/employee-list.component.css already exists.
The Schematic workflow failed. See above.
C:\Angular\angular9-springboot-crud-tutorial\angular9-springboot-client\src\app>ng g c employee-details
CREATE src/app/employee-details/employee-details.component.html (35 bytes)
CREATE src/app/employee-details/employee-details.component.spec.ts (692 bytes)
CREATE src/app/employee-details/employee-details.component.ts (308 bytes)
CREATE src/app/employee-details/employee-details.component.css (0 bytes)
UPDATE src/app/app.module.ts (737 bytes)
Integrate JQuery and Bootstrap with Angular
npm install bootstrap jquery --save
...
"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"
]
...
/* You can add global styles to this file, and also import other style files */
@import '~bootstrap/dist/css/bootstrap.min.css';
.footer {
position: absolute;
bottom: 0;
width:100%;
height: 70px;
background-color: blue;
text-align: center;
color: white;
}
Move to Part 3 - Develop Angular 9 CRUD Operations
In the next part 3, we will create CRUD operations for the Employee model using Angular 9.In the next Part 3, we will learn the following topics:
- Create an Employee class
- Employee Service
- Creating Employee List Template and Component
- Create Add Employee Template and Component
- Create View Employee Details Template and Component
Comments
Post a Comment
Leave Comment