创建Ionic项目

1.安装Ionic

Ionic 2 应用程序主要使用命令行进行创建和开发，且用cordova来创建原生App。这就意味着需要安装一些开发所使用的工具。

2.Ionic 命名行使用和Cordova

为了创建Ionic 2 工程，你需要安装最新版本CLI和Cordova，在安装这些工具之前你需要安装最近版本的node.js，下载安装nodejs 6(点击打开链接)或者较大的版本,然后安装Ionic 2 和 Cordova 创建原生App的开发环境。

$npm install -g ionic cordova

你需要在命令前增加sudo来安装全局使用的工具

这些命令完成后，即可创建你的第一个Ionic 应用：

$ionic start cutePuppyPics --v2

start： 告诉CLI创建一个新的应用

cutePuppyPics：项目中应用程序的名字和目录

--v2：告诉CLI想创建的是2.0的项目

如果教程的模板不是你想要的模板，Ionic还有许多可用的模板：

tab：一个简单的3个tab的布局

sidemenu：在边上有滑动菜单的布局

blank： 一个带有简单页面的空白启动页

tutorial： 具有向导的应用

如果你在运行 $Ionic start MyIonic2Project --v2 没有明确指定所创建的模板，缺省将使用具有Tab的模板。

如果你想使用ionic 1 可以忽略 --v2.然后用cd命令切换到刚才所创建的目录cutePuppyPics中，运行ionic serve命令可在浏览器中测试你的应用程序是否正确。

$cd cutePuppyPics 

$ionic serve

3.项目结构

让我们现在来完成Ionic 应用程序的解析。在我们所创建的文件夹里面，我们有一个典型的cordova项目的结构，在里面我们能安装原生插件，且可创建具有平台特征的文件。

./src/index.html

尽管它的目的是建立script和css的引用，和引导和启动我们的应用，但是src/index.html是项目的主要入口。我们将不会花费太多的时间在这个文件中。

为了你的应用程序的功能，ionic 将在你的html最后哦给你查找<ion-app>标签，如下所示:

<ion-app></ion-app>

并且在底部附近有以下脚本：

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

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

build/main.js 是包含ionic,Angular和你的应用程序脚本的链接文件

cordova.js 是在本地开发环境中将是404，因为它是在Cordova创建进程中注入到你的项目中的。

./src/

在./src/中我们找到原始的未压缩到的代码，在这Ionic 2应用的大部分工作将发生。当我们运行ionic serve的时候，在/src目录里面，文件将本翻译为目前浏览器可理解的javascript(目前为ES5).这就意味着我们可以用typescript进行上层构建，但是向下编译成旧的浏览器需要的形式。

./src/app/app.module.ts是我们app的入口

在文件的顶部我们将看到：

@NgModule({

declarations:[MyApp,HelloIonicPage,ItemDetailsPage,ListPage],

imports:[IonicModule.forRoot(MyApp)],

bootstrap:[IonicApp],

entryComponents:[MyApp,HelloIonicPage,ItemDetailsPage,ListPage],

providers:[]

})

exportclassAppModule{}

每个应用都有一个根模块，这个模块控制着应用程序的其它模块。它和ionic 1和angular 1的ng-app非常类似。这也有使用ionicBootstrap启动我们应用的boostrap.

在这个模块中，我们将设置我们的根组件为MyApp.在/src/app/app.component.ts.这是在我们App中加载的第一个组件，且对其它加载到里面的组件完全是空的。

在app.component.ts中，我们设置模板为src/app/app.html,接下来我们看下这个文件：

./src/app/app.html

<ion-menu[content]="content">

<ion-header>

<ion-toolbar>

<ion-title>Pages</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-list>

<buttonion-item*ngFor="let p of pages"(click)="openPage(p)"> {{p.title}} </button>

</ion-list>

</ion-content>

</ion-menu>

