Ionic2入坑基礎教程和安裝指南

creajoy 8年前發布 | 157K 次閱讀移動開發 Ionic Framework

安裝Ionic

Ionic 2 程序主要通過Ionic命令行工具 CLI 來創建和開發，并使用 Cordova 來構建和部署為原生應用程序。也就是說我們需要先安裝一些工具來實現程序開發。

安裝Ionic CLI 和 Cordova

要創建 Ionic 2 項目，你需要安裝最新版本的 CLI 和 Cordova 。在此之前你需要安裝最新版本的 Node.js 。點這里下載安裝 Node.js ，然后繼續安裝 Ionic CLI 和 Cordova 來進行應用程序開發：

安裝 Ionic

npm install -g ionic

安裝 Cordova

npm install -g cordova

命令前面可能需要添加 sudo 提權來進行全局安裝。

安裝完成后來創建你的第一個 Ionic 應用：

ionic start cutePuppyPics --v2

cutePuppyPics 可以替換成你的應用程序名稱。 --v2 表示當前生成的是 Ionic 2 版本的應用，不添加則生成 Ionic 1 應用。

創建完成后 cd 到你的程序目錄中，執行 ionic serve 來啟動你的Ionic應用，并確保測試在瀏覽器中能夠正常顯示：

cd cutePuppyPics
ionic serve

平臺指南

對于那些為iOS和Android構建原生應用程序（大多數人），每個平臺都有一定的功能和安裝要求，才能充分利用Ionic和Cordova開發。

對于iOS開發人員，并按照說明安裝或升級Xcode，并注冊開發人員帳戶，開始為iOS開發應用程序。

對于Android開發人員，并按照說明安裝SDK或Android Studio，開始為Android開發應用程序。

Ionic 2 基礎教程

確保完成之前的安裝并測試啟動成功。下面我們將啟動新的應用程序，添加頁面，并在這些頁面之間導航等過程。讓我們開始吧！

啟動一個新的Ionic 2應用

用 start 命令來創建一個新的Ionic 2應用。別忘了添加 --v2 來指定這是一個 Ionic 2 的應用程序。再添加一個 tutorial 參數，指定使用 tutorial 模版創建該應用。這樣一個基于 TypeScript 的Ionic 2應用就被成功創建了。

ionic start MyIonic2Project tutorial --v2

在這個過程中將會下載 Ionic 2 庫包，安裝所需的npm模塊，并為應用配置好Cordova。如果在創建時不指定 tutorial 參數，ionic默認使用 tabs 模版來創建應用。

在瀏覽器中查看應用

現在你可以 cd 到創建好的項目文件夾中，使用 serve 命令在瀏覽器中預覽你的應用。

cd MyIonic2Project/
ionic serve

如果成功啟動，你將看到上面這樣的歡迎界面。

項目結構

讓我們來剖析一下Ionic 2應用，在我們創建的文件夾中，我們可以看到一個典型的Cordova項目結構。我們可以在其中安裝原生插件，并創建平臺特定的項目文件。

./src/index.html

src/index.html 是 Ionic 2 應用的主入口文件，其目的是設置腳本和CSS引導，然后開始運行我們的應用程序。我們不會在這個文件中花費大量的時間。

為了讓應用正常運作，Ionic 2 會在HTML中尋找 <ion-app> 標記。在這個例子中，我們有：

<ion-app></ion-app>

并且在下方我們還能看到這樣的腳本引用：

<script src="cordova.js"></script>
  <script src="build/polyfills.js"></script>
  <script src="build/main.js"></script>

cordova.js 是Cordova應用的需求文件，我們在開發過程中這個文件將會提示404錯誤，這不需要擔心。Cordova將會在構建過程中自動注入這個文件。
build/polyfills.js 是在構建過程中自動生成的，我們不需要過多關注。
build/main.js 是一個包含了Ionic, Angular和你的JS腳本的文件。

./src/app/app.component.ts

在 app 文件夾中能找到我們的預編譯代碼。這是Ionic 2應用程序的大部分工作起始的地方。當我們運行 ionic serve 時， app 中的代碼將被編譯成當前瀏覽器能夠執行的javascript版本（當前是ES5）。也就是說我們可以使用TypeScript或更高級別的 ES6+ 進行開發，而在編譯時會自動降級為瀏覽器可識別的版本。

app.component.ts 是應用的入口文件。

在文件中我們能夠看到這樣的結構：

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(
  )
}

每個應用程序都有一個根組件，用于控制應用程序的其余部分。這跟Ionic 1和Angular 1中的 ng-app 非常相似。原先的啟動配置被放倒了 app.module.ts 文件中。

在這個組件中，我們設置了模版文件 app.html ，下面我們來看一下這個文件。

./src/app/app.html

app.html 里是我們應用的主模版：

<ion-menu [content]="content">
<ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>
<ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav></code></pre> 
  
在這個模板中，我們設置了一個 ion-menu 作為側面菜單，然后一個 ion-nav 組件作為主要內容區域。 ion-menu 菜單的 [content] 屬性綁定到了我們 ion-nav 的本地變量 content 上。所以我們知道哪里會發生動作變化。 
  接下來，我們來看看如何創建更多頁面并執行基本的導航。 
  添加頁面 
  現在我們對Ionic 2應用的布局有一個基本的掌握，讓我們來了解一下在應用中創建和導航到頁面的過程。 
  讓我們看一下 app.html 頁面的底部： 
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 
  注意 [root] 屬性綁定。 這本質上是設置了ion-nav組件的“root”頁面。 當ion-nav加載時，變量 rootPage 引用的組件將是根頁面。 
  在 app.component.ts 中， MyApp 組件在其構造函數中指定： 
  ...
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
...
export class MyApp {
  ...
// make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;

constructor(
  public platform: Platform,
  public menu: MenuController
) {
...

}
...
}</code></pre> 
  
