利用Angular2 + Ionic3开发IOS应用实例教程

首先，Angular2+Ionic3是非常流行的构建移动应用的技术栈，它能够快速搭建高质量的跨平台移动应用，特别适合开发一些性能较高的IOS应用。以下是开发IOS应用的完整攻略：

1. 确保电脑已安装必要的软件

在开始开发之前，你必须保证你的电脑上已经安装了最新版的Node.js、NPM和Ionic CLI。在安装这些软件之前，你可能需要先在你的电脑上安装一些必要的依赖，例如Git、Python和Visual Studio等。

2. 创建一个新的Ionic App

在开始开发之前，你需要创建一个新的Ionic应用程序。通过下面的命令行创建一个新应用程序：

ionic start myapp

这将创建一个名为“myapp”的应用程序，它将包含所有必要的文件和依赖项以开始开发。

3. 安装Angular Material和Angular CDK

为了能够使用Angular Material和Angular CDK，你需要安装它们的依赖项。通过下面的命令行安装它们：

npm install @angular/material @angular/cdk --save

这将安装Angular Material和Angular CDK，并将它们添加到你的项目中。

4. 配置Ionic应用程序

现在可以开始配置Ionic应用程序来使用Angular Material和Angular CDK。打开在步骤2中创建的Ionic App，然后打开 app.module.ts 文件并 更新 imports 导入如下模块：

// Import Angular CDK and Angular Material
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatPaginatorModule } from '@angular/material/paginator';

// Import the AppComponent
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatPaginatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里我们导入了BrowserModule、BrowserAnimationsModule、MatButtonModule和MatPaginatorModule，它们是Angular Material和CDK的一部分，用于创建Angular2+Ionic3 IOS应用的用户界面。

5. 渲染一个Angular Material Button

现在可以开始渲染一个Angular Material按钮并将它添加到你的IOS应用程序。

<!-- app.component.html -->
<button mat-button>
  点我！
</button>

这里我们使用了 mat-button 指令以创建一个简单的按钮。在渲染这个按钮时，Ionic使用了Angular Material来呈现它，并使用Angular CDK来处理不同的tap和touch事件。

6. 创建Angular2+Ionic3 pagination（分页）

发现输出的数据过多，并希望使用Ionic3的默认分页方式(Pagination)解决这个问题：

npm install ngx-pagination --save

打开目标组件（如：home.page.ts）并导入Pagination需要的模块：

import { Component } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { HeroService } from '../hero.service';

import { PageEvent } from '@angular/material/paginator';
import {MatPaginatorModule} from '@angular/material/paginator';

然后在 @Component 装饰器的selector中添加一个 app-root 选择器。打开首页页面的HTML模板文件（home.page.html）并在需要分页显示的列表头部处添加一个Angular Material Pagination组件，在 *ngFor 的...后面加上 | paginate: { id: 'pt1', itemsPerPage: 10, currentPage: p } 来使用ngx-pagination分页处理器：

<mat-paginator [length]="page.totalItems" [pageIndex]="page.pageNumber" [pageSize]="page.size"
           (page)="pageChanged($event)" showFirstLastButtons></mat-paginator>
    <ul>
      <li *ngFor="let hero of heroes$ | paginate: { id: 'pt1', itemsPerPage: 10, currentPage: p }" >
        {{ hero.id }} - {{ hero.name }}
      </li>
    </ul>

在pageChanged($event)方法中对分页后的数据处理：

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  heroes$: Observable<Hero[]>;
  page: any;
  currentPage = 1;
  totalSize = 100;
  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.heroes$ = this.heroService.getHeroes();
    this.heroes$.subscribe( res => {
      this.page = {
        totalItems: res.length,//总共项数
        pageNumber: this.currentPage,//当前页
        size: 10//每页size个元素
      };
    });
  }

  pageChanged(event) {
    console.log('event：', event);
    this.currentPage = event.pageIndex + 1;
  }
}

这样在打开首页页面时，将会看到一个分页器。点击分页器中的任意页码应该就可以看到不同的英雄列表了。

这就是用Angular2+Ionic3框架创建基于Ios的应用程序的攻略，希望这里的示例能够帮助到你理解Ionic框架的用法和优势。