ionic インストール

当サイトの実例はionic v1.3.2 バージョンを採用しており、使用する CDN ライブラリのアドレスは次のとおりです：

<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>

ionic 最新版ダウンロードアドレス：http://ionicframework.com/docs/overview/#download。

ダウンロード後、圧縮パッケージを解凍すると、以下のディレクトリが含まれています：

css/               =>     样式文件
fonts/             =>     字体文件
js/                =>     Javascript文件
version.json       =>     版本更新说明

Github で以下のリソースファイルをダウンロードすることもできます：https://github.com/driftyco/ionic（release ディレクトリ内にあります）。

次に、プロジェクト内で上記のディレクトリにある css/ionic.min.css と js/ionic.bundle.min.js ファイルを導入するだけで、ionic アプリを作成できます。

実例

<ion-header-bar class="bar-positive"> <h1 class="title">Hello World!</h1> </ion-header-bar> <ion-content> <p>私の最初の ionic アプリ。</p> </ion-content>

試してみる »

「試してみる」ボタンをクリックして、オンラインの実例を表示します。

本チュートリアルは ionic フレームワークのアプリケーションに重点を置いて解説します。ほとんどの実例はブラウザで実行されます。モバイルデバイスでの実行については、次のコマンドラインインストールチュートリアルで詳しく説明します。

注意：phonegap などのモバイルアプリでは、対応する js ファイルと css ファイルをリソースライブラリに追加するだけで済みます。

コマンドラインでのインストール

まず、インストールする必要がありますNode.js、この後のインストールでは、その NPM ツールを使用する必要があります。NPM の詳細については、私たちのNPM 使用ガイド。

次に、コマンドラインツール最新版の cordova と ionic をインストールします。参考としてAndroidとiOS公式ドキュメントを参照してインストールしてください。

Window と Linux では、コマンドラインツールを開いて次のコマンドを実行します：

$ npm install -g cordova ionic

Mac システムでは次のコマンドを使用します：

sudo npm install -g cordova ionic

ヒント: IOS は Mac OS X. と Xcode 環境下でインストールおよび使用する必要があります。

上記の環境をすでにインストールしている場合は、次のコマンドを実行してバージョンを更新できます:

npm update -g cordova ionic

或

sudo npm update -g cordova ionic

アプリの作成

ionic公式が提供する既製のアプリケーションテンプレート、または空白のプロジェクトを使用して、ionic アプリを作成します：

$ ionic start myApp tabs

先ほど作成したionicプロジェクトを実行

ionic tool を使用して、あなたのアプリを作成、テスト、実行します（または Cordova を介して直接作成します）。

Androidアプリの作成

$ cd myApp
$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova emulate android

すべて正常ならエミュレータが表示され、画面は次のようになります：

iOSアプリの作成

$ cd myApp
$ ionic cordova platform add ios
$ ionic cordova build ios
$ ionic cordova emulate ios

「ios-sim was not found.」エラーが発生した場合は、次のコマンドを実行できます：
npm install -g ios-sim

すべて正常ならエミュレータが表示され、画面は次のようになります：

Ionic Lab

Ionic Lab は現在更新を停止しています。

Ionic Lab はデスクトップ版の開発環境です。コマンドラインでの操作を好まない場合でも、Ionic Lab があなたのニーズを満たします。

Ionic Lab は開発者に、Ionic アプリケーションの開始、コンパイル、実行、シミュレーション実行をより簡単に行う方法を提供します。

Ionic Lab がサポートするプラットフォーム：Window、Mac OS X、Linux。ダウンロードアドレスは：http://lab.ionic.io/、ダウンロード後は直接インストールするだけです。操作画面全体は次のようになります：

上記の画面で以下の操作を行うことができます：

アプリの作成
アプリのプレビュー
アプリのコンパイル
アプリの実行
アプリのアップロード
実行ログの表示

Sublime Text を Ionic プロジェクトのエディタとして使用することをお勧めします。Ionic Lab を使用すると、Sublime Text 上で直接プロジェクトを開くことができます。下図のとおりです：

Gif 操作デモ

その他の拡張

ionic CSS

ionic JavaScript