📘 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
In this Part 2 of Spring Boot + Angular 10 CRUD Example Tutorial, we will install and develop an Angular 10 web application.
Use below links to visit different parts of this tutorial:
- Spring Boot + Angular 10 CRUD Example Tutorial - Main Tutorial
- Spring Boot + Angular 10 CRUD Full Stack - Part 1 - Develop Spring Boot CRUD Rest APIs
- Spring Boot + Angular 10 CRUD Full Stack - Part 2 - Create an Angular 10 App
- Spring Boot + Angular 10 CRUD Full Stack - Part 3 - Develop Angular 10 CRUD Operations
- Spring Boot + Angular 10 CRUD Full Stack - Part 4 - Angular 10 CRUD App Configuration
- Spring Boot 2 + Angular 10 CRUD Full Stack - Part 5 - Running Angular 10 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 10 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
Create an Angular 10 App using Angular CLI 10
ng new angular10-springboot-client
C:\Angular 10\angular10-springboot-crud-example-tutorial>ng new angular10-springboot-client
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular10-springboot-client/angular.json (3734 bytes)
CREATE angular10-springboot-client/package.json (1270 bytes)
CREATE angular10-springboot-client/README.md (1043 bytes)
CREATE angular10-springboot-client/tsconfig.base.json (458 bytes)
CREATE angular10-springboot-client/tsconfig.json (475 bytes)
CREATE angular10-springboot-client/tslint.json (3184 bytes)
CREATE angular10-springboot-client/.editorconfig (274 bytes)
CREATE angular10-springboot-client/.gitignore (631 bytes)
CREATE angular10-springboot-client/.browserslistrc (853 bytes)
CREATE angular10-springboot-client/karma.conf.js (1039 bytes)
CREATE angular10-springboot-client/tsconfig.app.json (292 bytes)
CREATE angular10-springboot-client/tsconfig.spec.json (338 bytes)
CREATE angular10-springboot-client/src/favicon.ico (948 bytes)
CREATE angular10-springboot-client/src/index.html (311 bytes)
CREATE angular10-springboot-client/src/main.ts (372 bytes)
CREATE angular10-springboot-client/src/polyfills.ts (2835 bytes)
CREATE angular10-springboot-client/src/styles.css (80 bytes)
CREATE angular10-springboot-client/src/test.ts (753 bytes)
CREATE angular10-springboot-client/src/assets/.gitkeep (0 bytes)
CREATE angular10-springboot-client/src/environments/environment.prod.ts (51 bytes)
CREATE angular10-springboot-client/src/environments/environment.ts (662 bytes)
CREATE angular10-springboot-client/src/app/app-routing.module.ts (246 bytes)
CREATE angular10-springboot-client/src/app/app.module.ts (393 bytes)
CREATE angular10-springboot-client/src/app/app.component.html (25757 bytes)
CREATE angular10-springboot-client/src/app/app.component.spec.ts (1122 bytes)
CREATE angular10-springboot-client/src/app/app.component.ts (231 bytes)
CREATE angular10-springboot-client/src/app/app.component.css (0 bytes)
CREATE angular10-springboot-client/e2e/protractor.conf.js (869 bytes)
CREATE angular10-springboot-client/e2e/tsconfig.json (299 bytes)
CREATE angular10-springboot-client/e2e/src/app.e2e-spec.ts (660 bytes)
CREATE angular10-springboot-client/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
C:\Angular 10\angular10-springboot-crud-example-tutorial>ng new angular10-springboot-client
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular10-springboot-client/angular.json (3734 bytes)
CREATE angular10-springboot-client/package.json (1270 bytes)
CREATE angular10-springboot-client/README.md (1043 bytes)
CREATE angular10-springboot-client/tsconfig.base.json (458 bytes)
CREATE angular10-springboot-client/tsconfig.json (475 bytes)
CREATE angular10-springboot-client/tslint.json (3184 bytes)
CREATE angular10-springboot-client/.editorconfig (274 bytes)
CREATE angular10-springboot-client/.gitignore (631 bytes)
CREATE angular10-springboot-client/.browserslistrc (853 bytes)
CREATE angular10-springboot-client/karma.conf.js (1039 bytes)
CREATE angular10-springboot-client/tsconfig.app.json (292 bytes)
CREATE angular10-springboot-client/tsconfig.spec.json (338 bytes)
CREATE angular10-springboot-client/src/favicon.ico (948 bytes)
CREATE angular10-springboot-client/src/index.html (311 bytes)
CREATE angular10-springboot-client/src/main.ts (372 bytes)
CREATE angular10-springboot-client/src/polyfills.ts (2835 bytes)
CREATE angular10-springboot-client/src/styles.css (80 bytes)
CREATE angular10-springboot-client/src/test.ts (753 bytes)
CREATE angular10-springboot-client/src/assets/.gitkeep (0 bytes)
CREATE angular10-springboot-client/src/environments/environment.prod.ts (51 bytes)
CREATE angular10-springboot-client/src/environments/environment.ts (662 bytes)
CREATE angular10-springboot-client/src/app/app-routing.module.ts (246 bytes)
CREATE angular10-springboot-client/src/app/app.module.ts (393 bytes)
CREATE angular10-springboot-client/src/app/app.component.html (25757 bytes)
CREATE angular10-springboot-client/src/app/app.component.spec.ts (1122 bytes)
CREATE angular10-springboot-client/src/app/app.component.ts (231 bytes)
CREATE angular10-springboot-client/src/app/app.component.css (0 bytes)
CREATE angular10-springboot-client/e2e/protractor.conf.js (869 bytes)
CREATE angular10-springboot-client/e2e/tsconfig.json (299 bytes)
CREATE angular10-springboot-client/e2e/src/app.e2e-spec.ts (660 bytes)
CREATE angular10-springboot-client/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
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
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"
]
...
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
';
Move to Part 3 - Develop Angular 10 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