美国留学

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:有什么问题请指正。我花了很长时间才写。请给我点个赞=_=！