精华 3.Ionic的项目结构
发布于 1年前 作者 qmarliu 1961 次浏览 来自 分享

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文件。

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

回到顶部