Angular + Spring Boot + MySQL CRUD Tutorial - Part #4 - Angular App Configuration

---

Part 3 Part 5

Complete Tutorial

---

In the previous part 3, we have developed CRUD operations using Angular 10. 

In this part 4 of Spring Boot + Angular 10 CRUD Example Tutorial, we create an Angular 10 web application configuration, App component, App modules, App Routing, etc.

Use the below links to visit different parts of this tutorial:

1. Spring Boot + Angular 10 CRUD Example Tutorial - Main Tutorial
2. Spring Boot + Angular 10 CRUD Full Stack - Part 1 - Develop Spring Boot CRUD Rest APIs
3. Spring Boot + Angular 10 CRUD Full Stack - Part 2 - Create an Angular 10 App
4. Spring Boot + Angular 10 CRUD Full Stack - Part 3 - Develop Angular 10 CRUD Operations
5. Spring Boot + Angular 10 CRUD Full Stack - Part 4 - Angular 10 CRUD App Configuration
6. Spring Boot 2 + Angular 10 CRUD Full Stack - Part 5 - Running Angular 10 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

Path: /package.json 

The package.json file contains project configuration information including package dependencies which get installed when you run npm install.

Note that angular version 10.0.3 in the dependencies section in the below file.

{
  "name": "angular10-helloworld-example-tutorial",
  "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": "~10.0.3",
    "@angular/common": "~10.0.3",
    "@angular/compiler": "~10.0.3",
    "@angular/core": "~10.0.3",
    "@angular/forms": "~10.0.3",
    "@angular/platform-browser": "~10.0.3",
    "@angular/platform-browser-dynamic": "~10.0.3",
    "@angular/router": "~10.0.3",
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.2",
    "@angular/cli": "~10.0.2",
    "@angular/compiler-cli": "~10.0.3",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

App Routing Module

Path: /src/app/app.routing.module.ts

Routing for the Angular app is configured as an array of Routes, each component is mapped to a path so the Angular Router knows which component to display based on the URL in the browser address bar.

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

Path: /src/app/app.component.ts

The app component is the root component of the application, it defines the root tag of the app as with the selector property of the @Component decorator.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 10 + Spring Boot 2 CRUD Tutorial';
}

App Component Template

Path: /src/app/app.component.html

Defines the HTML template associated with the root AppComponent.

<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

Path: /src/app/app.module.ts

Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.

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

Path: /src/index.html

The main index.html file is the initial page loaded by the browser that kicks everything off. Webpack bundles all of the javascript files together and injects them into the body of the index.html page so the scripts get loaded and executed by the browser.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular9SpringbootClient</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

Path: /src/main.ts

The main file is the entry point used by angular to launch and bootstrap the application.

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

Path: /src/polyfills.ts

Some features used by Angular 10 are not yet supported natively by all major browsers, polyfills are used to add support for features where necessary so your Angular 10 application works across all major browsers.

import 'core-js/features/reflect';
import 'zone.js/dist/zone';

This completes the Angular 10 web application configuration and app-related components.

Move to Part 5 - Running Angular 10 CRUD App and Demo

In the next part 5, we will see how to run an Angular 10 web application and we will also see demo screenshots of the final development of this Employee Management System application.

---

Part 3 Part 5

Complete Tutorial

---