本文转自：https://blog.csdn.net/lyt_angularjs/article/details/81145468
版权声明：本文为博主原创文章，转载请注明出处。谢谢！ https://blog.csdn.net/lyt_angularjs/article/details/81145468
前言： - 从别人的博客中获取知识，将知识写成博客留与后来人。 - 写博客既是对知识的总结梳理，也方便以后需要用的时候随时来查看。一、创建provider
1.ionic g provider storage 创建了一个名为storage的服务在src/providers里；会自动添加到app.module.ts中。 2.先来丰富一下这个服务吧//storage.ts
import { Injectable } from '@angular/core';@Injectable()
export class StorageProvider {constructor() {
console.log('Hello StorageProvider Provider'); } public setItem(key,value){ localStorage.setItem(key,JSON.stringify(value)) } public getItem(key){ return JSON.parse(localStorage.getItem(key)) } public removeItem(key){ localStorage.removeItem(key) }}3.接下来开始使用了//home.html
<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar></ion-header><ion-content padding>
<h2>{ {msg}}</h2> <button ion-button class="btn-login" color="secondary" *ngIf="!isLogin" (click)="goLoginPage()">去登录页面</button> <button ion-button class="btn-login" *ngIf="isLogin" (click)="logout()">退出登录</button></ion-content>//html.ts
import { Component } from '@angular/core';import { NavController } from 'ionic-angular';import { LoginPage } from "../login/login";//引入页面import { StorageProvider } from "../../providers/storage/storage";//引入服务@Component({
selector: 'page-home', templateUrl: 'home.html'})export class HomePage { msg:string;//提示信息 isLogin:boolean=false;//是否登录 constructor( public navCtrl: NavController, public storage:StorageProvider, ) { this.init(); } init(){ //判断是否登录 this.isLogin=this.storage.getItem('isLogin'); let account=this.storage.getItem('account'); if(account){ this.msg=`欢迎你，${account}`; }else{ this.msg=`还没登录呢，大兄弟。`; } } goLoginPage(){ this.navCtrl.push(LoginPage);//路由跳转-前进 } logout(){ //删除localStorage里面的登录信息 this.storage.removeItem('isLogin'); this.storage.removeItem('account'); this.init(); }}//login.ts
import { Component } from '@angular/core';import { IonicPage, NavController, NavParams } from 'ionic-angular';import { TabsPage } from "../tabs/tabs";import { StorageProvider } from "../../providers/storage/storage"//定义接口格式
interface User { account: string; password:string;}@IonicPage()
@Component({ selector: 'page-login', templateUrl: 'login.html',})export class LoginPage { user:User={ account:'admin', password:undefined, } constructor( public navCtrl: NavController, public navParams: NavParams, public storage:StorageProvider ) { } login(){ //设置登录状态为已登录 this.storage.setItem('isLogin',true); this.storage.setItem('account',this.user.account); //设置某个页面为app的路由根页面，从此以后不能再后退页面 //左上角的<返回没有了，在手机上后退也不行了 this.navCtrl.setRoot(TabsPage); } goBack(){ this.navCtrl.pop();//路由跳转-后退 }}结果如图： 4.点击登录，结果如图： 5.点击退出登录，又回到第一张图片了二、http请求、图文列表
ionic g provider api 在src/providers/api中在api.ts中写get和post请求import { Http,Headers,Response } from '@angular/http';import { Injectable } from '@angular/core';@Injectable()
export class ApiProvider { //定义post请求需要的头部 public headers=new Headers({'Content-Type':'application/json'}); constructor(public http: Http) { console.log('Hello ApiProvider Provider'); } //实例get请求 public getList(){ return new Promise((resolve, reject) => { this.http.get('https://jsonplaceholder.typicode.com/albums/1/photos') .subscribe((res:Response)=>{ resolve(res.json()) },err=>{ console.dir(err) reject() }); }); } //实例post请求 public postData(data){ return new Promise((resolve, reject) => { this.http.post('https://jsonplaceholder.typicode.com/posts',data,{headers:this.headers}) .subscribe((res:Response)=>{ resolve(res.json()) },err=>{ console.dir(err) reject() }); }); }}
3.在home.ts中引入api服务并调用get和post请求import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';import { LoginPage } from "../login/login";//引入页面import { StorageProvider } from "../../providers/storage/storage";//引入服务import { ApiProvider } from "../../providers/api/api";//引入服务//定义图片格式接口
interface Photo { albumId: number; id:number; title:string; url:string; thumbnailUrl:string;}@Component({ selector: 'page-home', templateUrl: 'home.html'})export class HomePage { msg:string;//提示信息 isLogin:boolean=false;//是否登录 list:Array<Photo>=[]; constructor( public navCtrl: NavController, public storage:StorageProvider, public api:ApiProvider ) { this.init(); } init(){ //判断是否登录 this.isLogin=this.storage.getItem('isLogin'); let account=this.storage.getItem('account'); if(account){ this.msg=`欢迎你，${account}`; this.getList(); }else{ this.msg=`还没登录呢，大兄弟。`; } } getList(){ //获取list用于显示 this.api.getList().then(data=>{ console.dir(data); this.list=<any>data; }); //测试post请求 let data=JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }); this.api.postData(data).then(data=>{ console.dir(data); }); } goLoginPage(){ this.navCtrl.push(LoginPage);//路由跳转-前进 } logout(){ //删除localStorage里面的登录信息 this.storage.removeItem('isLogin'); this.storage.removeItem('account'); this.init(); }}4.在home.html中以图文列表格式显示<ion-header>
<ion-navbar> <ion-title>Home</ion-title> </ion-navbar></ion-header><ion-content padding>
<h2>{ {msg}}</h2> <button ion-button class="btn-login" color="secondary" *ngIf="!isLogin" (click)="goLoginPage()">去登录页面</button> <button ion-button class="btn-login" *ngIf="isLogin" (click)="logout()">退出登录</button> <ion-list> <ion-item *ngFor="let item of list"> <ion-avatar item-left> <img [src]="item?.url"> </ion-avatar> <h2>{ {item?.title}}</h2> <p>{ {item?.url}}</p> <button ion-button clear item-right>查看详情</button> </ion-item> </ion-list></ion-content>5.结果如图： 三、滑动列表1.修改contact.ts和contact.html//contact.ts
import { Component } from '@angular/core';import { NavController } from 'ionic-angular';//定义学生格式接口
interface Student { id: number; name:string; describe:string; src:string;}@Component({ selector: 'page-contact', templateUrl: 'contact.html'})export class ContactPage { public classList:Array<Student>=[ {id:1,name:'aaa',describe:'aaaaaa',src:'assets/imgs/a1.jpg'}, {id:2,name:'bbb',describe:'bbbbbb',src:'assets/imgs/a2.jpg'}, {id:3,name:'ccc',describe:'cccccc',src:'assets/imgs/a3.jpg'}, {id:4,name:'ddd',describe:'dddddd',src:'assets/imgs/a4.jpg'}, {id:5,name:'eee',describe:'eeeeee',src:'assets/imgs/a5.jpg'}, ]; constructor(public navCtrl: NavController) {}
}
//contact.html
<ion-header> <ion-navbar> <ion-title> Contact </ion-title> </ion-navbar></ion-header><ion-content>
<ion-list> <ion-item-sliding *ngFor="let item of classList"> <ion-item> <ion-thumbnail item-start> <img [src]="item?.src"> </ion-thumbnail> <h2>{ {item?.name}}</h2> <p>{ {item?.describe}}</p> </ion-item> <ion-item-options side="left"> <button ion-button color="primary"> <ion-icon name="text"></ion-icon> Text </button> <button ion-button color="secondary"> <ion-icon name="call"></ion-icon> Call </button> </ion-item-options> <ion-item-options side="right"> <button ion-button color="danger"> <ion-icon name="mail"></ion-icon> Email </button> </ion-item-options> </ion-item-sliding> </ion-list></ion-content>2.效果如图所示---------------------
作者：漫疏狂 来源：CSDN 原文：https://blog.csdn.net/lyt_angularjs/article/details/81145468?utm_source=copy 版权声明：本文为博主原创文章，转载请附上博文链接！