📘 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 the below links to visit different parts of this tutorial:
- Spring Boot + Angular 8 CRUD Example Tutorial - Main Tutorial
- Spring Boot + Angular 8 CRUD, Part 1 - Develop Spring Boot CRUD Rest APIs
- Spring Boot + Angular 8 CRUD, Part 2 - Create Angular 8 App
- Spring Boot + Angular 8 CRUD, Part 3 - Develop Angular 8 CRUD Operations
- Spring Boot + Angular 8 CRUD, Part 4 - Angular 8 CRUD App Configuration
- Spring Boot + Angular 8 CRUD, Part 5 - Running Angular 8 CRUD App
Table of contents
- npm package.json - Configure Dependencies
- App Routing Module
- App Component
- App Component Template
- App Module
- Main Index Html File
- Main (Bootstrap) File
- Polyfills
- TypeScript tsconfig.json
npm package.json - Configure Dependencies
{
"name": "angular8-springboot-client",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.1",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
}
App Routing Module
import { EmployeeDetailsComponent } from './employee-details/employee-details.component'; import { CreateEmployeeComponent } from './create-employee/create-employee.component'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { EmployeeListComponent } from './employee-list/employee-list.component'; import { UpdateEmployeeComponent } from './update-employee/update-employee.component'; const routes: Routes = [ { path: '', redirectTo: 'employee', pathMatch: 'full' }, { path: 'employees', component: EmployeeListComponent }, { path: 'add', component: CreateEmployeeComponent }, { path: 'update/:id', component: UpdateEmployeeComponent }, { path: 'details/:id', component: EmployeeDetailsComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
App Component
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 8 + Spring Boot 2 CRUD Tutorial';
}
App Component Template
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="employees" class="nav-link" routerLinkActive="active">Employee List</a>
</li>
<li class="nav-item">
<a routerLink="add" class="nav-link" routerLinkActive="active">Add Employee</a>
</li>
</ul>
</nav>
<div class="container">
<br>
<h2 style="text-align: center;">{{title}}</h2>
<hr>
<div class="card">
<div class="card-body">
<router-outlet></router-outlet>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span>All Rights Reserved 2019 @JavaGuides</span>
</div>
</footer>
App Module
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CreateEmployeeComponent } from './create-employee/create-employee.component'; import { EmployeeDetailsComponent } from './employee-details/employee-details.component'; import { EmployeeListComponent } from './employee-list/employee-list.component'; import { HttpClientModule } from '@angular/common/http'; import { UpdateEmployeeComponent } from './update-employee/update-employee.component'; @NgModule({ declarations: [ AppComponent, CreateEmployeeComponent, EmployeeDetailsComponent, EmployeeListComponent, UpdateEmployeeComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Main Index Html File
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular8SpringbootClient</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Main (Bootstrap) File
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Polyfills
import 'core-js/features/reflect';
import 'zone.js/dist/zone';
TypeScript tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
Why I can not download complete code ?
ReplyDeleteYou can download source code of this tutorial from GitHub repository. Link given at end of this tutorial.
DeleteI followed instructions, but kept on getting error Can't bind to ngModel
ReplyDelete8 templateUrl: './create-employee.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component CreateEmployeeComponent.
src/app/create-employee/create-employee.component.html:16:70 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.
16 input type="text" class="form-control" id="emailId"required [(ngModel)]="employee.emailId">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I changed the order of imports in app.module.ts (https://www.sunzala.com/blog-angular-cannot-bind-ngmodel-property/) as below:
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule
],
Notice FormsModule comes immediately after BrowserModule. The error went away