ionic1文件路徑問題

ionic1文件路徑問題

根據項目的需求，須要使用ionic來完成App的開發，我也就開始了ionic的學習。根據業務需求，使用的是ionic1.x，踩了不少的坑，好比ionic在使用文件的時候的路徑問題，讓我很頭疼了一陣子，最後參考網上一些朋友的技術博客，解決了這個問題，因此記一下筆記，以備之後查看或者能幫到一些朋友。

項目大致的文件結構

文件目錄大致介紹

*scss文件夾下面是scss文件，在當前項目下使用命令：glup scss 能夠動態修改ionic.app.min.css文件
*www/assets文件夾下面存放的是項目須要用到的圖片文件
*lib/ionic/css文件下面存放的是項目的css文件

在html文件中引用其餘的html

使用ionic開發項目過程當中須要建立公用的html頁面，好比：咱們不想使用<ion-header>那咱們能夠本身建立自定義的html，而後動態加載到不一樣的html頁面中。

html動態加載其餘html的時候路徑須要按照index.html文件的位置做爲參考，由於在運行時，其餘html代碼會被動態加載到index.html中

貼一下項目文件圖：

貼一下引用html的代碼

waitForWork.html引入common.title.html頁面作爲title，templates文件夾與index.html文件

* <div ng-include="'../templates/common/common.title.html'"></div>
* <div ng-include="'../../templates/common/common.title.html'"></div>

以上的代碼用瀏覽器F12測試沒有任何問題，可是在真機中無效。雖然從相對路徑來講沒有任何問題，可是手機不支持

* <div ng-include="'templates/common/common.title.html'"></div>
* <div ng-include="'./templates/common/common.title.html'"></div>

以上的代碼在真機和瀏覽器中運行都沒有任何問題。以上兩種寫法都同樣！

引用assets文件中的圖片

貼一下項目文件結構

貼一下html代碼

在html中直接使用圖片，文件路徑要相對於index.html文件路徑

style="background-image: url('../assets/global/img/login/login_bg.jpg')
style="background-image: url('../../assets/global/img/login/login_bg.jpg')

以上代碼在瀏覽器中好用，在Android手機中不能使用，可是不建議直接在html中使用style，爲了代碼整潔要寫到css文件中

style="background-image: url('./assets/global/img/login/login_bg.jpg');
style="background-image: url('assets/global/img/login/login_bg.jpg')"

以上代碼在真機和瀏覽器中都好用，可是不建議直接在html中使用style，爲了代碼整潔要寫到css文件中

在css中使用圖片

.gridCheck-upload-btn {
width: 80px;
height: 22px;
background: url(../../../assets/global/img/gridCheck/icon_upload_default.png) no-repeat;
background-size: 100% 100%
}

以上代碼在Android真機和瀏覽器中都能使用，文件路徑基於ionic.app.min.css的位置