ionic2入门教程（四）解读目录结构

ionic2入门教程（四）解读目录结构

系列教程看这里
Ionic2入门教程（一）安装和环境配置
Ionic2入门教程（二）进阶配置：Android打包
ionic2入门教程（三）高仿网易公开课（1）

0、新建一个ionic项目

这一步创建了一个名为startProoject的blank项目，运行起来的话只有一个home页面，是官方提供的最简洁的ionic项目。

ionic start startProject blank

你们也可以试着将blank换成tabs和sidemenu，如下图所示

1、VSCode编辑器打开

目录结构如下，（第一眼看到这样的目录结构，我是惊呆了的，满脑子问号，带我的导师和我说，这些目录结构一开始不理解其实也没关系，多用用慢慢就知道到了。但是大概有个印象还是会好很多，所以这里给大家分析一下每个文件夹的内容和作用吧。）

按顺序来吧

1.hooks

hooks文件夹包含了在应用程序的生命周期事件中自动执行的操作，大多数时候你不需要修改其中的任何文件。

2.node_modules & package.json

node_modules文件夹是当你执行 npm install 命令后自动生成的，里面安装了所需要的npm依赖项，这一步在你start一个Ionic项目时已经自动执行了。这个命令会读取package.json中所以需要被安装的包，是一个典型的Node.js文件

3.resources

是一个Ionic文件夹，可以包含你的app图标和启动画面。

4.src

这是最重要的一个文件夹，你几乎所有的工作都是在这个文件夹中完成的，它实际上就是包含了Angular代码的文件夹。

5.www

www文件夹是自动生成的，当你在你的浏览器中运行ionic预览时，它包含你当前的构建。记住一定不要在这里修改代码。

6.config.xml

config.xml用于使用Ionic项目创建原生项目时。
如果您需要本机应用程序的特殊权限或更改其他内容，它将在这个文件中设置。

7.ionic.config.json

包含了一些关于你的项目的基本信息，如果你将你的应用上传至Ionic.io platform，它就会被使用。

8.tsconfig.json, tslint.json

与TypeScript以及它如何编译有关。基本上不用去管。

2、重要的src

1.src/index.html

index.html 是 Ionic应用的主入口文件，其目的是设置脚本和CSS引导，然后开始运行我们的应用程序。这是我们项目的加载入口：

根组件，应用加载入口

<ion-app></ion-app>

主要的脚本引用，自动生成

  <script src="cordova.js"></script>
  <script src="build/polyfills.js"></script>
  <script src="build/vendor.js"></script>
  <script src="build/main.js"></script>

2.src/app

入口文件夹
/app.component.ts
应用入口文件，每个应用程序都有一个根组件，用于控制应用程序的其余部分。将HomePage页面赋值给rootpage变量，在ap.html中使用这个变量。

/app/app.html
设置根页面：

<ion-nav [root]="rootPage"></ion-nav>

3.src/pages

放置我们生成的页面

4.src/assets

存放icon、img等资源

5.src/resources

包含你的app图标和启动画面，分安卓和ios

6.src/theme/variables.scss

覆盖默认样式的位置，记住哦~