Ionic2学习笔记（5）：Provider

作者：Grey

原文地址： http://www.cnblogs.com/greyzeng/p/5547646.html

?

?

Provider是一种为App提供数据源的方式，

举个例子:

我们从：

https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot

获取Json格式的数据，并在程序启动的时候，在控制台打印获取的数据信息：

  1. 进入项目目录：cd MyFirstApp
  2. 创建一个Provider：ionic g provider NewProvider

    项目目录中会增加一个目录，如下：

  3. 修改new-provider.ts的数据源为：https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot

    默认是：path/to/data.json

  4. 在HomePage中注入这个Provider， 找到../app/pages/home/home.ts

  5. 设置启动页:

    ../app/app.ts

  6. 启动：ionic serve -l, 在Chrome浏览器中模拟启动以后，打开Chrome浏览器的开发者工具(按F12)

    在开发者工具的控制台(Console)中，可以看到打印出来了数据源的数据

    ?

?
?

更多：Using Http to Fetch Remote Data from a Server in Ionic 2

------

上一篇：Ionic2学习笔记（4）：*号

?

时间： 2024-08-24 06:32:57

Ionic2学习笔记（5）：Provider的相关文章

Ionic2学习笔记（6）：NAVIGATION

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html ? ? ? ?Ionic2中创建一个页面很方便,在页面之间相互切换也很方便,我们在实现如下需求: 在主页面创建一个按钮,点击按钮,跳转到一个新页面,在跳转过程中,我们可以也可以在页面之间传递数据. 进入项目目录:cd MyFirstApp 创建一个新页面: ionic g page SecondPage 将@import "../pages/second-page/secon

Ionic2学习笔记（10）：扫描二维码

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016 ? ? 说明: 在本文发表的时候(2016-06-11),Ionic2是beta版本,所有还是会有一些改动比较大的地方: 点击查看 , 比如beta8版本(2016-06-06),相较于前面的版本就有一个特别大的改动的地方: @App and @Page should be replaced with @Component 基于这种情况,大家还是静静

Ionic2学习笔记（8）：Local Storage& SQLite

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html ? ? ? ? ?Ionic2可以有两种方式来存储数据,Local Storage和SQLite ? LocalStorage ? 因为比较容易访问,所以不适合存比较敏感性的数据 比如可以存储: 用户是否登录的信息. 一些session信息等 具体用法: 进入项目目录:cd MyFirstApp 在主页设置一个按钮,点击按钮,获取LocalStorage的数据并打印在控制台

Ionic2学习笔记（7）：Input

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html ? ? ? 我们先来看一个简单的输入用户名和密码点击登录的界面: ? 进入项目目录:cd MyFirstApp 修改主页代码: app/pages/home/home.html 预览一下效果:ionic serve -l 我们有两种方式来获取输入的数据: ? 第一种:通过[(ngModel)]来获取参数值,修改home.html的代码为如下形式 在home.ts增加一个获取用

Ionic2学习笔记（3）：Pipe

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5538630.html ? ? ? ? ? ? Pipe类似过滤器,比如,在一个字符串要展现在页面之前, 我们需要对这个字符串进行一些操作,比如:将字符串转化为大写,加一个前缀/后缀-- Pipe的作用就是来实现类似的需求: 模型如下: ? ? ? 假设一个字符串: "hello", 我们在展示这个字符串的时候,需要先转换为大写, 然后加一个后缀 " WORLD", 最

Ionic2学习笔记（9）：访问本地设备

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html ? ? ? ? Ionic2提供了访问本地设备的方法,但是需要安装Cordova依赖,我们以调用摄像头拍照为例来说明: 进入项目目录:cd MyFirstApp npm install ionic-native –save 增加调用Camera的插件:ionic plugin add cordova-plugin-carmera 在Home.html中,增加如下代码: 点击b

Ionic2学习笔记（3）：*号

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html ? ? ? ? ? ? 大家常常会在ionic2页面中见到*号的存在,如: <p *ngIf="someBoolean"><p> 含义与: <template [ngIf]="someBoolean"> <p></p> </template> 一样, 即:如果someBool

Ionic2学习笔记

Component nav: <ion-nav [root] = 'rootComponent'></ion-nav> ....import {Nav} from 'ionic-angular';.... export class AppComponent{ @ViewChild(Nav) private nav:Nav; push(){ nav.push(PageOne,{id:1,name:'ztw'}); } } @Component({template:`<p>

一起学ASP.NET Core 2.0学习笔记(二): ef core2.0 及mysql provider 、Fluent API相关配置及迁移

不得不说微软的技术迭代还是很快的,上了微软的船就得跟着她走下去,前文一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx.supervisor.mysql环境搭建搭建好了.net core linux的相关环境,今天就来说说ef core相关的配置及迁移: 简介: Entity Framework(以下简称EF) 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,EF Core是Entity