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