1.安装、启动、项目结构

May 6, 2018

安装

https://ionicframework.com/getting-started

安装ionic

ionic start ionicApp tabs

初始化App,名字ionicApp,带tabs。

ionic start ionicApp tabs

1). start: 告诉CLI创建一个新的app 2). ionicApp: 生成该名字的目录并且作为app的名字 3). 自带的几种模板:

1.tabs:简单的3个tab布局 2.sidemenu:侧滑布局 3.blank:仅创建一个单页面 4.tutorial: a guided starter project

初始化提供了几种风格

启动

cd到目录, 启动: ionic serve

项目结构

通过剖析一个ionic app。可以看到,在创建的文件夹内部，我们有一个典型的Cordova项目结构，我们可以在其中安装原生插件，并创建特定于平台的项目文件。

./src/index.html

应用程序的主要入口点，但它的目的是设置script以及CSS包括bootstrap等，或者开始运行我们的应用程序。我们不会把大部分时间花在这个文件上。

./src/

src是主要工作区域。当运行ionic serve,src/中的代码会被转化为浏览器可以识别的正确的代码,目前是ES5。这意味我们可以使用typescript工作，然后但是可以将其编译成浏览器需要的较老的Javascript形式。

src/app/app.module.ts是程序的入口点。

@NgModule({
  declarations: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
  providers: []
})
export class AppModule {}

每个应用程序都有一个根本模块，它主要控制应用程序的其余部分。这与Ionic 1和AngularJS的ng-app非常相似。这也是我们将ionicBootstrap引导我们的应用程序的地方。

./src/app/app.html

src/app/app.html 是app的main template .

 <ion-nav id="nav" [root]="rootPage" #nav swipeBackEnabled="false"></ion-nav>
<ion-menu [content]="nav">
  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

在此模板中，我们设置了一个ion-menu作为侧面菜单，然后设置一个ion-nav组件作为主要内容区域。 ion-menu的[content]属性绑定到我们的ion-nav的局部变量nav，所以它知道它应该在哪里做动画。

原文链接:https://ionicframework.com/docs/intro/tutorial/project-structure/