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

2. Services Classes that implement business logic of an application
Angular can make service classes available to other parts of the application via dependency injection

3. How Dependency Injection Works
Declare something to be injectable
Determine where to inject
Have some mechanism to perform injection
Injectables
Inject
Recipients

4. Dependency Injection in Spring
Any bean can be injected into other beans
Annotations,
Bean configuration file, e.g. <bean>
Any bean can receive injection
Auto wiring (default by type)
Bean configuration file, e.g. property and ref
Injection means
Field, Setter, and Constructor

5. Dependency Injection in Angular
Injectables (usually service classes and data) are either declared in providers or decorated
Injection via constructor
Auto wiring by token

6. Declare Injectables in @NgModule
Type Token
providers: [
{ provide: UserService, useClass: UserService },
{ provide: 'SECRET', useValue: 'abcd' } ]
String Token
providers: [
UserService, { provide: 'SECRET', useValue: 'abcd' } ]

7. Declare Injectables Using @Injectable
Inject using the
application's root
injector
@Injectable({
providedIn: 'root' })
export class UserService { … }
Angular's dependency injection system is hierarchical – injection can be done at the root, module, and component level

8. Constructor Injection
Class HomeComponent {
constructor(
private UserService: userService,
@Inject('SECRET') private secret: string
) {} }

9. Example: GuestBook … App Component entries[] @Input @Output GuestBook
AddEntry
Component

10. … Example: GuestBook App Component GuestBook Component AddEntry
REST
API
Data Service

11. GuestBook Backend
A simple Node.js server application generated using Express Generator
Use a global array to hold GuestBook entries
Two endpoints at /api/guestbook
GET: get all entries
POST: add an entry

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

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

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

15. Create DataService Use Angular CLI to generate a service
ng generate service <name>
Naming conventions
Inject it to component classes

16. Use HttpClient to Access REST API
Import HttpClientModule
Provides an HttpClient service that can be used to make HTTP requests
Inject HttpClient services into the service class that will use it to make REST API calls

17. Get GuestBook Entries from Server
In DataService: ??
getEntries(): Observable<GuestBookEntry[]> {
return this.http.get<GuestBookEntry[]>('/api/guestbook'); }
Angular automatically
converts the response
body into an array of
GuestBookEntry
Send a GET request
In GuestBookComponent:
ngOnInit() {
this.dataService.getEntries().subscribe(entries => {
this.entries = entries;
}); } ??

18. Observable and Subscription
An Observable represents a value or a set of values that change over time
A Subscription allows a subscriber to be notified whenever the value(s) of an observable changes

19. Asynchronous Programming Paradigms
Callback Function for event handling
Promise for something that eventually produces a single result
Observable for continuously changing data / data stream

20. Implement AddEntry
The server API returns the newly added entry, but how do we notify GuestBookComponent to update its display?

21. Implementation Strategy
Keep a local entries array in DataService and make it observable
Add the newly added entry to the local entries array after the POST call
GuestBookComponent subscribes to the local entries array to automatically get the new data when the array changes

22. A Bit More RxJS Observer Observer Observable Subject … … Observer
… …
Observer
A Subject is a special type of Observable that allows values to be multicasted to many Observers.

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

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

25. Readings
Angular HttpClient Guide
RxJS Overview