ionic项目结构

接下来我们就要通过分析ionic项目结构，从而正式进入ionic项目中了，在此之前，大家得先掌握基础的web前端开发知识：html+css+js，如果没有基础或者基础不牢，建议大家去菜鸟教程或者w3school学习一下，学完html+css+js之后，还可以学习一下angular js，掌握了angular js的语法后使用ionic将事半功倍。

注：angular js已经发布了4.0版本，菜鸟教程还停留在1和2，所以上面给的链接是官网的，大家也可以去angular的中文社区，http://www.angularjs.cn/及中文文档https://angular.cn/

注：本人走过的一点弯路的总结：在进行学习的时候，大家没有必要一开始强迫自己把所有知识点都记住，然后再去开发，这是极其不高效的！
举个例子，学html5的时候，想一次性就把所有标签都给记住是不现实的，就算真的花费时间去做到了，可能在实际开发时仍然无法具体而灵活地使用它，这就很亏了。
而对于开发者来说，最快的成长路径就是实际开发一个项目，看再多遍背再多遍，都不如实际开发中使用一次。
所以我们要做的，就是快速地浏览、学习一遍，知道html5能做什么，之后就可以直接进行实际开发。
当开发遇到实际需求的时候，比如，在页面的某个地方需要插入一张图片，因为我们看过一遍，所以我们知道html本身就有插入图片的标签。去菜鸟教程一搜，一看，一用，立马就连用法都记住了，甚至还会连带着掌握路径的概念。

接下来正式讲一下ionic项目结构：

注：在剖析项目结构的时候，希望大家能打开自己之前start出来的firstApp项目，并跟着本文档不断地打开目录与文件。
不然只看本文档的话，可能会非常非常的晕。

./根目录

firstApp 根目录.png

注：这里我使用的编辑器是Visual Studio Code，对于编辑器的选择，大家用自己习惯的就好。如果还没有找到习惯的，我推荐这款编辑器。Linux和Windows都可以去VS Code官网直接下载安装）

上图便是我们之前建立出来的firstApp项目的根目录（可能有微微的不同，不用太在意）

根目录中除了各个文件夹，主要是一些配置文件，这里提一下这个package.json

随着项目的进行，我们可能还会通过npm再给项目安装一些别的软件包，那如果有别的小伙伴在之后加进来，难道我们还要让他们一个个地安装吗？
当然不是，那样不仅麻烦，而且太容易出错了。
这便是package.json的作用了。

package.json是描述依赖包的json文件
当我们在开发时，想给项目添加一些必要的包，只需要执行 npm install <name> --save ，就能将这个包名及对应的版本添加到 package.json中。

注：这里ionic在start一个项目的时候自动帮我们创建并更新了package.json

而之后的小伙伴，只需要在package.json所在的目录中，打开命令行执行 npm install 或者 cnpm install，就会自动解析package.json ，并将其中提到的依赖包都安装下来，项目就能正常跑起来了。

注：还是那个观点，大家没必要第一次看文档就试图把它记住，在之后的项目开发中，大家结合文档使用一次，立刻就能掌握了。
而且这里关于添加依赖时还有一个npm install <name> --save -dev，具体用法与不同大家可以在之后用到的时候再百度一下。

./src/

在src目录的内部，便是原始的，未编译的代码，也是我们重点剖析的对象。
这就是Ionic应用程序的大部分工作。
当我们运行ionic serve，我们的代码里的src/会转换成浏览器能正确理解的JavaScript版本。

src.png

src目录中app目录一般存放的是项目的入口与切入点
assets目录存放的是项目所需的各类资源
pages目录存放的是各个页面
theme目录则是样式调整

./src/index.html

src/index.html是应用程序的主要入口点，其目的是设置脚本，CSS和引导，或开始运行我们的应用程序。
我们不会花太多时间在这个文件中。
不过也有值得注意的地方：

index.html.png

<ion-app></ion-app>附近（上下）有两个较为重要的脚本：

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

