1. 创建提供者
1.ionic g provider storage在src/providers中创建一个名为storage的服务；它将自动添加到app.module.ts 中。
2、我们先丰富一下这个服务。
//存储.ts
从'@angular/core' 导入{ Injectable } ；
@Injectable()
导出类StorageProvider {
构造函数（）{
console.log('你好，StorageProvider 提供者');
}
公共setItem（键，值）{
localStorage.setItem(key,JSON.stringify(value))
}
公共getItem(键){
返回JSON.parse(localStorage.getItem(key))
}
公共删除项目（键）{
localStorage.removeItem(key)
}
}
123456789101112131415161718193，接下来我们开始使用
//home.html
家
{{消息}}
前往登录页面
登出
//html.ts
从'@angular/core' 导入{ Component } ；
从'ionic-angle' 导入{ NavController }；
import { LoginPage } from \'./login/login\';//介绍页面
import { StorageProvider } from \'././providers/storage/storage\';//引入服务
@成分（{
selecter: '页面主页',
templateUrl: 'home.html'
})
导出类主页{
msg:string;//提示信息
isLogin:boolean=false;//是否登录
构造函数（
公共navCtrl: 导航控制器，
公共存储：StorageProvider，
）{
this.init();
}
在里面（）{
//判断是否登录
this.isLogin=this.storage.getItem('isLogin');
让account=this.storage.getItem('account');
如果（帐户）{
this.msg=`欢迎，${account}`;
}别的{
this.msg=`尚未登录，兄弟。 `;
}
}
登录页面（）{
this.navCtrl.push(LoginPage);//路由向前跳转
}
登出（）{
//删除localStorage中的登录信息
this.storage.removeItem('isLogin');
this.storage.removeItem('帐户');
this.init();
}
}
//登录.ts
从'@angular/core' 导入{ Component } ；
从'ionic-Angular' 导入{ IonicPage, NavController, NavParams };
从\'./tabs/tabs\' 导入{ TabsPage }；
从\'././providers/storage/storage\' 导入{ StorageProvider }
//定义接口格式
界面用户{
account: 字符串；
密码：字符串；
}
@IonicPage()
@成分（{
selector: '页面登录',
templateUrl: '登录.html',
})
导出类登录页面{
user:用户={
account:'admin',
密码：未定义，
}
构造函数（
公共navCtrl: 导航控制器，
公共navParams: NavParams，
公共存储：StorageProvider
）{
}
登录（）{
//设置登录状态为已登录
this.storage.setItem('isLogin',true);
this.storage.setItem('帐户',this.user.account);
//设置一个页面作为应用的路由根页面。从现在起，您将无法再返回该页面。
//左上角的返回按钮没有了，连手机上返回都不起作用。
this.navCtrl.setRoot(TabsPage);
}
回去（）{
this.navCtrl.pop();//路由回跳
}
}
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66676869707172737475767778798081828384858687888990919293结果如图：
4.点击登录，结果如下图：
5、点击退出，返回第一张图片。
2.http请求、图文列表
src/providers/api 中的ionic g 提供者api 在api.ts 中写入get 和post 请求import { Http, Headers, Response } from '@angular/http';
从'@angular/core' 导入{ Injectable } ；
@Injectable()
导出类ApiProvider {
//定义post请求所需的header
公共标头=新标头({'Content-Type':'application/json'});
构造函数（公共http: Http）{
console.log('Hello ApiProvider 提供者');
}
//实例获取请求
公共getList(){
返回新的Promise((解决， 拒绝)={
this.http.get('https://jsonplaceholder.typicode.com/albums/1/photos')
.subscribe((res:Response)={
解析(res.json())
},错误={
控制台.dir(错误)
拒绝（）
});
});
}
//实例post请求
公共帖子数据（数据）{
返回新的Promise((解决， 拒绝)={
this.http.post('https://jsonplaceholder.typicode.com/posts',data,{headers:this.headers})
.subscribe((res:Response)={
解析(res.json())
},错误={
控制台.dir(错误)
拒绝（）
});
});
}
}
1234567891011121314151617181920212223242526272829303132333435363.在home.ts中引入api服务并调用get和post请求
从'@angular/core' 导入{ Component } ；
从'ionic-angle' 导入{ NavController }；
import { LoginPage } from \'./login/login\';//介绍页面
import { StorageProvider } from \'././providers/storage/storage\';//引入服务
import { ApiProvider } from \'././providers/api/api\';//引入服务
//定义图片格式接口
界面照片{
albumId: 号；
id:号码；
title:字符串；
url:字符串；
缩略图Url:字符串；
}
@成分（{
selecter: '页面主页',
templateUrl: 'home.html'
})
导出类主页{
msg:string;//提示信息
isLogin:boolean=false;//是否登录
list:Array=[];
构造函数（
公共navCtrl: 导航控制器，
公共存储：StorageProvider，
公共api:ApiProvider
）{
this.init();
}
在里面（）{
//判断是否登录
this.isLogin=this.storage.getItem('isLogin');
让account=this.storage.getItem('account');
如果（帐户）{
this.msg=`欢迎，${account}`;
this.getList();
}别的{
this.msg=`尚未登录，兄弟。 `;
}
}
获取列表（）{
//获取显示列表
this.api.getList().then(数据={
控制台.dir(数据);
this.list=数据；
});
//测试post请求
让数据=JSON.stringify({
title: '富',
body: '酒吧',
用户ID: 1
});
this.api.postData(data).then(data={
控制台.dir(数据);
});
}
登录页面（）{
this.navCtrl.push(LoginPage);//路由向前跳转
}
登出（）{
//删除localStorage中的登录信息
this.storage.removeItem('isLogin');
this.storage.removeItem('帐户');
this.init();
}
}
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 664、在home.html中以图文列表形式显示
家
{{消息}}
前往登录页面
登出
{{项目.标题}}
{{项目.url}}
检查详细信息
1234567891011121314151617181920215。结果如图：
3. 滑动列表
1.修改contact.ts和contact.html
//联系.ts
从'@angular/core' 导入{ Component } ；
从'ionic-angle' 导入{ NavController }；
//定义学生格式接口
界面学生{
id: 号码；
名称：字符串；
描述：字符串；
src:字符串；
}
@成分（{
selecter: '页面联系人',
templateUrl: 'contact.html'
})
导出类ContactPage {
公共类List:Array=[
{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'},
];
构造函数（公共navCtrl: NavController）{
}
}
//联系.html
接触
{{项目名}}
{{项目.描述}}
文本
称呼
电子邮件
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66672.效果如图
ps:有什么问题请指正。我花了很长时间才写。请给我点个赞=_=！
