載入組建的使用，會用到ionic-angular 的LoadingController 組建。在傳送請求到遠端的伺服器的時候，總是需要做一些等待的操作，不然使用者的體驗會非常的差勁，然而這種基礎的東西，inoic早就為我們想到了，可以通過匯入LoadingController 元件，在傳送請求前顯示載入效果，渲染後移除載入效果

程式碼地址

https://gitee.com/yellowcong/ionic/tree/master/ionic3-all

實現效果

大家可以看到，我的效果是先彈出一個載入的效果，資料加載出來後，載入的效果消失。

後臺程式碼（web.ts）

後臺程式碼，就是簡單的使用了一下LoadingController

//@angular/core是一個npm的模組，定義了angular的核心功能
import { Component } from '@angular/core';

import { Http, Response } from '@angular/http';

//匯入http請求的工具

//NavController就是用來管理和導航頁面的一個controlle
//NavParams 這個是引數
import { NavController,NavParams } from 'ionic-angular'
 
;

//匯入等待樣式
import { LoadingController } from 'ionic-angular';

@Component({
    selector: 'page-web',
    templateUrl: 'web.html'
  })
//export關鍵詞：將類暴露出去，以便其它的檔案可以import到它。
//類的命名：在ionic3中，頁面類採用頁面名+Page的命名方式，首字母大寫，如HomePage, ContactPage等。
export class WebPage {
  // 接收資料用
  listData: Object;

  // 依賴注入
  constructor(public
 
 navCtrl: NavController, private http: Http,public loadingCtrl: LoadingController) {

  }

  ionViewDidLoad() {

        //載入資料中
        let loading = this.loadingCtrl.create({
            content: '載入資料中...'//資料載入中顯示
        });
        //顯示等待樣式
        loading.present();

        // 網路請求
        this.http.request('http://jsonplaceholder.typicode.com/photos')
        .subscribe((res: Response) => {
            //檢視返回的資料
            console.log(res);
            this.listData = res.json();

            //當資料載入完成後，影藏等待樣式
            loading.dismiss();//顯示多久消失
        });
    }
}

介面程式碼（web.html）

介面程式碼，並沒有什麼，就是一個列表顯示，然後就沒了。簡單的將獲取的資料，顯示到介面上。

<ion-header>
    <ion-navbar>
        <ion-title>
        Test
        </ion-title>
    </ion-navbar>
    </ion-header>
<ion-content>
    <h1>傳送get請求</h1>

    <ion-list  *ngFor="let item of listData">
        <ion-item>
            <!--設定圖片-->
            <ion-avatar item-left>
                <!--這個item前面加上一個?,是為了防止物件為空的情況報錯-->
                <img [src]="item?.url">
            </ion-avatar>
            <!--設定描述-->
            {{item?.title}}
        </ion-item>
    </ion-list>
</ion-content>

參考文章