1. 創(chuàng)建提供者

1.ionic g provider storage在src/providers中創(chuàng)建一個(gè)名為storage的服務(wù)；它將自動(dòng)添加到app.module.ts 中。

2、我們先豐富一下這個(gè)服務(wù)。

//存儲(chǔ).ts

從'@angular/core' 導(dǎo)入{ Injectable } ；

@Injectable()

導(dǎo)出類StorageProvider {

構(gòu)造函數(shù)（）{

console.log('你好，StorageProvider 提供者');

}

公共setItem（鍵，值）{

localStorage.setItem(key,JSON.stringify(value))

}

公共getItem(鍵){

返回JSON.parse(localStorage.getItem(key))

}

公共刪除項(xiàng)目（鍵）{

localStorage.removeItem(key)

}

}

123456789101112131415161718193，接下來我們開始使用

//home.html

家

{{消息}}

前往登錄頁面

登出

//html.ts

從'@angular/core' 導(dǎo)入{ Component } ；

從'ionic-angle' 導(dǎo)入{ NavController }；

import { LoginPage } from \'./login/login\';//介紹頁面

import { StorageProvider } from \'././providers/storage/storage\';//引入服務(wù)

@成分（{

selecter: '頁面主頁',

templateUrl: 'home.html'

})

導(dǎo)出類主頁{

msg:string;//提示信息

isLogin:boolean=false;//是否登錄

構(gòu)造函數(shù)（

公共navCtrl: 導(dǎo)航控制器，

公共存儲(chǔ)：StorageProvider，

）{

this.init();

}

在里面（）{

//判斷是否登錄

this.isLogin=this.storage.getItem('isLogin');

讓account=this.storage.getItem('account');

如果（帳戶）{

this.msg=`歡迎，${account}`;

}別的{

this.msg=`尚未登錄，兄弟。 `;

}

}

登錄頁面（）{

this.navCtrl.push(LoginPage);//路由向前跳轉(zhuǎn)

}

登出（）{

//刪除localStorage中的登錄信息

this.storage.removeItem('isLogin');

this.storage.removeItem('帳戶');

this.init();

}

}

//登錄.ts

從'@angular/core' 導(dǎo)入{ Component } ；

從'ionic-Angular' 導(dǎo)入{ IonicPage, NavController, NavParams };

從\'./tabs/tabs\' 導(dǎo)入{ TabsPage }；

從\'././providers/storage/storage\' 導(dǎo)入{ StorageProvider }

//定義接口格式

界面用戶{

account: 字符串；

密碼：字符串；

}

@IonicPage()

@成分（{

selector: '頁面登錄',

templateUrl: '登錄.html',

})

導(dǎo)出類登錄頁面{

user:用戶={

account:'admin',

密碼：未定義，

}

構(gòu)造函數(shù)（

公共navCtrl: 導(dǎo)航控制器，

公共navParams: NavParams，

公共存儲(chǔ)：StorageProvider

）{

}

登錄（）{

//設(shè)置登錄狀態(tài)為已登錄

this.storage.setItem('isLogin',true);

this.storage.setItem('帳戶',this.user.account);

//設(shè)置一個(gè)頁面作為應(yīng)用的路由根頁面。從現(xiàn)在起，您將無法再返回該頁面。

//左上角的返回按鈕沒有了，連手機(jī)上返回都不起作用。

this.navCtrl.setRoot(TabsPage);

}

回去（）{

this.navCtrl.pop();//路由回跳

}

}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66676869707172737475767778798081828384858687888990919293結(jié)果如圖：

4.點(diǎn)擊登錄，結(jié)果如下圖：

5、點(diǎn)擊退出，返回第一張圖片。

2.http請(qǐng)求、圖文列表

src/providers/api 中的ionic g 提供者api 在api.ts 中寫入get 和post 請(qǐng)求import { Http, Headers, Response } from '@angular/http';

從'@angular/core' 導(dǎo)入{ Injectable } ；

@Injectable()