我們看到 rootPage 設置成了 HelloIonicPage ，所以 HelloIonicPage 將是在nav控制器中加載的第一個頁面。 
  創建一個頁面 
  接下來，讓我們看看我們正在導入的 HelloIonicPage 。在 src/app/pages/hello-ionic/ 文件夾中，找到并打開 hello-ionic.ts 。 
  你可能已經注意到每個頁面都有自己的文件夾，該文件夾以頁面命名。 在每個文件夾內，我們還可以看到一個.html和一個.scss同名文件。 例如，在 hello-ionic/ 我們將找到 hello-ionic.ts ， hello-ionic.html 和 hello-ionic.scss 。 雖然使用這種模式不是必需的，但它可以有助于保持項目的組織結構。 
  然后我們找到 HelloIonicPage 類，在創建的頁面中提供了一個Angular組件和已經使用Ionic的導航系統加載的所有Ionic指令。注意，因為頁面是動態加載的，所以它們沒有選擇器（ selector ）： 
  import { Component } from '@angular/core';
@Component({
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {
}
}</code></pre> 
  
所有的頁面都會有一個類和一個關聯的模版。讓我們再看一下 src/app/pages/hello-ionic/hello-ionic.html ，這是一個模版頁面： 
  <ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
<h3>Welcome to your first Ionic app!</h3>
<p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button ion-button color="primary" menuToggle>Toggle Menu</button>
  </p>
</ion-content></code></pre> 
  
<ion-navbar> 是這個頁面中導航欄的模版。當我們導航到這個頁面，導航欄的按鈕和標題作為頁面轉換的一部分進行過渡。 
  模板的其余部分是標準的Ionic代碼，用于設置我們的內容區域并輸出我們的歡迎信息。 
  創建其他頁面 
  要創建一個其他的頁面，我們不需要太多的事情，只要確保配置標題和我們期望在導航欄顯示的東西即可。 
  讓我們來看一下 src/app/pages/list/list.ts 。在這里，你會看到一個新的頁面被定義： 
  import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ItemDetailsPage } from '../item-details/item-details';
@Component({
  templateUrl: 'list.html'
})
export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;
constructor(public navCtrl: NavController, public navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');

this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];

this.items = [];
for(let i = 1; i < 11; i++) {
  this.items.push({
    title: 'Item ' + i,
    note: 'This is item #' + i,
    icon: this.icons[Math.floor(Math.random() * this.icons.length)]
  });
}

}
itemTapped(event, item) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
  }
}</code></pre> 
  
此頁面將創建一個包含多個項目的基本列表頁面。 
  總的來說，這個頁面和我們之前看到的 HelloIonicPage 非常相似。 在下一節中，我們將學習如何導航到新頁面！ 
  導航到頁面 
  回想上一部分我們在 ListPage 類中有一個函數，看起來像這樣： 
  itemTapped(event, item) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
  } 
  你可能已經注意到我們引用了一個 ItemDetailsPage 。這是一個包含在教程啟動器中的頁面。我們要在 list.ts 中導入它，我們可以這樣導入： 
  ...
import { ItemDetailsPage } from '../item-details/item-details';
... 
  保存好之后。你會發現 ionic serve 將重新編譯應用程序并刷新瀏覽器，你的修改將會出現在程序中。讓我們在瀏覽器中重新訪問我們的應用程序，當我們點擊一個項目，它將導航到項目詳細信息頁面！請注意，菜單切換按鈕將被替換為后退按鈕。這是Ionic遵循的原生風格，但可以按需配置。 
  工作原理 
  Ionic 2 導航的工作原理就像一個簡單的堆棧，我們通過 push 將一個頁面推到堆棧的頂端，這會讓我們的應用前進一步并顯示一個返回按鈕。反之，我們也可以 pop 掉一個頁面。因為我們在構造函數中設置了 this.navCtrl ，我們可以調用 this.navCtrl.push() ,并傳遞我們要導航到的頁面。我們還可以傳遞一個數據對象給我們想要導航到的頁面。使用 push 導航到新頁面很簡單，而且Ionic的導航系統非常的靈活。你可以查看 導航文檔 找到更多高級導航示例。 
  當涉及到URL，Ionic 2的工作方式有點不同于Ionic 1。不使用URL導航，可以確保我們可以總是回到一個頁面（例如應用程序啟動）。這意味著我們不只是限于使用href來導航。無論怎樣，我們仍然可以選擇在必要時使用網址導航到某個網頁。 
  后續步驟 
  到此你已經完成了Ionic 2基本教程，了解了Ionic 2并開始朝著掌握Ionic 2進發。有能力的話最好去 Ionic官網 閱讀完整的技術文檔。 
   
    建議熟悉一下TypeScript的基本語法和使用，包括@types使用和d.ts編寫。
  
    掌握Angular2的基本原理和開發思路。
  
    熟悉Ionic 2的所有Components和API。
  
    了解Cordova的使用方法和插件。
  
   
    
    
  來自：https://segmentfault.com/a/1190000007131084


                    
                         本文由用戶 creajoy 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1476256273813.html
                         移動開發 Ionic Framework

Ionic2入坑基礎教程和安裝指南

安裝Ionic

安裝Ionic CLI 和 Cordova

平臺指南

Ionic 2 基礎教程

啟動一個新的Ionic 2應用

在瀏覽器中查看應用

項目結構

./src/index.html

./src/app/app.component.ts

./src/app/app.html

添加頁面

創建一個頁面

創建其他頁面

導航到頁面

工作原理

后續步驟

相關經驗

相關資訊

相關文檔

目錄