ionic-项目目录结构介绍

截图

运行ionic start myIonic blank 后,的到的空项目.

运行ionic start myIonic tabs 后,的到的tabs项目.

文字介绍

//编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
hooks           
    --after_prepare

//安装cordova的各种插件
plugins 

//存放scss文件，发布时编译这个目录下的文件输出到www的css目录中
scss            
    --ionic.app.scss

//项目的开发目录，页面、样式、脚本和图片都放在这个目录下
www             

bower.json      //存放bower安装组件信息

config.xml      //Ionic的配置文件 ⱃ可以配置app的id，名称、描述起始页和一起其他配置

gulpfile.js     //gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等

ionic.project   //Ionic的项目文件可以配置Ionic命令中livereload的监控文件

package.json    //存放npm安装组件信息

详细截图

plugin 目录

www

config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.myproject761479" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>myProject</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="you@example.com" href="http://example.com.com/">
      Your Name Here
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

ionic.project

{
  "name": "myProject",
  "app_id": ""
}

修改监听范围

{
  "name": "myProject",
  "app_id": "",
  "watchPatterns": [
        "www/js/*",
        "www/js/*/*",
        "www/*.html",
        "www/templates/*.html",
        "www/css/*.css"
   ]
}

功能

进入项目目录下,执行ionic serve, 就会创建web站点, 自动打开项目的网址.
ionic会监测www文件夹的文件是否发生变化, 从而实时用websocket通知浏览器进行刷新, 不需要我们手动刷新.