CS5220 Advanced Topics in Web Programming Angular – Services Chengyu Sun California State University, Los Angeles

Angular Services Implement business logic of an application Made available to other parts of the application via dependency injection Decorated with @Injectable Declared in providers of @NgModule Injected into constructors

Example: GuestBook App Component GuestBook Component Data Service REST API <router-outlet> AddEntry Component

Changes to AddEntry Form … Name: <input type="text" #name> Message: <input type="text" #message> <button (click)="addEntry(name,message)"> Add </button>

… Changes to AddEntry Form Name: <input type="text" name="name" [(ngModel)]="entry.name"> Message: <input type="text" name="message" [(ngModel)]="entry.message"> <button (click)="addEntry()">Add</button> [(ngModel)] creates a 2-way binding between a form field and a property in the component class "Banana in a box"

Create A Remote Data Service Use Angular CLI to generate a service Naming conventions Add it to AppModule Inject it to component classes

Use HttpClient to Access REST API Import HttpClientModule from @angular/common/http Inject HttpClient to code that needs to make API calls Use HttpClient API, e.g. get

Set Up Proxy During Development … NG Server at Port 4200 Angular App Browser REST API Call API Server at Port 3000 (or 8080) For security reasons, browsers enforce same-origin policy on XMLHttpRequest Localhost

… Set Up Proxy During Development … NG Server at Port 4200 Angular App REST API Call Browser API Server at Port 3000 (or 8080) Localhost

… Set Up Proxy During Development Create proxy configuration file proxy.conf.json, e.g. { "/api": { "target": "http://localhost:3000", "secure": false } Change start script in package.json ng serve --proxy-config proxy.conf.json

Create A Mock Data Service Both remote and mock data service implement the same DataService interface Mock data service stores data locally, but still needs to return Observables

A Simplified View of Some RxJS Concepts Observer Observer Observable Subject … … Observer A Subject is a special type of Observable that allows values to be multicasted to many Observers.

Some Subject Methods next(value) emits the next value error(err) emits an error complete() indicates that the data stream has ended and all subscribers are unsubscribed

BehaviorSubject What if some subscriber comes in late (i.e. after some values are already emitted)? BehaviorSubject is a type of Subject that keeps the latest value vs ReplaySubject

Deploy Angular App Build Angular App: ng build --prod The /dist folder will contain the files to be deployed Because Angular is just JavaScript, HTML, and CSS, an Angular app can be served as static resources as part of a web application or service

More on Express Backend Use express.static() middleware to serve static files Handle nonexistent endpoints/pages Return 404 for REST API calls Return the angular app (i.e. index.html) for nonexistent pages

Port Mappings on VM VM VM … Client VM VM VM … Physical Server 4080 80 3000 VM Client 4088 8080 … VM 4180 80 3000 VM VM 4188 8080 … Physical Server

Readings RxJS Overview