ionic：安裝

ylbtech-ionic：安裝

 

1.返回頂部

一、

ionic 安裝

本站實例採用了ionic v1.3.2 版本，使用的 CDN 庫地址：

<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/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 建立，測試，運行你的apps(或者經過Cordova直接建立)。

建立Android應用

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

若是一切正常會彈出模擬器，界面以下所示：

建立iOS應用

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

若是出現"ios-sim was not found."錯誤，能夠執行如下命令：

npm install -g ios-sim

若是一切正常會彈出模擬器，界面以下所示：

---

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 操做演示

二、

2.返回頂部

 

3.返回頂部

 

4.返回頂部

 

5.返回頂部

一、

http://www.runoob.com/ionic/ionic-install.html

二、

 

6.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。