在上一篇文章使用 Angular 2 開發(fā)單頁(yè)應(yīng)用程序之二 中，我們已經(jīng)完成了自定義組件的開發(fā)疮茄。
dw-ng2-app 中包含了三個(gè)業(yè)務(wù)組件：
- 天氣
- 電影
- 貨幣
接下來我們將創(chuàng)建業(yè)務(wù)組件的服務(wù)坊秸。
創(chuàng)建服務(wù)
按 Ctrl-C 停止 Angular 進(jìn)程泡嘴。在命令提示符下，執(zhí)行以下命令創(chuàng)建服務(wù)辑畦。
ng g service Shared --spec false
在根模塊文件夾中創(chuàng)建了Shard服務(wù)羞反，服務(wù)位于 shared.service.ts 文件中布朦。下面修改文件內(nèi)容如下：
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from "@angular/http";
import 'rxjs/Rx';
import { Observable } from "rxjs";
@Injectable()
export class SharedService {
weatherURL1 = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22";
weatherURL2 = "%2C%20";
weatherURL3 = "%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
findMovieURL1 = "http://www.omdbapi.com/?t=";
findMovieURL2 = "&y=&plot=short&r=json";
currencyURL = "http://api.fixer.io/latest?symbols=";
totReqsMade: number = 0;
constructor(private _http: Http) { }
findWeather(city, state) {
this.totReqsMade = this.totReqsMade + 1;
return this._http.get(this.weatherURL1 + city + this.weatherURL2+ state + this.weatherURL3)
.map(response => {
{ return response.json() };
})
.catch(error => Observable.throw(error.json()));
}
findMovie(movie) {
this.totReqsMade = this.totReqsMade + 1;
return this._http.get(this.findMovieURL1 + movie + this.findMovieURL2)
.map(response => {
{ return response.json() };
})
.catch(error => Observable.throw(error.json().error));
}
getCurrencyExchRate(currency) {
this.totReqsMade = this.totReqsMade + 1;
return this._http.get(this.currencyURL + currency)
.map(response => {
{ return response.json() };
})
.catch(error => Observable.throw(error.json()));
}
}
- import ... 語(yǔ)句是任何服務(wù)正常運(yùn)行所必不可少的。
- @Injectable() 語(yǔ)句特別重要苟弛；它表明此 service 可注入到其他組件中 — 該技術(shù)通常被稱為依賴注入喝滞。
- 服務(wù)中定義了 3 個(gè)方法，它們的名稱表明了自己的功能膏秫。在方法執(zhí)行時(shí)，Angular 將讓瀏覽器訪問網(wǎng)絡(luò)來使用Yahoo提供的服務(wù) API做盅。
我們現(xiàn)在把組件鏈接到所創(chuàng)建的服務(wù)上缤削。
修改 movie.component.ts 如下：
import { Component, OnInit } from '@angular/core';
import { SharedService } from "./../shared.service";
@Component({
selector: 'app-movie',
templateUrl: './movie.component.html',
styles: []
})
export class MovieComponent implements OnInit {
id_movie: string = "";
mv_Title: string = "";
mv_Rated: string = "";
mv_Released: string = "";
mv_Director: string = "";
mv_Actors: string = "";
mv_Plot: string = "";
constructor(private _sharedService: SharedService) {
}
ngOnInit() {
}
callMovieService() {
this._sharedService.findMovie(this.id_movie)
.subscribe(
lstresult => {
this.mv_Title = lstresult["Title"];
this.mv_Rated = lstresult["Rated"];
this.mv_Released = lstresult["Released"];
this.mv_Director = lstresult["Director"];
this.mv_Actors = lstresult["Actors"];
this.mv_Plot = lstresult["Plot"];
},
error => {
console.log("Error. The findMovie result JSON value is as follows:");
console.log(error);
}
);
}
}
修改 weather.component.ts 如下：
import { Component, OnInit } from '@angular/core';
import { SharedService } from "./../shared.service";
@Component({
selector: 'app-weather',
templateUrl: './weather.component.html',
styles: []
})
export class WeatherComponent implements OnInit {
id_city: string = "";
id_state: string = "";
op_city: string = "";
op_region: string = "";
op_country: string = "";
op_date: string = "";
op_text: string = "";
op_temp: string = "";
constructor(private _sharedService: SharedService) {
}
ngOnInit() {
}
callWeatherService() {
this._sharedService.findWeather(this.id_city, this.id_state)
.subscribe(
lstresult => {
this.op_city = lstresult["query"]["results"]["channel"]["location"]["city"];
this.op_region = lstresult["query"]["results"]["channel"]["location"]["region"];
this.op_country = lstresult["query"]["results"]["channel"]["location"]["country"];
this.op_date = lstresult["query"]["results"]["channel"]["item"]["condition"]["date"];
this.op_text = lstresult["query"]["results"]["channel"]["item"]["condition"]["text"];
this.op_temp = lstresult["query"]["results"]["channel"]["item"]["condition"]["temp"];
},
error => {
console.log("Error. The findWeather result JSON value is as follows:");
console.log(error);
}
);
}
}
修改 currency.component.ts 如下：
import { Component, OnInit } from '@angular/core';
import { SharedService } from "./../shared.service";
@Component({
selector: 'app-currency',
templateUrl: './currency.component.html',
styles: []
})
export class CurrencyComponent implements OnInit {
id_currency: string = "";
my_result: any;
constructor(private _sharedService: SharedService) {
}
ngOnInit() {
}
callCurrencyService() {
this._sharedService.getCurrencyExchRate(this.id_currency.toUpperCase())
.subscribe(
lstresult => {
this.my_result = JSON.stringify(lstresult);
},
error => {
console.log("Error. The callCurrencyService result JSON value is as follows:");
console.log(error);
}
);
}
}
更新 app.module.ts 以引入 Shared 服務(wù)，如下所示添加以下兩行吹榴，
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu.component';
import { WeatherComponent } from './weather/weather.component';
import { CurrencyComponent } from './currency/currency.component';
import { MovieComponent } from './movie/movie.component';
import { CONST_ROUTING } from './app.routing';
import { SharedService } from "./shared.service"; // 新添加
@NgModule({
declarations: [
AppComponent,
MenuComponent,
WeatherComponent,
CurrencyComponent,
MovieComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
CONST_ROUTING
],
providers: [SharedService], // 新添加
bootstrap: [AppComponent]
})
export class AppModule { }
修改組件視圖
現(xiàn)在在HTML視圖中調(diào)用 Shared 服務(wù)的方法亭敢。
修改 movie.component.html 如下，
<h2>Open Movie Database</h2>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<input type="text" required [(ngModel)]="id_movie" (change)="callMovieService()" class="form-control" placeholder="Enter Movie name ...">
<br><br>
<h3>Movie Details</h3>
<br>
<p class="well lead">
<i> Title :</i> {{ this.mv_Title }} <br>
<i> Plot :</i> {{ this.mv_Plot }} <br>
<i> Actors :</i> {{ this.mv_Actors }} <br>
<i> Directed by :</i> {{ this.mv_Director }} <br>
<i> Rated :</i> {{ this.mv_Rated }} <br>
<i> Release Date :</i> {{ this.mv_Released }} <br>
</p>
<p class="text-info">Total # of all the service requests including Weather, Movie, and Currency is :
<span class="badge">{{this._sharedService.totReqsMade}}</span>
</p>
</div>
</div>
修改 weather.component.html 如下图筹，
<h2>Yahoo! Weather </h2>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<input type="text" [(ngModel)]="id_city" class="form-control" placeholder="Enter City name ..."><br>
<input type="text" [(ngModel)]="id_state" class="form-control" placeholder="Enter State. Example CA for California ..."><br>
<button type="button" class="btn btn-primary" (click)="callWeatherService()">Submit</button>
<br><br><br>
<br>
<p class="well lead">
<i>City, State, Country :</i> {{ this.op_city }} {{ this.op_region }} {{ this.op_country }} <br>
<i>Current Condition :</i> {{ this.op_text }} <br>
<i>Current Temperature :</i> {{ this.op_temp }} <br>
</p>
<p class="text-info">Total # of all the service requests including Weather, Movie, and Currency is :
<span class="badge">{{this._sharedService.totReqsMade}}</span>
</p>
</div>
</div>
修改 currency.component.html 如下帅刀，
<h2>Currency Exchange Rates</h2>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<input type="text" [(ngModel)]="id_currency" (change)="callCurrencyService()" class="form-control" placeholder="Enter Currency Symbol. Example: GBP(,AUD,INR)...">
<br><br>
<h3>Rate Details</h3>
<br>
<p class="well lead">Exchange rate relative to Euro in a JSON format: : {{ this.my_result }} </p>
<p class="text-info">Total # of all the service requests including Weather, Movie, and Currency is :
<span class="badge">{{this._sharedService.totReqsMade}}</span>
</p>
</div>
</div>
完成以上的開發(fā)后，dw-ng2-app 就可以在瀏覽器接受用戶的輸入了远剩。
運(yùn)行應(yīng)用程序
啟動(dòng)應(yīng)用程序扣溺，在瀏覽器里面輸入一些信息，查看結(jié)果瓜晤。例如锥余，在 Weather 頁(yè)面，輸入 San Francisco 來查看該城市的天氣情況：
天氣服務(wù)頁(yè)面
工作正常痢掠，但我們還可以讓 UI 更具吸引力驱犹。改進(jìn) GUI 的一種方法是使用 Bootstrap嘲恍，改進(jìn)以后的頁(yè)面如下，
使用Bootstrap改進(jìn)后的天氣服務(wù)頁(yè)面
結(jié)束語(yǔ)
我們學(xué)習(xí)了如何使用 Angular 2 編寫一個(gè) SPA雄驹，并在開發(fā)計(jì)算機(jī)和沙箱服務(wù)器中運(yùn)行它佃牛。
對(duì)于實(shí)際業(yè)務(wù)需求，可能還需要服務(wù)端的功能支持医舆，來提供如身份驗(yàn)證俘侠、業(yè)務(wù)功能等服務(wù)。這些服務(wù)器端技術(shù)彬向，可以使用 Node.js兼贡，也可以使用 Java、PHP等娃胆。
在應(yīng)用程序性能方面的遍希，可以繼續(xù)關(guān)注和研究以下方面：
- 捆綁：該進(jìn)程將您的許多程序組合到一個(gè)文件中。
- 微型化：壓縮捆綁的文件里烦，以便盡可能地減小項(xiàng)目大小凿蒜。
- 提前 (AoT) 編譯：服務(wù)器復(fù)雜在構(gòu)建過程中提前編譯，而不是瀏覽器在運(yùn)行時(shí)期間執(zhí)行即時(shí) (JIT) 編譯胁黑。
文章導(dǎo)航
- 使用 Angular 2 開發(fā)單頁(yè)應(yīng)用程序之一
- 使用 Angular 2 開發(fā)單頁(yè)應(yīng)用程序之二
- 使用 Angular 2 開發(fā)單頁(yè)應(yīng)用程序之三
進(jìn)一步的學(xué)習(xí)
免費(fèi)獲取項(xiàng)目源代碼废封，咨詢老師進(jìn)行答疑指導(dǎo)，請(qǐng)加QQ：1628145742 丧蘸，或報(bào)名我們的實(shí)戰(zhàn)課程：