<ion-navid="nav"[root]="rootPage"#contentswipeBackEnabled="false"></ion-nav>

  在这个模板中，我们将创建一个ion-menu功能来创建一个侧边菜单，且应用ion-nav组件来扮演一个主要的内容区域。ion-menu的content属性被绑定到来自于ion-nav的本地变量content,故这应该含有动画。

  让我们看看如何创建更多的页面来执行导航。

4. 增加页面

现在我们对一个Ionic 2应用的布局有一个基本的理解，接下来看一下在我们的应用中创建和导航页面。

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

注意绑定的root属性。这个设置是关键的一步，对于ion-nav组件来说这个是"根"页面，当ion-nav加载时，通过变量rootpage应用的页面将是根页面。

在/src/app/app.component.ts中，在其构造器中，myApp明确这些：

我们看到rootPage被设置为HelloIonicPage,所以在导航控制器中，HelloIonicPage将是第一个被加载的页面。让我们仔细看一下。

创建一个页面

现在我们来查看我们引入的HelloIonicPage.在src/pages/hello-ionic/文件夹中，进入并打开hello-ionic.ts。你也许注意到每一个页面有自己名字命名的文件夹，在每一个文件夹里面，我们将看到一个.html和具有同名的.scss文件。例如，在hello-ionic/我们将看到hello-ionic.ts,hello-ionic.html和hello-ionic.scss。尽管这些模式不是必须的，但是它能将相关的东西组织在一起是很有帮助的。

如下，我们将看到HelloIonicPage类，这将创建一个页面（带有已提供的所有Ionic指令的Angular组件）将被通过使用Ionic的导航系统被加载。需要注意的是由于页面是动态被加载的，所以它没有选择器。

所有页面都包含一个类，且所有关联的模板将被编译。让我查看src/pages/hello-ionic/hello-ionic.html,这个页面的模板文件为：

在这个页面中<ion-navabar>是作为导航条的一个模板。由于我们导航到这一页面，导航条的按钮和标题作为页面传递的一部分传递。模板中其余的部分是标准的Ionic代码创建内容区域和打印欢迎信息。

创建其它页面

为了创建其它页面，我们只需要确保我们在导航栏所展示的东西确保配置正确，除此之外，我们不必要做其它更多的工作。

让我们来查看/src/pages/list/lists.ts.在里面我们将看到一个新的页面被定义：

以上代码将创建一个包含许多条目的列表页面。

总之，这同我们之前看到的HelloIonicPage页面一样，非常简单。在下一章节，我们将学习如何导航到所创建的页面。

5.页面导航

回顾上一章节，在ListPage类里面有一个功能，如下：

你可能注意到，里面涉及到ItemDetailsPage.这是一个被引导启动器所包含的页面，我们从/src/pages/list/list.ts引入，所以我们可以使用：

在保存这个文件后，你将注意到ionic serve进程将重新编译带有变化的应用，且重新加载到浏览器。让我们回访一下在浏览器中的应用，你将可以导航到明细页。注意menu-toggle被返回按钮所替代。这是遵照Ionic的原生风格，但是它是可以配置的。

它是如何工作的？

在Ionic 2 中，导航类似一个简单的栈，我们可以push一个页面到栈的顶端，它引导我们在应用中向前且展示了回退按钮。为了返回，我们弹出页面。由于我们在构造器中设置了this.navCtrl,我们能调用this.navCtrl.push(),且可传入我们想导航的页面。我们也可以传递一个含有我们想导航页面的包含数据的对象。虽然push一个页面来导航是简单的，但是Ionic的导航系统是灵活的。查看导航器的文档获取更多有关导航器的高级应用。

当你看到这的时候 ，Ionic 2 工作的时候与Ionic 1有一些不同。代替URLs来导航，我们使用他来确保我们能总是返回到一个页面。这就意味着我们不局限于用href来导航，但是在我们需要的时候我们仍旧可以使用URLs导航到新的页面。