w9 - angular 2 Flashcards
Angular services?
A service is typically a class with a narrow, well-defined purpose. A Service is a broad category encompassing any value, function, or feature that an app needs
. Angular distinguishes components from services to increase modularity and reusability.
By separating a component’s view-related functionality from other kinds of processing, you can make your component classes lean and efficient
. A component can delegate certain tasks to services, such as fetching data from the server, validating user input, or logging directly to the console.
Dependency injection?
Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested. DI is wired into the Angular framework and used everywhere to provide new components with the services or other things they need.
Components consume services; that is, you can inject a service into a component, giving the component access to that service class. When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types. For example, the constructor of ActorComponent needs HTTPService. When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn’t yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular.
BrowserModule
exports required infrastructure for all Angular apps and
FormsModules
exports the required providers and directives for template-driven forms (i.e. it is required by the two-way binding directive ngModel), opens database.service.ts, and imports both HttpClient and HttpHeaders from angular http package:
http client
In the service’s constructor, add a reference to the httpClient:
constructor(private http: HttpClient) {}
By doing so, Angular will inject the httpClient into our service and make it available with reference http. Now, any method inside the service can make http requests by calling this.http (for instance this.http.get for a GET request).
Database service
Database Service
If you decide to serve the angular application by the backend application, then you must have relative addresses
getActors() {
return this.http.get(“/actors”);
}
if you decide to have a different machine (or different app) to serve the frontend pages, then you must provide a complete URL to the target endpoints as shown below:
const URL_BACKEND = “http://localhost:8080”;// or http://36.125.10.3:8081
deleteActor(id) {
let url = URL_BACKEND + “/actors/” + id;
return this.http.delete(url, httpOptions);
}
Observables?
To handle asynchronous operations,
Observables are declarative” that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it.
The subscribed consumer then receives notifications until the function completes or until they unsubscribe. To execute the observable and begin receiving notifications, you call its subscribe() method, passing an observer (i.e. callback function).
all the http functions (get(),put(),post(), and delete()) return an observable output and our component has to call their subsucribe() methods to get them executed.
How does function ngOnInit() will get invoked?
Angular calls it shortly after creating the component
observables + e/g
It is a technique for handling asynchronous programming events and It allows a callback function to get executed once the data becomes available.”
xample->
onSaveActor(){
let obj = {name.this.fullName,bYear:this.bYear};
this.dbService.creatorActor(obj).subscribe(result => {
this.onGetActors();
));
}
getFleetSize() {
return this.http.get(‘/fleet/size’);
}
The component has a variable called fleetSize and it is declared as follows:
fleetSize: number;
getCurrentFleetSize(){
this.fleetSize.getFleetSize().subscribe((fleetS:Number)=>(
this.fleetSize=fleetS;
));
}
Selector?
A selector is used to identify each component uniquely into the component tree, and it also defines how the current component is represented in the HTML DOM
[]
