=====================================
Angular Integration with Spring Boot
=====================================
=> Angular is a client side framework
=> Angular framework developed by Google company
=> Angular developed using TypeScript
=> Angular is free & open source
=> Angular supports multiple browsers
=> Angular is mainley used for SPA (single page app)
Note: Angular JS & Angular framework both are not same.
=> Angular JS developed using Java Script. (Angular 1.x)
=> Google identified some performance issues in Angular jS 1.x version then they
re-developed angular is Typescript which is called as Angular framework.
Note: From 2.x version onwards it is called as Angular Framework.
===================
Angular Setup
===================
Step-1 : Download and Install Node
URL : https://nodejs.org/en/
Note: After installation, verify node version
$ node -v
Step-2 : Install Type Script
$ npm install -g typescript
$ tsc -v
Step-3 : Install Angular CLI
$ npm install @angular/cli -g
$ ng v
Step-4 : Download and Install VS Code IDE
URL : https://code.visualstudio.com/download
Step-5: Create Angular Application
$ ng new app1
$ cd app1
$ ng serve --open
Noe: Angular apps will use Live server for execution and it will run on 4200 port
number.
==========================================
=> Angular application nothing but collection of components
Ex: menu-component, login-component, register-component, dashboard-component....
=> In angular application by default "app-component" will be created. It is called
as Parent Component.
Note: Every component contains 3 files
1) component.ts (logic to handle req & response)
2) component.html (presentation file - template)
3) component.css (styles for specific component)
=> Every Component will have a selector to acess that component.
Ex : <app-root></app-root>
Note: App-Component is the entry point for angular application.
=> index.html page is called as welcome page in angular application.
=> When we run angular application, index.html page will be loaded and it will
invoke app-component hence we will get response from app.component.html page.
Note: To apply styles for app-component template we have app-component.css file.
========================
Angular Building Blocks
========================
1) Components
2) Templates
3) Data Binding
4) Directives
5) Pipes
6) Services
=> Component represents small portion of web page
Ex : header component, footer component, menu component, login component, reg
component..
=> Template represents view page (html)
Note: Every component will have its own template (html)
=> Data Binding is used to transfer the data between component and template
Component <------------> Template
=> Directives are used to manipulate DOM elements in the template
Ex : ngIf, ngFor, ngModel...
=> Pipes are used to transform the data
Ex : uppercase, lowercase, INR, USD ...
=> Services are used to develop business logic (api calls)
==========
Summary
==========
1) What is Angular
2) Angular Setup
3) Ng First App Development
4) Angular Build blocks
=====================================
Spring Boot with Angular Integration
=====================================
Spring Boot : Used for backend development
Angular : Used for frontend development
Fullstack App : Spring Boot + Angular
===========================
Spring Boot - Rest API
===========================
@SpringBootApplication
@RestController
@CrossOrigin
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
@GetMapping("/welcome")
public String getWelcomeMsg() {
return "Welcome To Ashok IT";
}
============== Angular Application Development =====================
##Step-1 : Create Angular application
$ ng new app2
##Step-2 : Run angular application
$ ng serve --open
##Step-3 : Configure httpclient details in "app.config.ts" file
-------------------------------------------------------------
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient()]
};
---------------------------------------------------------------
##Step-4: Create Service class and invoke backend rest api
$ ng generate service app
-------------------------------------------------------------
@Injectable({
providedIn: 'root'
})
export class AppService {
private welcomeUrl: string;
constructor(private http: HttpClient) {
this.welcomeUrl = 'http://localhost:8080/welcome';
}
public getWelcomeMsg(){
return this.http.get(this.welcomeUrl, {responseType:'text'});
}
}
----------------------------------------------------------------------------
##Step-5 : Inject service class in app-component
----------------------------------------------------------------------------
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { AppService } from './app.service';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, HttpClientModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'app1';
msg:string="";
constructor(private appService: AppService){}
getWelcomeMsg(){
this.appService.getWelcomeMsg().subscribe(resp => {
this.msg = resp;
})
}
}
-------------------------------------------------------------
##Step-6 : Write Presentation logic in app-template
-------------------------------------------------------------
<button (click)="getWelcomeMsg()">Get Message</button>
<hr/>
{{msg}}
