IONIC2 踩坑记-(一)官方教程

一.创建项目

1.用模板创建项目

$ ionic start MyIonic2Project tutorial --v2

ionic start {项目名} {模板(tutorial) } {版本(–v2)}

2.在浏览器中查看APP
进入项目目录,运行ionic serve

$ cd MyIonic2Project/
$ ionic serve

二.目录结构

进入目录可以看到ionic采用的是典型的cordova项目结构,在这里能放原生插件,和存放平台(ios,android..)差异化文件.

1 ./src/index.html

app的主入口,里面配置了要用到的script及css,里面能找到一个<ion-app></ion-app>的标签,它是将来APP会显示的地方.
接近底部的地方引入了核心js文件

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

2 ./src/

里面放的是没有经过编译的原生代码,我们写的代码也大多在这里,当运行ionic serve时原生代码会生成浏览器支持语言版本(目前是ES5),这也意味着我们能用高版本来写代码.

src/app/app.module.ts

app的入口,在其顶部有以下代码:

...
import { MyApp } from './app.component';//导入MyApp
...
@NgModule({
  declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
  imports: [IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
  providers: []
})
export class AppModule {}

每个APP都有一个根模块(root module)来控制其余代码,在这个模块中,我们指定从app.component.ts导入的MyApp为根组件,根组件将会是在APP启动完成是第一个显示的组件,它通常是一个空壳还容纳其它组件.

./src/app/app.html

@Component({
  templateUrl: 'app.html'
})

在app.component.ts中指定app.html为模板文件

<ion-menu [content]="content">
  <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-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在这个模板文件中,设置了一个ion-menu作为侧滑菜单,然后设置了一个ion-nav作为主内容区域,侧滑菜单绑定到了content,所以侧滑菜单大小由content的大小决定.

三.增加页面

在src/app/app.html的底部有这样一行代码:

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

通过[root]属性绑定显示的组件为rootPage,也就是说当ion-nav加载完成时会映射到rootPage.
在src/app/app.component.ts在MyApp的构造中指定了rootPage为HelloIonicPage

...
import {HelloIonicPage} from '../pages/hello-ionic/hello-ionic';
...

export class MyApp {
  ...

  // make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;
  pages: Array<{title: string, component: any}>;

    constructor(
      private platform: Platform,
      private menu: MenuController
    ) {
    ...
  }

  ...
}

可以看到rootPage设置为HelloIonicPage,所以HelloIonicPage将会是第一个页面.

创建页面

接下来,看看我们导入的HelloIonicPage,打开hello-ionic.ts文件:

import {Component} from '@angular/core';

@Component({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {}

在这里利用Angular已有的命令创建了一个Angular组件,因为这个页面会被动态加载,所 以没有selector.每个页面都有一个类和关联的模板,接下来看看这个页面关联的模板文件src/pages/hello-ionic/hello-ionic.html:

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding class="getting-started">

  <h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button primary menuToggle>Toggle Menu</button>
  </p>

</ion-content>