本篇文章給大家分享的是有關(guān)怎么在angularjs中使用http與后臺(tái)進(jìn)行交互，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。
分宜網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),分宜網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為分宜上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的分宜做網(wǎng)站的公司定做！
HttpModule引入
找到app.module.ts文件
重慶分公司
重慶分公司
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { LoginPage } from "../pages/login/login";
/**
引入HttpClientModule模塊
*/
import { HttpClientModule } from "@angular/common/http";
import { RequestServiceProvider } from "../providers/request-service/request-service";
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
LoginPage,
],
imports: [
BrowserModule,
/**
導(dǎo)入模塊
*/
HttpClientModule,
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages:'true',
backButtonText:''
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
RequestServiceProvider,
]
})
export class AppModule {}按照自己的項(xiàng)目導(dǎo)入HttpClientModule模塊即可，我導(dǎo)入其他組件，不用考慮。
3.創(chuàng)建服務(wù)
ionic g provider RequestService
執(zhí)行完成后則會(huì)出現(xiàn)如下文件
4.封裝服務(wù)
/**
導(dǎo)入http相關(guān)
*/
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {Observable} from "rxjs";
/*
Generated class for the RequestServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class RequestServiceProvider {
/**
講基礎(chǔ)路徑提取說(shuō)出來(lái)，配置ip和端口時(shí)只需要在這修改
*/
//basePath:string='http://10.4.0.205:8081'
reserveBasePath:string='http://10.6.254.110:8081'
basePath=this.reserveBasePath;
/**
封裝固定的消息頭相關(guān)
*/
private headers = new HttpHeaders({'Content-Type': 'application/json'})
// private headers = new HttpHeaders({'Access-Control-Allow-Origin':'*'});
/**
初始化http變量
*/
constructor(public http: HttpClient) {
console.log('Hello RequestServiceProvider Provider');
}
/**
給外界提供了四個(gè)基礎(chǔ)的方法只需要傳入uri和data即可
*/
get(req:any):Observable {
return this.http.get(this.basePath+req.uri,{headers:this.headers});
}
post(req:any):Observable{
return this.http.post(this.basePath+req.uri,req.data,{headers:this.headers});
}
put(req:any):Observable{
return this.http.put(this.basePath+req.uri,req.data,{headers:this.headers});
}
delete(req:any):Observable{
return this.http.delete(this.basePath+req.uri,{headers:this.headers});
}
} 5.導(dǎo)入聲明封裝服務(wù)
找到app.module.ts文件和第一部類似
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { LoginPage } from "../pages/login/login";
/**
引入HttpClientModule模塊
*/
import { HttpClientModule } from "@angular/common/http";
/**
導(dǎo)入自定的服務(wù)
*/
import { RequestServiceProvider } from "../providers/request-service/request-service";
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
LoginPage,
],
imports: [
BrowserModule,
/**
導(dǎo)入模塊
*/
HttpClientModule,
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages:'true',
backButtonText:''
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
/**
聲明服務(wù)
*/
RequestServiceProvider,
]
})
export class AppModule {}6.使用服務(wù)
找到自己的頁(yè)面所對(duì)應(yīng)的ts文件如下面代碼一樣
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
導(dǎo)入聲明
*/
import {RequestServiceProvider} from "../../providers/request-service/request-service";
/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
title:string = '登錄'
promptMessage:string = ''
user={
username:'',
password:''
}
req={
login:{
uri:'/user/login'
}
}
constructor(public navCtrl: NavController, public navParams: NavParams,
/**
初始化服務(wù)對(duì)象
*/
private requestService:RequestServiceProvider) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
login(){
/**
調(diào)用post方法，subscribe()方法可以出發(fā)請(qǐng)求，調(diào)用一次發(fā)送一次，調(diào)用多次發(fā)多次
*/
this.requestService.post({uri:this.req.login.uri,data:user}).subscribe((res:any)=>{
console.log(res);
if (res.code == 0){
this.promptMessage = res.message;
} else {
this.promptMessage = res.message;
}
},
error1 => {
alert(JSON.stringify(error1))
});
}
}以上就是怎么在angularjs中使用http與后臺(tái)進(jìn)行交互，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
