環境配置

折磨的兩個月！Ionic從零單排，到專案釋出！遇到了很多問題但都一一解決了，此篇文章留作記錄。 
當初想著因為專案不大人力足夠的並且因為團隊沒有移動開發經驗的情況下，是不是能夠是用hybrid app來代替原生來完成這個專案，經過一些技術調研之後選擇了Ionic。當時是對Ionic一無所知，憑藉一些盲目的自信，想著方正有開發文件能有什麼問題呢。現在想想都覺得當時有點衝動萬一中間出現什麼坑或者無法解決的問題都找不到可以諮詢的人。不過好歹結果是好的，基本實現了當初需求設計，並且效果還不錯。

步驟：

1.Ionic環境安裝

Ionic開發是依賴於Nodejs環境的，所以在開發之前我們需要安裝好Nodejs。下載安裝：

<code class="hljs cmake has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">npm <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">install</span> -g cordova ionic </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

這是使用npm包管理器安裝cordova和ionic，-g的意思是全域性安裝，全域性安裝後在PowerShell中任何目錄下都可以使用cordova和ionic的命令。

PS. 安裝過程需要開啟VPN翻牆，貌似是資源被牆了，無語。

2.建立Ionic專案

Ionic官網提供了三個專案模板blank、tabs和sideMenu ，參閱：http://ionicframework.com/getting-started/ 
我們使用blank空模板建立一個我們的應用，並且完成一個簡單的tabs導航的小應用，開啟PowerShell cd到開發目錄，執行：

<code class="hljs sql has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">ionic <span class="hljs-operator" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">start</span> myIonic blank</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

其中myIonic為我們的專案名稱 
執行過程它會從github下載專案原始碼，請等待。。。 
執行完畢後你到開發目錄下檢視會發現多了一個名為myIonic的資料夾，這個資料夾就是Ionic專案的所在目錄了。 
目錄下有以下檔案：

<code class="language-json hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">hooks           //google之後這個目錄應該是在編譯cordova時自定義的指令碼命令，方便整合到我們的編譯系統和版本控制系統中
plugins         //cordova外掛的目錄，外掛的安裝下一節詳述
scss            //scss檔案，釋出時編譯這個目錄下的檔案輸出到www的css目錄中
www             //我們的開發目錄，頁面、樣式、指令碼和圖片都放在這個目錄下
--css
--img
--js
--lib
--index.html
bower.json      //bower配置檔案
config.xml      //Ionic的配置檔案 ⱃ可以配置app的id，名稱、描述起始頁和一起其他配置
gulpfile.js     //gulp構建工具的執行檔案，在這個檔案中建立任務實現編譯scss，css、js優化等
ionic.project   //Ionic的專案檔案可以配置Ionic命令中livereload的監控檔案
package.json    //npm配置檔案</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

因為Ionic是基於angularjs框架開發的，所以在使用Ionic之前需要對angularjs有一定的瞭解。 
在開發初期的除錯我們一般會使用瀏覽器作為我們的除錯工具，Ionic提供了一個serve命令為我們的應用建立web站點可以非常方便的除錯應用， cd到開發目錄下，執行命令：

<code class="hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">ionic serve</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

執行完畢後Ionic會自動幫我們開啟我們的預設瀏覽器並跳轉到我們的應用頁面，瀏覽器開啟頁面時Ionic已經給我們開啟了livereload模式，開啟之後我們編輯www下的檔案後儲存時Ionic會通過websocket通知瀏覽器重新整理頁面，我們就不用每次修改完畢手動重新整理頁面了，又極大的提高了我們的工作效率。

PS. 開啟livereload後Ionic會預設監聽www下面的檔案，如果需要自定義的話請編輯ionic.project的watchPatterns來設定需要監聽的範圍

