ionic3+Angular4实现接口请求及本地json文件读取示例


Posted in Javascript onOctober 11, 2017

一 准备工作

首先,ionic3+Angular4的开发环境你得有,这里就不赘述。环境准备好,创建一个空白项目,模板自选。

二 实现过程

1 新建json文件和service

service记得在app.module.ts中引用

ionic3+Angular4实现接口请求及本地json文件读取示例

json和service

2 json文件格式

格式类似这样,根据实际需求决定。

[
 {
  "id":"1",
  "name":"xiehan",
  "age":"24",
  "message":"测试json文件读取"
 },
 {
  "id":"2",
  "name":"xiehan",
  "age":"24",
  "message":"测试json文件读取"
 },
 {
  "id":"3",
  "name":"xiehan",
  "age":"24",
  "message":"测试json文件读取"
 },
 {
  "id":"4",
  "name":"xiehan",
  "age":"24",
  "message":"测试json文件读取"
 }
]

3 service

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Http, Response} from '@angular/http';
import "rxjs/add/operator/map";


@Injectable()
export class DemoService {

 constructor(private httpService: Http){
 }
 // 网络接口请求
 getHomeInfo(): Observable<Response> {
  return this.httpService.request('http://jsonplaceholder.typicode.com/users')
 }

 // 本地json文件请求
 getRequestContact(){
  return this.httpService.get("assets/json/message.json")
 }
}

4 数据显示

1 网络接口请求

//home.ts
import {ChangeDetectorRef, Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import {DemoService} from "../../services/demo.service";

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})
export class HomePage {
 // 接收数据用
 listData: Object;
 // 依赖注入
 constructor(public navCtrl: NavController,
       private ref: ChangeDetectorRef,
       private demoService: DemoService,) {
 }

 ionViewDidLoad() {
  // 网络请求
  this.getHomeInfo();
 }

 getHomeInfo(){
  this.demoService.getHomeInfo()
   .subscribe(res => {
    this.listData = res.json();
    // 数据格式请看log
    console.log("listData------->",this.listData);
    this.ref.detectChanges();
   }, error => {
    console.log(error);
   });
 }
}

 
//home.html
<ion-header>
 <ion-navbar>
  <ion-title>首页</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-list *ngFor="let item of listData">
  <ion-item>
  <!--?是Angular特定语法,相当于判断数据是否存在,有则显示无则不显示-->
   {{item?.name}}
  </ion-item>
 </ion-list>
</ion-content>

效果图

ionic3+Angular4实现接口请求及本地json文件读取示例

2 本地json文件请求

service中已经写了getRequestContact()方法对本地json文件读取。

//contact.ts
import {ChangeDetectorRef, Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import {DemoService} from "../../services/demo.service";

@Component({
 selector: 'page-contact',
 templateUrl: 'contact.html'
})
export class ContactPage {

 contactInfo=[];

 constructor(public navCtrl: NavController,
       private demoService: DemoService,
       private ref: ChangeDetectorRef,) {

 }

 ionViewDidLoad() {
  // 网络请求
  this.getRequestContact();
 }

 getRequestContact(){
  this.demoService.getRequestContact()
   .subscribe(res => {
    this.contactInfo = res.json();
    console.log("contactInfo------->",this.contactInfo);
    this.ref.detectChanges();
   }, error => {
    console.log(error);
   });
 }
}

// contact.html
<ion-header>
 <ion-navbar>
  <ion-title>
   联系人
  </ion-title>
 </ion-navbar>
</ion-header>

<ion-content>
 <ion-list>
  <ion-item *ngFor="let item of contactInfo">
   <div style="display: flex;flex-direction: column;">
    <span>姓名:{{item?.name}}</span>
    <span>年龄:{{item?.age}}</span>
    <span>信息:{{item?.message}}</span>
   </div>
  </ion-item>
 </ion-list>
</ion-content>

效果图

ionic3+Angular4实现接口请求及本地json文件读取示例

三 总结

1.所有创建的page要在app.module.ts中引用;
2.service要在app.module.ts中引用;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件制作教程 txtHover
Aug 17 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
javascript修改图片src的方法
Jan 27 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
浅谈Vue.js
Mar 02 Javascript
老生常谈js中的MVC
Jul 25 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
js实现单张图片平移切换效果
Oct 11 #Javascript
jQuery自动或手动图片切换效果
Oct 11 #jQuery
简单实现vue验证码60秒倒计时功能
Oct 11 #Javascript
mui框架移动开发初体验详解
Oct 11 #Javascript
Scala解析Json字符串的实例详解
Oct 11 #Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
详解vue mint-ui源码解析之loadmore组件
Oct 11 #Javascript
You might like
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
vue遍历对象中的数组取值示例
2019/11/07 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python实现栈的方法
2015/05/26 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
药剂专业个人求职信范文
2014/04/29 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
把77A收信机改造成收音机
2022/04/05 无线电