Detailed introduction to Angular2 http service. 2018 latest angularjs2 service introduction details-JS Tutorial-php.cn

Detailed introduction to Angular2 http service. 2018 latest angularjs2 service introduction details

寻∝梦

Release： 2018-09-07 14:28:37

Original

1012 people have browsed it

The http service of

angular2 is a mechanism used to obtain or update data from the background program. Usually we need to make the module that exchanges data with the background into an angular service and use http to obtain and update the background data. , angular uses http's get or put to make background calls in the ajax method, and cross-domain issues need to be handled separately. Let's look at an example that demonstrates getting data from the backend web api and loading the page.

1. Since we need to use http service, we must introduce <script src="node_modules/angular2/bundles/http.dev.js">< in our web page /script>, this step is very critical. This is the reason why I couldn’t find the http service before, and I wasted a lot of time here.
2. At the angular entrance, you need to introduce HTTP_PROVIDERS and inject it. At the same time, because you need to use map, subscribe, etc., you need to use the rxjs library, then Need to introduce import 'rxjs/Rx' in the entry program in advance, bloody lessons

import {bootstrap} from &#39;angular2/platform/browser&#39;;
import {HTTP_PROVIDERS} from &#39;angular2/http&#39;;
import {myFrame} from "./frame/component/myFrame.component";
import &#39;rxjs/Rx&#39;;
bootstrap(myFrame, [ HTTP_PROVIDERS]);

Copy after login

3. Create service

import {Injectable} from &#39;angular2/core&#39;;
import {Http } from &#39;angular2/http&#39;;
@Injectable()
export class channelService {
private _carsUrl: string = "http://localhost:6611/api/Chanel";
constructor(private _http: Http) {
}
getChannelList() {
return this._http.get(this._carsUrl).map(responce => responce.json())
}
在这个服务中使用了`http`中的`get`来获取数据，这里get的`url（web api）`是与我目前的`anuglar`应用在一个域内。作为服务我们需要申明该服务是可注入的`@Injectable()`

Copy after login

4. Service call

import {Component} from &#39;angular2/core&#39;;
import {appService} from &#39;./../service/appsetting.service&#39;
import {channelService} from &#39;./../service/channel.service&#39;
import {Channel} from &#39;./../model/channel&#39;
@Component({
selector: &#39;topNav&#39;,
templateUrl: &#39;../app/frame/template/topNav.html&#39;,
providers: [appService, channelService]
})
export class topNav {
 webTitle: string;
constructor(private _appService: appService,private _channelService:channelService) {  
this.getWebTitle();
}
getWebTitle() {
this.webTitle = this._appService.AppSetting.webTitle;
}
getChannelList() {
this._channelService.getChannelList().subscribe(res => { this.items=res});
}
} 
这里就和普通服务调用没什么区别了，需要先import再在providers中申明，然后在构造函数中注入就行了。

Copy after login

One thing to note in this example is that our front-end model and back-end model may be inconsistent, so you need to convert the data after obtaining the data. If the type fields are consistent, you can use it directly. Since it is in json format, the system will automatically Convert the backend model to the model used by our front end

Web api:

public class ChanelController : ApiController
 {
 // GET api/<controller>
public IEnumerable<Chanel> Get()
{
 return new Chanel[] { new Chanel{ ID="1", ChanelName="组织机构"},new Chanel{ ID="2",ChanelName="通知公告"} };
}
}
注：web api 可以使用Swashbuckle 进行测试，安装 PM>Install-Package Swashbuckle，使用时只需在路径后加入swagger，如http://localhost:6611/swagger/ui/index

Copy after login

This article ends here. (If you want to see more, go to the PHP Chinese website angularjs Learning Manual to learn) If you have any questions, you can ask below.

The above is the detailed content of Detailed introduction to Angular2 http service. 2018 latest angularjs2 service introduction details. For more information, please follow other related articles on the PHP Chinese website!