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的位置