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

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

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

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

5. … 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"

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

7. Use HttpClient to Access REST API
Import HttpClientModule
Inject HttpClient to code that needs to make API calls
Use HttpClient API, e.g. get

8. 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

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

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

11. 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

12. 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.

13. 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

14. 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

15. 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

16. 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

17. 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

18. Readings
RxJS Overview