Angular for Java Enterprise Developers: Oracle Code One 2018
2 likes730 views
This document provides an agenda and overview for developing Angular applications with Java backend services. It discusses TypeScript patterns that are common with Java, using the Angular CLI, creating REST APIs with Spring Boot, bundling Angular for production, and deploying Angular and Java applications to the cloud using Maven and Docker. It also covers Angular fundamentals like components, templates, dependency injection and modules.
![Optional: adding return types
function orderByName(a: User[]): User[] {
let result = a.slice(0);
result.sort((x, y) !=>
x.name.localeCompare(y.name));
return result;
}
But someCmes it might help finding bugs in the code](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-19-320.jpg)
![Enums
enum UserActionTypes {
LOAD_REQUEST = '[User] Load Request',
LOAD_SUCCESS = '[User] Load Success'
}
type UsuarioActions =
| { type: UserActionTypes.LOAD_REQUEST }
| {
type: UserActionTypes.LOAD_SUCCESS;
payload: User[];
};](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-27-320.jpg)
![Arrow Functions
function orderByName(a: User[]): User[] {
let result = a.slice(0);
return result.sort((x, y) !=> x.name.localeCompare(y.name));
}
Similar to Java lambdas](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-32-320.jpg)
![import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ContactDetailsComponent } from './components/contact-details/contact-details.component';
import { ContactFormComponent } from './components/contact-form/contact-form.component';
import { ContactListComponent } from './components/contact-list/contact-list.component';
import { ContactsContainerComponent } from './contacts-container/contacts-container.component';
import { ContactsRoutingModule } from './contacts-routing.module';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
ContactsRoutingModule,
ModalModule.forRoot()
],
declarations: [
ContactsContainerComponent,
ContactListComponent,
ContactFormComponent,
ContactDetailsComponent
],
entryComponents: [ContactDetailsComponent]
})
export class ContactsModule {}
Import classes](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-41-320.jpg)
![import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ContactDetailsComponent } from './components/contact-details/contact-details.component';
import { ContactFormComponent } from './components/contact-form/contact-form.component';
import { ContactListComponent } from './components/contact-list/contact-list.component';
import { ContactsContainerComponent } from './contacts-container/contacts-container.component';
import { ContactsRoutingModule } from './contacts-routing.module';
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
ContactsRoutingModule,
ModalModule.forRoot()
],
declarations: [
ContactsContainerComponent,
ContactListComponent,
ContactFormComponent,
ContactDetailsComponent
]
})
export class ContactsModule {}
Import other modules
Import
components used in this
module](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-42-320.jpg)
![Lazy Loading Strategies
const routes: Routes = [
{
path: 'module-2',
loadChildren: './module-2/module-2.module#Module2Module',
data: { preload: true } !// pre-load - background
},
{
path: 'module-3',
loadChildren: './feature-3/module-3.module#Module3Module'
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: AppCustomPreloader
})
], !// our custom logic
})
export class AppRoutingModule {}](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-46-320.jpg)
![Routing: use Hash
@NgModule({
imports: [RouterModule.forRoot(routes, {
useHash: true
})],
exports: [RouterModule]
})
export class AppRoutingModule {}](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-48-320.jpg)
![Keep consistency
@Injectable()
export class TasksService {
constructor(public http: ApiService) { }
getAllTasksWithPaging(start = 0, limit = 100) {
return this.http
.getRequest<Task[]>(API.READ_TASKS, {start: start, limit: limit});
}
getById(id: number) {
return this.http.getRequest<Task>(`${API.READ_TASKS}/${id}`);
}
}](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-52-320.jpg)
![Keep consistency
export interface ServerResponse<T> {
data: T[];
total: number;
success!?: boolean;
errorMsg!?: string;
}](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-53-320.jpg)
![Generic “Dao” Service
@Injectable()
export class CRUDService<T> {
constructor(public http: HttpClient, private API_URL) {}
load() {
return this.http.get<T[]>(this.API_URL);
}
create(record: T) {
return this.http.post<Task>(this.API_URL, record);
}
update(record: T) {
return this.http.put<Task>(`${this.API_URL}/${record.id}`, record);
}
remove(id: string) {
return this.http.delete<T>(`${this.API_URL}/${id}`);
}
}](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-55-320.jpg)
![angular.json
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
!!...
},
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
}
!!...
}](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-63-320.jpg)
![Integration with Back-end: No CORs
proxy.conf.json
{
"/api": {
"target": "http:!//localhost:8080",
"secure": false
},
"logLevel": "debug"
}
const PROXY_CONFIG = [
{
context: ['/api'],
target: 'http:!//localhost:8080',
secure: false,
logLevel: 'debug',
pathRewrite: { '^/api': '' }
}
];
module.exports = PROXY_CONFIG;
proxy.conf.js](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-65-320.jpg)
![Docker: Java / Spring
FROM maven:3.5.4-jdk-10-slim
WORKDIR /usr/src/java-code
COPY . /usr/src/java-code/
RUN mvn package
WORKDIR /usr/src/java-app
RUN cp /usr/src/java-code/target!/*.jar ./app.jar
EXPOSE 8080
CMD ["java", "-jar", "app.jar"]](https://image.slidesharecdn.com/oraclecodeoe-tutorial-181023223345/85/Angular-for-Java-Enterprise-Developers-Oracle-Code-One-2018-78-320.jpg)
Angular for Java Enterprise Developers: Oracle Code One 2018
- 2. Agenda • High-level overview of Angular + TypeScript • TypeScript/Java common pa=erns • Do’s and Dont’s - Angular (Java dev ediCon) • Angular CLI • Java REST with Spring Boot • Bundling Angular for producCon • Guide to deploy Angular + Java/Spring to the cloud (maven + docker)
- 9. TypeScript 2018 Dev Environment TypeScript 3.1 EcmaScript 2015+ ES5
- 11. Getting Started npm install -g typescript mv main.js main.ts tsc main.ts
- 15. Java 10: var AWer compiling the variables are strongly typed var number10 = 10; var user = new User(); var myList = List.of("1","2","3","4","5"); !// after compiled int number10 = 10; User user = new User(); List<String> myList = List.of("1","2","3","4","5");
- 16. Java 10: var !// No!!! var userName; userName = user.getName(); !// Yes! var userName = user.getName();
- 18. TypeScript: Avoid Verbosity !// Yes let myString = 'Code One'; !// No!!! let myString2: string = 'Code One';
- 19. Optional: adding return types function orderByName(a: User[]): User[] { let result = a.slice(0); result.sort((x, y) !=> x.name.localeCompare(y.name)); return result; } But someCmes it might help finding bugs in the code
- 20. Interfaces: two concepts (1/2) interface Person { name: string; age: number; } Interface is a type, a definiCon
- 21. Interfaces: two concepts (2/2) interface Person { name: string; age: number; } interface Contact extends Person { phone: string; } Or it can be used in the OO concept
- 22. Duck Typing
- 25. Defining Types on the go + Unions type Shape = | { type: 'circle'; radius: number } | { type: 'square'; w: number } | { type: 'rectangle'; w: number, h: number };
- 26. Defining Types on the go + unions function calculateArea(shape: Shape) { switch (shape.type) { case 'circle': return Math.PI * shape.radius !** 2; case 'rectangle': return shape.w * shape.h; case 'square': return shape.w !** 2; } throw new Error('Invalid Shape'); } const myCircle: Shape = { type: 'circle', radius: 2 }; calculateArea(myCircle);
- 27. Enums enum UserActionTypes { LOAD_REQUEST = '[User] Load Request', LOAD_SUCCESS = '[User] Load Success' } type UsuarioActions = | { type: UserActionTypes.LOAD_REQUEST } | { type: UserActionTypes.LOAD_SUCCESS; payload: User[]; };
- 28. Getters and Setters: Don’t export class Contact { private _name: string; get name() { return this._name; } set name(name: string) { this._name = name; } }
- 29. Getters and Setters: Do export class AuthService { private loggedIn = new BehaviorSubject(false); get isLoggedIn() { return this.loggedIn.asObservable(); } } isLoggedIn = AuthService.isLoggedIn;
- 31. EcmaScript
- 32. Arrow Functions function orderByName(a: User[]): User[] { let result = a.slice(0); return result.sort((x, y) !=> x.name.localeCompare(y.name)); } Similar to Java lambdas
- 33. > npm install -g @angular/cli > ng new my-project > cd my-project > ng serve || npm run start
- 34. Angular CLI
- 36. COMPONENTS DIRECTIVES ROUTINGSERVICES TEMPLATE DATA BINDINGDEPENDENCY INJECTION MODULES Main Blocks
- 37. COMPONENT {…} TEMPLATE <..> DIRECTIVES {..} SERVICES SERVICE B SERVICE A MODULE X MODULE A MODULE B Property Binding Event Binding
- 39. Modules
- 41. import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { ModalModule } from 'ngx-bootstrap/modal'; import { ContactDetailsComponent } from './components/contact-details/contact-details.component'; import { ContactFormComponent } from './components/contact-form/contact-form.component'; import { ContactListComponent } from './components/contact-list/contact-list.component'; import { ContactsContainerComponent } from './contacts-container/contacts-container.component'; import { ContactsRoutingModule } from './contacts-routing.module'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule, ContactsRoutingModule, ModalModule.forRoot() ], declarations: [ ContactsContainerComponent, ContactListComponent, ContactFormComponent, ContactDetailsComponent ], entryComponents: [ContactDetailsComponent] }) export class ContactsModule {} Import classes
- 42. import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { ModalModule } from 'ngx-bootstrap/modal'; import { ContactDetailsComponent } from './components/contact-details/contact-details.component'; import { ContactFormComponent } from './components/contact-form/contact-form.component'; import { ContactListComponent } from './components/contact-list/contact-list.component'; import { ContactsContainerComponent } from './contacts-container/contacts-container.component'; import { ContactsRoutingModule } from './contacts-routing.module'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule, ContactsRoutingModule, ModalModule.forRoot() ], declarations: [ ContactsContainerComponent, ContactListComponent, ContactFormComponent, ContactDetailsComponent ] }) export class ContactsModule {} Import other modules Import components used in this module
- 45. Lazy Loading
- 46. Lazy Loading Strategies const routes: Routes = [ { path: 'module-2', loadChildren: './module-2/module-2.module#Module2Module', data: { preload: true } !// pre-load - background }, { path: 'module-3', loadChildren: './feature-3/module-3.module#Module3Module' } ]; @NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: AppCustomPreloader }) ], !// our custom logic }) export class AppRoutingModule {}
- 47. Lazy Loading Strategies import { PreloadingStrategy, Route } from '@angular/router'; import { Observable, of } from 'rxjs'; export class AppCustomPreloader implements PreloadingStrategy { preload(route: Route, load: Function): Observable<any> { return route.data !&& route.data.preload ? load() : of(null); } }
- 48. Routing: use Hash @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true })], exports: [RouterModule] }) export class AppRoutingModule {}
- 51. Create Wrappers @Injectable() export class ApiService { constructor(public http: HttpClient) { } getRequest<T>(url: string, params!?: any) { return this.http.get<ServerResponse<T!>>(url, { params: this.getQueryParams(params) }) .take(1); !// as simple Ajax call, we only need 1 value } postRequest(url: string, body: any) { !// POST } private getQueryParams(params: any) { !// logic to create the query params for http call } downloadFile(url: string, params!?: any) { !// logic for file download } }
- 52. Keep consistency @Injectable() export class TasksService { constructor(public http: ApiService) { } getAllTasksWithPaging(start = 0, limit = 100) { return this.http .getRequest<Task[]>(API.READ_TASKS, {start: start, limit: limit}); } getById(id: number) { return this.http.getRequest<Task>(`${API.READ_TASKS}/${id}`); } }
- 53. Keep consistency export interface ServerResponse<T> { data: T[]; total: number; success!?: boolean; errorMsg!?: string; }
- 54. Inheritance export abstract class BaseFormComponent implements IFormCanDeactivate { protected formSubmitAttempt: boolean; protected validateDirty = true; form: FormGroup; constructor() { this.formSubmitAttempt = false; } isFieldInvalid(field: string) { !// some logic here } onSubmit() { this.formSubmitAttempt = true; !// generic logic for all forms } canDeactivate(): Observable<boolean> { return this.modalService.showConfirm( 'DoYouWantToLeavePage', 'DoYouWantToLeavePageMsg' ); } onCancel() { this.location.back(); } }
- 55. Generic “Dao” Service @Injectable() export class CRUDService<T> { constructor(public http: HttpClient, private API_URL) {} load() { return this.http.get<T[]>(this.API_URL); } create(record: T) { return this.http.post<Task>(this.API_URL, record); } update(record: T) { return this.http.put<Task>(`${this.API_URL}/${record.id}`, record); } remove(id: string) { return this.http.delete<T>(`${this.API_URL}/${id}`); } }
- 56. Generic “Dao” Service @Injectable() export class TasksService extends CRUDService<Task> { constructor(public http: HttpClient) { super(http, API.TASKS_URL) } }
- 61. Multiple Angular Environments Custom Environment Produc9on Development "scripts": { "ng": "ng", "dev": "ng serve !--configuration=dev", "start": "ng serve !--proxy-config proxy.conf.js", "build": "ng build !--prod !--aot !--build-optimizer -op !../webapps/app" },
- 62. Multiple Angular Environments !// environment.dev.ts export const environment = { production: false, baseUrl: '/' }; !// environment.ts export const environment = { production: false, baseUrl: '/api/' }; !// environment.prod.ts export const environment = { production: true, baseUrl: '!../' };
- 63. angular.json "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], !!... }, "dev": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" } ] } !!... }
- 64. Back-end endpoints import { environment } from '@env/environment'; export class API { static readonly BASE_URL = environment.baseUrl; static readonly CLIENTS = `${API.BASE_URL}clients`; } !// this.http.get(API.CLIENTS)
- 65. Integration with Back-end: No CORs proxy.conf.json { "/api": { "target": "http:!//localhost:8080", "secure": false }, "logLevel": "debug" } const PROXY_CONFIG = [ { context: ['/api'], target: 'http:!//localhost:8080', secure: false, logLevel: 'debug', pathRewrite: { '^/api': '' } } ]; module.exports = PROXY_CONFIG; proxy.conf.js
- 66. Integration with Back-end: No CORs "scripts": { "ng": "ng", "start": "ng serve !--proxy-config proxy.conf.json", },
- 67. IE Support
- 68. Deploying to the cloud!
- 69. Different Approaches • MulCple Maven Projects (client, server and main pom.xml) (single jar/war) • Single Maven (server pom.xml with frontend plugin) (single jar/war) • MulC-stage Docker file (single jar/war) • MulCple docker containers (client and server docker files) (mulCple containers)
- 70. Code repo Angular src: Angular CLI Spring src: start.spring.io
- 71. Single jar/war package Angular prod bundle
- 72. Maven Front-end Plugin !!!<!-- Angular build !!--> <plugin> <groupId>com.github.eirslett!</groupId> <artifactId>frontend-maven-plugin!</artifactId> <version>1.6!</version> <configuration> <nodeVersion>v10.0.0!</nodeVersion> <npmVersion>6.4.1!</npmVersion> <workingDirectory>./!../angular-rest-crud!</workingDirectory> <installDirectory>${user.home}/.node!</installDirectory> !</configuration> <executions> !!!<!-- Steps for Angular prod build !!--> !</executions> !</plugin>
- 73. Maven Front-end Plugin <execution> <id>install node and npm!</id> <goals> <goal>install-node-and-npm!</goal> !</goals> <configuration> <nodeVersion>v10.0.0!</nodeVersion> <npmVersion>6.4.1!</npmVersion> !</configuration> !</execution> <execution> <id>npm install!</id> <goals> <goal>npm!</goal> !</goals> <configuration> <arguments>install !</arguments> !</configuration> !</execution>
- 74. Maven Front-end Plugin <execution> <id>npm build!</id> <goals> <goal>npm!</goal> !</goals> <configuration> <arguments>run build-op!</arguments> !</configuration> !</execution>
- 75. package.json "scripts": { "build-op": "ng build !--prod —output-path !../spring-rest-crud/target/classes/static”, },
- 78. Docker: Java / Spring FROM maven:3.5.4-jdk-10-slim WORKDIR /usr/src/java-code COPY . /usr/src/java-code/ RUN mvn package WORKDIR /usr/src/java-app RUN cp /usr/src/java-code/target!/*.jar ./app.jar EXPOSE 8080 CMD ["java", "-jar", "app.jar"]
- 79. Docker: Angular ##### Angular build FROM node:latest as angular-client WORKDIR /app COPY package.json package.json RUN npm install COPY . . RUN npm run build !--prod ##### Nginx FROM nginx:alpine VOLUME /var/cache/nginx COPY !--from=angular-client /app/dist/angular-rest-crud /usr/share/nginx/html COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf
- 80. Docker: Angular + NGINX + proxy # proxy location /api { proxy_pass http:!//129.150.111.200:8083; proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504; proxy_buffering off; proxy_set_header Accept-Encoding ""; }
- 82. Oracle Application Container Cloud Service https://docs.oracle.com/en/cloud/paas/app-container-cloud/index.html
- 83. Oracle Application Container Cloud Service
- 84. Oracle Container Cloud Service https://docs.oracle.com/en/cloud/iaas/container-cloud/index.html
- 87. Experts in Modern Development • Cloud • Microservices and Containers • Java, JavaScript/Node.js, PHP, Python • DevOps developer.oracle.com/ambassador @groundbreakers • Continuous Delivery • Open Source Technologies • SQL/NoSQL Databases • Machine Learning, AI, Chatbots