<code class="language-json hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">{
  "<span class="hljs-attribute" style="box-sizing: border-box;">name</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"myIonic"</span></span>,
  "<span class="hljs-attribute" style="box-sizing: border-box;">app_id</span>": <span class="hljs-value" style="box-sizing: border-box;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span></span>,
  "<span class="hljs-attribute" style="box-sizing: border-box;">watchPatterns</span>": <span class="hljs-value" style="box-sizing: border-box;">[
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"www/js/*"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"www/js/*/*"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"www/*.html"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"www/templates/*.html"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"www/css/*.css"</span>
   ]
</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

www/index.html作為我們的程式入口檔案，首先編輯這個檔案，在body標籤中加入

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-bar</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"bar-positive"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-back-button</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-back-button</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-bar</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-nav-view</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

這段標籤對於對Ionic不熟悉的人來說可能有點陌生，Ionic針對移動端自定義了一套樣式庫，並且使用Angular的指令封裝了各個模組，ion-nav-bar是導航頁面頭部、ion-nav-view是導航內容頁面。inde.html入口頁面我們已經寫完了，接下來我們新建兩個我們自己的頁面。我們在www目錄下新建一個templates資料夾，存放我們的頁面並新建頁面：tabs.html 作為我們tab應用的主頁面：

tabs.html

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-tabs</span> class<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tabs-icon-top tabs-positive"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>

  <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span> title<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Home"</span> icon<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ion-home"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#/tab/home"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
    <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span> name<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"home-tab"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
  <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
  <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span> title<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"About"</span> icon<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ion-ios-information"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#/tab/about"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
    <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span> name<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"about-tab"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-nav</span><span class="hljs-attribute" style="box-sizing: border-box;">-view</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>
  <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>

<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-tabs</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

ion-tab為tab應用的底部選單項 title是選單按鈕顯示的文字，icon是選單按鈕圖示，href是點選選單的跳轉地址，子元素ion-nav-view是點選選單後子頁面顯示的位置，ion-nav-view屬性name為該tab的名稱，後面新增子頁面會詳細描述。

然後在app.js中加入該頁面的路由

<code class="hljs perl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateProvider</span>
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/tab"</span>,
          templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/tabs.html"</span>,
      })
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$urlRouterProvider</span>.otherwise(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/tab"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

儲存之後頁面會自動重新整理顯示的應該是介個樣子： 
 
哈，我們tab應用的大概樣子已經出來了，但是現在點選下面的選單並沒有什麼反應，接下來我們就要開始新增我們的子頁面了，在templates資料夾中新建：home.html、facts.html、about.html 
home.html 首頁

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">view-title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Home"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"padding"</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"button icon icon-right ion-chevron-right"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#/tab/facts"</span>></span>Scientific Facts<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

facts.html

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">view-title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Facts"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"padding"</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"button icon icon-right ion-chevron-right"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#/tab/home"</span>></span>Home<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

about.html

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">view-title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"About"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"padding"</span>></span>
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        About Us
      <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

ion-view是我們子頁面的內容，屬性view-title可以設定頁面頭部的標題名稱，新增好檔案後我們需要在app.js中加入各個頁面的路由，並且需要對之前的tabs路由做一個調整。

<code class="hljs perl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateProvider</span>
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/tab"</span>,
          abstract: true,
          templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/tabs.html"</span>,
      })
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs.home'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/home"</span>,
          views: {
            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'home-tab'</span>: {
              templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/home.html"</span>
            }
          }
      })
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs.facts'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/facts"</span>,
          views: {
            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'home-tab'</span>: {
              templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/facts.html"</span>
            }
          }
      })
      .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">state</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'tabs.about'</span>, {
          url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/about"</span>,
          views: {
            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'about-tab'</span>: {
              templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"templates/about.html"</span>
            }
          }
      })


   <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$urlRouterProvider</span>.otherwise(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/tab/home"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li></ul>

大家發現tabs路由增加了一個abstract欄位，該欄位在angular中的解釋是抽象頁面，不能獨立作為頁面展示只能作為其他頁面父頁面，當載入子頁面之前載入父頁面。 
其他子頁面的路由和tabs路由的配置有所不同名稱命名是父路由.子路由的形式，並且增加了一個views字典，欄位的key值對應著我們前面所說的tabs.html中ion-nav-view的name屬性，表示該路由跳轉的頁面屬於某個tab的子頁面，同時修改我們的otherwise預設頁為/tab/home。 
儲存之後瀏覽器自動重新整理，我們來看一下效果。 

好了，我們來點點看吧，頁面切換Ionic已經幫我們實現了類似原生app的切換動畫效果，是不是有一點原生app的感覺了？下面章節我們會實現在移動端的部署。

3.部署到手機和cordova外掛的使用

一個簡單的Web應用我們已經開發完成了，接下來我們就要做一些部署到移動端之前的準備了。 
Ionic支援兩個平臺ios、android，預設的Ionic專案並沒有新增這兩個平臺，我們需要手動新增，cd到開發目錄下執行命令：

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">ionic <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">platform</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">add</span> android 
ionic <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">platform</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">add</span> ios</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

一般專案都需要兩個平臺同時部署，所以我們就新增兩個，執行完畢之後執行命令檢視你已經新增的平臺列表：

<code class="hljs php has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">ionic platform <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">list</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

結果：

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Installed platforms: android <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4.0</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.0</span>, ios <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.8</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.0</span>
Available platforms: amazon<span class="hljs-attribute" style="box-sizing: border-box;">-fireos</span>, blackberry10, browser, firefoxos, windows, windows8, wp8</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

接下來的部署我們分開講述：

Android 
Android部署分真機和虛擬機器，其實方法類似，在部署之前需要安裝JDK、Android SDK到開發環境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到環境變數中去，並把Android SDK安裝目錄新增到Path中。 
配置好之後開啟PowerShell輸入命令返回正確：

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">adb <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">version</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

接下來就簡單了，把手機連線到電腦，並開啟usb除錯模式，執行命令：

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">ionic <span class="hljs-command" style="box-sizing: border-box;">run</span> android </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

Ionic開始編譯專案生成apk並遠端安裝到手機上後自動開啟應用，是不是很簡單？

IOS 
ios部署需要一臺mac電腦，在mac電腦上面根據本篇ionic的安裝過程安裝環境之後，新增ios平臺到專案，因為apple開發的證書限制我們在沒有申請購買apple賬號的情況下，使用虛擬機器來部署我們的應用，在部署之前需要使用npm安裝一個ios-sim外掛用來呼叫模擬器的，執行命令：

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">sudo npm install <span class="hljs-attribute" style="box-sizing: border-box;">-g</span> ios<span class="hljs-attribute" style="box-sizing: border-box;">-sim</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

安裝好之後，cd 到開發目錄下執行：

<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">sudo</span> ionic build ios</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

開始編譯專案，編譯完成之後用Xcode開啟開發目錄下platform->ios->myIonic.xcodeproj的專案檔案，Xcode中選擇要執行的虛擬機器版本並執行快捷鍵cmd+R執行虛擬機器，虛擬機器開啟後會自動執行你應用。

PS. 為什麼不用run ios 命令直接啟動虛擬機器呢，因為我的環境下執行run會報錯，虛擬機器會開啟但是無法執行程式，找了半天解決解決方案沒有結果，索性直接用Xcode了，效果是一樣樣的

到了這一步我們的app已經部署完畢了，接下來我們要為我們的app新增一個拍照功能，需要引用到cordova外掛，而Ionic把一些常用到的外掛用angularjs服務做了一層封裝：http://ngcordova.com/ 我們只需要在專案中安裝ngCordova外掛就可以想使用angularjs的服務一樣在我們的專案中呼叫了，我們先安裝ngCordova（安裝需要bower包管理器，並開啟VPN。。。）：

<code class="hljs cmake has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">bower <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">install</span> ngCordova</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

安裝完畢之後再www/index.html中引用

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"lib/ngCordova/dist/ng-cordova.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"cordova.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102