怎么在angularjs中使用http与后台进行交互
本篇文章给大家分享的是有关怎么在angularjs中使用http与后台进行交互,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
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, /** 导入模块 */ HttpClientModule, IonicModule.forRoot(MyApp,{ tabsHideOnSubPages:'true', backButtonText:'' }) ], bootstrap:[IonicApp], entryComponents:[ MyApp, LoginPage, ], providers:[ StatusBar, SplashScreen, {provide:ErrorHandler,useClass:IonicErrorHandler}, RequestServiceProvider, ] }) exportclassAppModule{}
按照自己的项目导入HttpClientModule模块即可,我导入其他组件,不用考虑。
3.创建服务
ionicgproviderRequestService
执行完成后则会出现如下文件
4.封装服务
/** 导入http相关 */ import{HttpClient,HttpHeaders}from'@angular/common/http'; import{Injectable}from'@angular/core'; import{Observable}from"rxjs"; /* GeneratedclassfortheRequestServiceProviderprovider. Seehttps://angular.io/guide/dependency-injectionformoreinfoonproviders andAngularDI. */ @Injectable() exportclassRequestServiceProvider{ /** 讲基础路径提取说出来,配置ip和端口时只需要在这修改 */ //basePath:string='http://10.4.0.205:8081' reserveBasePath:string='http://10.6.254.110:8081' basePath=this.reserveBasePath; /** 封装固定的消息头相关 */ privateheaders=newHttpHeaders({'Content-Type':'application/json'}) //privateheaders=newHttpHeaders({'Access-Control-Allow-Origin':'*'}); /** 初始化http变量 */ constructor(publichttp:HttpClient){ console.log('HelloRequestServiceProviderProvider'); } /** 给外界提供了四个基础的方法只需要传入uri和data即可 */ get(req:any):Observable<any>{ returnthis.http.get(this.basePath+req.uri,{headers:this.headers}); } post(req:any):Observable<any>{ returnthis.http.post(this.basePath+req.uri,req.data,{headers:this.headers}); } put(req:any):Observable<any>{ returnthis.http.put(this.basePath+req.uri,req.data,{headers:this.headers}); } delete(req:any):Observable<any>{ returnthis.http.delete(this.basePath+req.uri,{headers:this.headers}); } }
5.导入声明封装服务
找到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, /** 导入模块 */ HttpClientModule, IonicModule.forRoot(MyApp,{ tabsHideOnSubPages:'true', backButtonText:'' }) ], bootstrap:[IonicApp], entryComponents:[ MyApp, LoginPage, ], providers:[ StatusBar, SplashScreen, {provide:ErrorHandler,useClass:IonicErrorHandler}, /** 声明服务 */ RequestServiceProvider, ] }) exportclassAppModule{}
6.使用服务
找到自己的页面所对应的ts文件如下面代码一样
import{Component}from'@angular/core'; import{IonicPage,NavController,NavParams}from'ionic-angular'; /** 导入声明 */ import{RequestServiceProvider}from"../../providers/request-service/request-service"; /** *GeneratedclassfortheLoginPagepage. * *Seehttps://ionicframework.com/docs/components/#navigationformoreinfoon *Ionicpagesandnavigation. */ @IonicPage() @Component({ selector:'page-login', templateUrl:'login.html', }) exportclassLoginPage{ title:string='登录' promptMessage:string='' user={ username:'', password:'' } req={ login:{ uri:'/user/login' } } constructor(publicnavCtrl:NavController,publicnavParams:NavParams, /** 初始化服务对象 */ privaterequestService:RequestServiceProvider){ } ionViewDidLoad(){ console.log('ionViewDidLoadLoginPage'); } login(){ /** 调用post方法,subscribe()方法可以出发请求,调用一次发送一次,调用多次发多次 */ 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与后台进行交互,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。
推荐阅读
-
Angular生命周期执行的顺序是什么
-
Angular怎么利用service实现自定义服务
-
Angular依赖注入体系中的基本概念是什么
-
Angular8基础知识点有哪些
Angular8基础知识点有哪些这篇文章给大家分享的是有关Angu...
-
angular双向绑定的示例分析
-
angular父子组件通信的示例分析
-
angular中怎么使用echarts地图
angular中怎么使用echarts地图这篇文章将为大家详细讲解...
-
Angular如何实现搜索、过滤、批量删除、添加、表单验证功能
这篇文章将为大家详细讲解有关Angular如何实现搜索、过滤、批量删除、添加、表单验证功能,小编觉得挺实用的,因此分享给大家做个参...
-
Angular如何实现搜索框
这篇文章主要介绍Angular如何实现搜索框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.要求:利用...
-
angular7中引用ng zorro antd的方法