導(dǎo)出類ApiProvider {

//定義post請(qǐng)求所需的header

公共標(biāo)頭=新標(biāo)頭({'Content-Type':'application/json'});

構(gòu)造函數(shù)（公共http: Http）{

console.log('Hello ApiProvider 提供者');

}

//實(shí)例獲取請(qǐng)求

公共getList(){

返回新的Promise((解決， 拒絕)={

this.http.get('https://jsonplaceholder.typicode.com/albums/1/photos')

.subscribe((res:Response)={

解析(res.json())

},錯(cuò)誤={

控制臺(tái).dir(錯(cuò)誤)

拒絕（）

});

});

}

//實(shí)例post請(qǐng)求

公共帖子數(shù)據(jù)（數(shù)據(jù)）{

返回新的Promise((解決， 拒絕)={

this.http.post('https://jsonplaceholder.typicode.com/posts',data,{headers:this.headers})

.subscribe((res:Response)={

解析(res.json())

},錯(cuò)誤={

控制臺(tái).dir(錯(cuò)誤)

拒絕（）

});

});

}

}

1234567891011121314151617181920212223242526272829303132333435363.在home.ts中引入api服務(wù)并調(diào)用get和post請(qǐng)求

從'@angular/core' 導(dǎo)入{ Component } ；

從'ionic-angle' 導(dǎo)入{ NavController }；

import { LoginPage } from \'./login/login\';//介紹頁面

import { StorageProvider } from \'././providers/storage/storage\';//引入服務(wù)

import { ApiProvider } from \'././providers/api/api\';//引入服務(wù)

//定義圖片格式接口

界面照片{

albumId: 號(hào)；

id:號(hào)碼；

title:字符串；

url:字符串；

縮略圖Url:字符串；

}

@成分（{

selecter: '頁面主頁',

templateUrl: 'home.html'

})

導(dǎo)出類主頁{

msg:string;//提示信息

isLogin:boolean=false;//是否登錄

list:Array=[];

構(gòu)造函數(shù)（

公共navCtrl: 導(dǎo)航控制器，

公共存儲(chǔ)：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(數(shù)據(jù)={

控制臺(tái).dir(數(shù)據(jù));

this.list=數(shù)據(jù)；

});

//測(cè)試post請(qǐng)求

讓數(shù)據(jù)=JSON.stringify({

title: '富',

body: '酒吧',

用戶ID: 1

});

this.api.postData(data).then(data={

控制臺(tái).dir(數(shù)據(jù));

});

}

登錄頁面（）{

this.navCtrl.push(LoginPage);//路由向前跳轉(zhuǎn)

}

登出（）{

//刪除localStorage中的登錄信息

this.storage.removeItem('isLogin');

this.storage.removeItem('帳戶');

this.init();

}

}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 664、在home.html中以圖文列表形式顯示

家

{{消息}}

前往登錄頁面

登出

{{項(xiàng)目.標(biāo)題}}

{{項(xiàng)目.url}}

檢查詳細(xì)信息

1234567891011121314151617181920215。結(jié)果如圖：

3. 滑動(dòng)列表

1.修改contact.ts和contact.html

//聯(lián)系.ts

從'@angular/core' 導(dǎo)入{ Component } ；

從'ionic-angle' 導(dǎo)入{ NavController }；

//定義學(xué)生格式接口

界面學(xué)生{

id: 號(hào)碼；

名稱：字符串；

描述：字符串；

src:字符串；

}

@成分（{

selecter: '頁面聯(lián)系人',

templateUrl: 'contact.html'

})

導(dǎo)出類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'},

];

構(gòu)造函數(shù)（公共navCtrl: NavController）{

}

}

//聯(lián)系.html

接觸

{{項(xiàng)目名}}

{{項(xiàng)目.描述}}

文本

稱呼

電子郵件

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66672.效果如圖

ps:有什么問題請(qǐng)指正。我花了很長時(shí)間才寫。請(qǐng)給我點(diǎn)個(gè)贊=_=！