步驟1：入門

首先，您需要安裝Node.js

Cordova和ionic命令行工具：

$ npm install -g cordova ionic.

（您可能必須以root用戶身份運(yùn)行它，因此如果它是不起作用，請(qǐng)嘗試使用sudo）。

和Android的平臺(tái)依賴項(xiàng)

現(xiàn)在，您都可以創(chuàng)建第一個(gè)項(xiàng)目。

$ ionic start myApp blank

空白是來自的模板項(xiàng)目離子，您還可以選擇選項(xiàng)卡，這是一個(gè)已進(jìn)一步開發(fā)的項(xiàng)目。

好，讓我們看看離子產(chǎn)生了什么。

$ cd myApp

$ ionic platform add android

$ ionic serve

這將在localhost/8100打開一個(gè)網(wǎng)頁(yè)，顯示該應(yīng)用程序的外觀。當(dāng)然，這實(shí)際上并不是它在移動(dòng)設(shè)備上的外觀，因此讓我們看一下如何顯示它。

步驟2：測(cè)試應(yīng)用

有幾種測(cè)試應(yīng)用程序的方法：第一種方法是僅打開使用google chrome在上一步中使用serve創(chuàng)建的網(wǎng)頁(yè)。點(diǎn)擊F12打開檢查菜單。

在此菜單的左上角（元素旁邊），您可以看到電話圖標(biāo)。如果單擊此按鈕，瀏覽器將進(jìn)入移動(dòng)模式，您可以看到應(yīng)用程序的真正外觀。單擊右側(cè)第二個(gè)按鈕，將檢查菜單移至屏幕右側(cè)。您可以通過在設(shè)備下拉列表中選擇要模擬的設(shè)備來進(jìn)行選擇。

注意：此處的外觀與真實(shí)設(shè)備上的外觀相同，但是某些應(yīng)用可能在此處運(yùn)行但在手機(jī)上不起作用，這是因?yàn)閏hrome比手機(jī)更能容忍小錯(cuò)誤，或者由于某些設(shè)備特定的問題。

因此要進(jìn)行全面測(cè)試，請(qǐng)使用仿真器或真實(shí)的android設(shè)備。

要使用仿真器，只需運(yùn)行

$ ionic emulate android 。

要在您自己的設(shè)備上對(duì)其進(jìn)行測(cè)試：通過USB將其插入，請(qǐng)確保已在設(shè)備上啟用了調(diào)試功能（如果未啟用）知道該怎么做，Google是您最好的朋友），然后運(yùn)行$ ionic run android。

您會(huì)看到您有一個(gè)帶標(biāo)題的空白頁(yè)。

步驟3：了解我們的應(yīng)用程序結(jié)構(gòu)

讓我們了解Ionic創(chuàng)建了哪些文件：

對(duì)我們而言重要的地圖（我們將在其中創(chuàng)建應(yīng)用程序的位置是www/），其他所有文件都是Ionic用于創(chuàng)建最終產(chǎn)品的文件，因此，讓我們仔細(xì)看看該文件。

對(duì)于已經(jīng)創(chuàng)建了某些網(wǎng)頁(yè)的用戶這似乎很熟悉。您將擁有一個(gè)包含應(yīng)用程序靜態(tài)信息的html文件，一個(gè)包含用于動(dòng)態(tài)信息的Java腳本文件的js映射以及一個(gè)包含樣式元素的css映射。

步驟4：在Index.html

，因此，如果我們看一下index.html文件，就會(huì)看到這一點(diǎn)。

在head標(biāo)簽之間，我們將顯示我們的內(nèi)容所必需的信息：css樣式表的鏈接，angularjs，cordova的鏈接以及Java Script文件的鏈接。

在放置內(nèi)容的body標(biāo)簽之間。在這里，您可以看到一個(gè)離子窗格，它只是一種離子數(shù)據(jù)容器，其中包含帶有標(biāo)題的標(biāo)題欄。

步驟5：創(chuàng)建主頁(yè)并添加側(cè)面菜單

現(xiàn)在讓我們真正開始在應(yīng)用程序上創(chuàng)建漂亮的主頁(yè)和頁(yè)面導(dǎo)航窗格。最好的方法是不開始將所有內(nèi)容放到index.html頁(yè)中，而是將單獨(dú)的模板文件放到templates文件夾中。

在新的index.html中，并沒有太大變化：應(yīng)用程序的名稱和標(biāo)題已被刪除。 Ion-nav-view已添加，這是一個(gè)加載app.js中定義的默認(rèn)模板的類。