cordova.js 将在本地开发期间404，因为它在Cordova的构建过程中被注入到您的项目中。
build/main.js 是一个包含Ionic，Angular和您的应用程序JavaScript的连接文件。

src/app/app.module.ts 是我们的应用程序的切入点。

app&pages.png

在文件中，我们应该看到：

app.module.ts.detail.png

每个应用程序都有一个根本的模块，它可以控制其余的应用程序。这也是我们引导我们的应用程序的地方。
在本模块中，我们将根组件设置为MyApp src/app/app.component.ts。这是在我们的应用程序中加载的第一个组件，通常它是一个空的shell，可以加载其他组件。在app.component.ts，我们正在设置我们的模板src/app/app.html，所以让我们来看看。

注：这里调用的其他四个组件AboutPage，ContactPage，HomePage，Tabspage其实是与上图中pages目录中的about，contact，home，tabs一一对应的。
至于具体的对应方式（或者说控制方式），请不要着急，我们会在之后的学习中详细讲解。

./src/app/app.html

在这个模板中，我们设置一个ion-nav组件作为主要内容区域。看起来只有短短的一行代码，但却是必不可少的。

app.html.png

接下来，我们来看看如何创建更多的页面并执行基本的导航。

添加页面

我们对一个Ionic应用程序的布局有一个基本的了解，现在我们来看看如何在项目中创建和导航到页面的过程。

首先还是./src/app/app.html

app.html.png

注意[root]属性绑定。这将为ion-nav组件基本上设置第一个或“根”页面。当ion-nav加载时，由变量引用的部分rootPage将是根页面。

在其中src/app/app.component.ts，MyApp组件在其构造函数中指定了这一点

app.component.ts.png

第12行，rootPage:any = TabsPage;这就指定了rootPage是TabsPage。
那TabsPage是怎么来的呢？
将目光上移，我们注意到：
第6行，import { TabsPage } from '../pages/tabs/tabs';
原来Tabs是从./src/pages/tabs目录中的tabs.ts导入进来的
那我们先将目光转到与tabs.ts绑定的tabs.html

tabs.html.png

与app.html，也是[root]属性绑定，且因为它有切换作用，所以定义了三个[root]属性绑定。
那我们再看看tabs.ts是怎么样的。

tabs.ts.png

怎么样？是不是似曾相识？这写法和之前的app.component.ts非常相近

12,13,14行定义了三个页面，HomePage，AboutPage，ContactPage
而这三个页面正是在第3,4,5行引入的./src/pages目录下其他几个文件夹下的ts文件。

现在来简单梳理一下，当我们ionic serve出一个项目后，我们先进入的是app.html，然后因为[root]属性绑定，加载了tabs.html页面，而在tabs.html页面中的[root]属性绑定，导致我们点击Home，About，Contact就会加载相应的HomePage，AboutPage，ContactPage页面。

注1：细心的同学可能已经发现app.html和tabs.html写法很像，app.component.ts和tabs.ts的写法很像，实际上不止如此

pages_detail.png

拉开pages里的各个目录，你会发现他们的结构都是一样的，点进去会发现代码也是惊人的相似
这就是我们之后要学的组件的概念，学会组件之后，再回顾今天的内容，基本就很清楚明了了。
而ionic之所以简单易上手，也是因为它这一特性。
等理解了组件的概念和用法，基本就可以开始上手开发了。

注2：这一部分大家看到一连串的代码可能会有点晕，不过不要急。
晕除了你还没理解组件的概念之外，也因为你还不懂它的语法。
上图中带.ts后缀的文件，其实是typescript文件。TypeScript是JavaScript的一个超集，只是扩展了JavaScript的语法，最终会被自动编译成为JavaScript。
这里给两个链接，大家在学完js后可以去快速浏览一遍，之后结合项目，很快就能读懂了

• TypeScript 入门教程
• TypeScript 中文手册

带.scss后缀的是SCSS，是Sass的一种语法，同样，最终也是自动编译成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。
这里给个链接，大家在学完css后可以去快速浏览一遍，之后结合项目，很快就能读懂了

• Sass快速入门