Ezalgo is fairly simple, and using new or using injector to get an instance looks a little different. What if our Ezapp component is going to use the HTTP service?
At first glance, the HTTP service is clearly a really useful service-because it looks quite complex-HTTP relies on Xhrbackend and baserequestoptions, and Xhrbackend relies on BROWSERXHR.
There are two ways we can get an instance of HTTP in order to get the functionality of network access through it:
1. Instantiating with new
If we create an HTTP instance using the traditional new method, it should look like this:
1 var New xhrbackend (BROWSERXHR); 2 var New baserequestoptions (); 3 var New Http (xhrbe,options);
It's nothing new, it's a little cumbersome.
2. Using the injector/injector
If you use an injector, we need to declare these cascading dependencies to the ANGULAR2 framework:
1 @Component ({2 appinjector: [3 bind (BROWSERXHR). Tovalue ( BROWSERXHR),4 xhrbackend,5 baserequestoptions, 6 Http7 ]8 })Bind (BROWSERXHR) tovalue (BROWSERXHR) means that if you need to inject a variable of the BROWSERXHR type, inject the class itself rather than its instance.
This is the principle, but ANGULAR2 has provided a well-defined variable httpinjectables, which we can refer to directly.
Observable
Observable is an asynchronous programming pattern, unlike promise, where observable, among other things, encapsulates asynchronous code from the point of view of data rather than behavior.
The Get () method of the HTTP service returns a observable object that can treat the observable object as a data stream that can be subscribed to, and you will be notified whenever there is new data in the data stream after you subscribe through the subscribe () method.
For example:
1<!doctype html>234<meta charset= "Utf-8" >5<title>appInjector</title>6<script type= "Text/javascript" src= "Lib/[email protected]" ></script>7<script type= "Text/javascript" src= "Lib/angular2.dev.js" ></script>8<script type= "Text/javascript" src= "Lib/system.config.js" ></script>9Ten<body> One<ez-app></ez-app> A<script type= "Module" > -Import {inject,component,view,bootstrap,ngfor} from "Angular2/angular2"; - //introducing HTTP-related predefined types the Import {http,httpinjectables} from "Angular2/http"; - - //Ezapp Components - @Component ({ +Selector: "Ez-app", - //injecting an HTTP dependency collection + Appinjector:[httpinjectables] A }) at @View ({ - Directives:[ngfor], - Template: ' - <div *ng-for= "#album of band.albums" ></div> - `, - styles:[' in img{height:200px;width:200px;} -div{float: left;margin:10px;} to `] + }) - class ezapp{ the //injecting an HTTP instance object * Constructor (@Inject (HTTP) http) { $ This. Band = {};Panax NotoginsengHttp.get ("Api/music.json")//GET Request -. Map (Rsp=>rsp.json ())//Convert the data set in JSON format accordingly the. Subscribe (data=> This. band=data[0]);//Set the band variable as the first item in the dataset + } A } the Bootstrap (Ezapp); +</script> -</body> $ANGULAR2 Component Development-Invoke service (iii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
