3.Ionic的项目结构

Hybird HTML5 App(移动应用开发)之3.Ionic的项目结构

 

前面使用命令ionic start myapp下载了默认的Ionic应用程序，下面我们打开应用程序项目，来分析一下Ionic项目的结构。项目结构图如下：

 

我们来大致了解一下每个文件夹的作用

1、hooks：文件夹是伴随Cordova的安装自动生成的文件夹，该文件夹有脚本可以定制Cordova命令。一般情况下，不对该文件夹中的文件进行更改。

2、plugins：用于放置Ionic扩展文件的文件夹。比如升级或者扩展Ionic的时候。为了安装这些扩展文件，你需要确保安装了Git。通常不对该文件夹进行改动。

3、.bowerrc：Ionic偶尔会使用Bower去安装一些组件，所以bowerrc文件产生了，通常不对该文件进行修改

4、.gitignore：当使用Git和GitHub追踪项目，.gitignore可以用来指定忽略文件。如果你不想特定的文件夹和文件被上传到Git仓库（repository)，你可以使用gitignore防止文件转移。

5、config.xml：config.xml是另外一个Cordova安装文档,通常也不需要修改。

6、gulpfile.js：控制着允许Ionic自动重载浏览器的自动操作。同时，它还负责其他事情，比如：处理文件。

7、package.json：package.json文件在许多Nodejs项目里都会出现， 它定义了这个项目所需要的各种模块，以及项目的配置信息，比如名称、版本、许可证等元数据 。 Node和Gulp工具可以依据文件中的项目需求和配置信息，去履行责任。一般不修改该文件。

 

最后、详细说明一下scss和www这两个文件夹的作用。

scss文件夹：如果在Ionic项目，想要使用CSS的预处理语言SASS来修改应用程序的样式，那么你可以在scss文件夹下的相应文件覆盖Ionic的默认值。如果你熟悉SASS语言，你可以在相应scss文件添加SASS命令，或者更改目录结构，增加子文件夹。如果你想在项目中使用SASS去工作，你需要首先运行Ionic SASS 命令。

www文件夹：先来看看www文件夹的内容结构：

 

1、css：可以在此文件夹中的样式文件中编写自己的CSS，从而改变Ionic应用程序的默认样式。

2、img：用于存放图片，图片可运用在所建立的项目中。

3、js：用于放置js文件的文件夹，其中以AngularJS文件为主。它包括三个文件：

a)   app.js：通过控制器和指令加载angularJS文件的主要应用程序文件。

b)   Controller.js：可用于任何类型的JavaScript文件，可被添加到应用程序的不同部分。

c)   services.js:：services.js包含了通用的数据，数据将运用在设计的应用程序当中。

4、lib：用于集中存放项目需要用到的库文件和其他项目资源，比如AngularJS, CSS，SCSS相关等。创建的应用程序能够访问这些库文件和资源。其中，在这个文件夹下引用的AngularJS文件，不一定是最新版本的，一般情况下，不建议修改或更新这些文件。

5、templates：放置AngularJS模板文件的地方，设计的应用程序会采用里面的模板，在你的应用程序的页面展现出来。你也可以在这个文件夹内创建子文件夹，添加你自己的模板。

6、index.html：index.html文件是应用程序的核心文件，文件将被Ionic载入浏览器。这个文件看起来就像是普通的HTML 或者AngularJS文件。

 

今天先写到这里，明天继续，详细内容可点击链接进入云盘查看。