在這里您可以看到我已經(jīng)創(chuàng)建了一些狀態(tài)，這些狀態(tài)用于在您的應(yīng)用中導(dǎo)航。側(cè)菜單是一種抽象狀態(tài)，這意味著它不能直接使用，而只能通過使用屬于該狀態(tài)的子狀態(tài)（例如家庭）來使用。當(dāng)我們使用home時(shí)，會(huì)同時(shí)加載home.html和side-menu.html。

$urlRouterProvider.otherwise（‘/side/home’）

這是應(yīng)用程序采用的默認(rèn)路由：換句話說，這是打開應(yīng)用程序時(shí)將加載的頁(yè)面。

在側(cè)面菜單中您可以看到側(cè)面菜單的代碼。您將創(chuàng)建一個(gè)范圍副菜單，其中包含副菜單和內(nèi)容。內(nèi)容包含在頁(yè)面頂部的導(dǎo)航欄。

側(cè)面菜單包含側(cè)面菜單中的信息，在這種情況下，列表包含指向不同頁(yè)面的鏈接和標(biāo)題欄。

在home.html中，您可以看到使用了一個(gè)視圖，這會(huì)更改導(dǎo)航欄中的文本，在本例中為“歡迎”。

步驟6：看一下我們所做的事情

這是當(dāng)前歡迎屏幕的外觀。向右滑動(dòng)時(shí)，您會(huì)看到左側(cè)菜單帶有不同顏色的標(biāo)題。這些顏色是通過使用正色表示藍(lán)色和紅色表示紅色來選擇的。對(duì)于其他顏色，您可以查看離子文檔

步驟7：使用Google API創(chuàng)建地圖

出于多種原因，您可能希望在應(yīng)用中安裝地圖，因此Google提供了一個(gè)API來輕松實(shí)現(xiàn)此目的。

首先，我們需要在index.html中包含API，我們這樣做的方式與我們包含自己的js文件的方式相同。

下一步，添加一個(gè)新模板map.html。在這個(gè)新的html文件中，我們創(chuàng)建一個(gè)名為Navigation的視圖，并在此視圖中創(chuàng)建一個(gè)帶有自定義類映射的字段。這是將放置Google地圖的畫布。在我們的css文件中，我們創(chuàng)建一個(gè)規(guī)則#map來匹配我們剛剛使用的類，并將大小設(shè)置為100％，這樣，該地圖將占用所有可能的空間。

制作該地圖最困難的部分是控制器。我們通常將控制器放在單獨(dú)的文件中，因此在js映射中創(chuàng)建一個(gè)名為controllers.js的文件。該文件的第一行將其聲明為myApp上下文中具有名稱控制器的Angular js模塊。接下來是控制器NavCtrl，它將處理地圖。我們定義了一個(gè)intitialize函數(shù)，它將初始化地圖并將其繪制在畫布上。地理位置用于獲取當(dāng)前位置。然后使用您的位置和縮放系數(shù)10創(chuàng)建地圖。要在現(xiàn)在的位置放置標(biāo)記，我們定義一個(gè)新的Marker對(duì)象，其中包含位置，要使用的地圖和名稱。

在控制器的末尾，行

ionic.Platform.ready（initialize）

等待，直到Ionic準(zhǔn)備讀取文件，然后調(diào)用初始化函數(shù)。這比僅調(diào)用Initialize更安全。因?yàn)檫@樣應(yīng)用程序可能會(huì)正確執(zhí)行，也可能無法正確執(zhí)行。創(chuàng)建控制器時(shí)將執(zhí)行此行。但是我們還沒有使用它，所以讓我們將其鏈接到map.html頁(yè)面。

為此，我們?cè)赼pp.js中創(chuàng)建了一個(gè)新狀態(tài)，在該視圖中我們加載了map.html頁(yè)面并控制器：NavCtrl。

現(xiàn)在剩下的就是將側(cè)邊欄中的“導(dǎo)航”指向此狀態(tài)。為此，我們向side-menu.html中的鏈接添加了ui-sref屬性。 sref代表狀態(tài)引用，因此無需引用url，而如果決定更改url，則必須更改它，而只是使用狀態(tài)。

步驟8：就是這樣

真的很簡(jiǎn)單。

我知道屏幕截圖并不總是很清晰，但是Instructables不允許我在文本中插入HTML代碼