在本教程系列中，您将学习如何使用Ionic框架创建移动应用程序。 Ionic使用Angular编写组件并创建移动应用程序。

在本系列的整个过程中，您将使用Ionic框架创建一个简单的Task Manager移动应用程序。

从官方文档中：

Ionic是美观，免费和开源的移动SDK，可轻松开发本机和渐进式Web应用程序。

入门

让我们开始使用Node Package Manager（npm）安装Ionic。 在安装Ionic之前，请确保已在系统上安装了Node.js

npm install -g cordova ionic

安装了Ionic之后，使用以下命令创建一个新的Ionic空白项目：

ionic start angular-ionic blank

您将在浏览器中测试Ionic应用程序，直到完成。 完成后，您将在Android设备上测试该应用程序。

输入以下命令以从浏览器运行该应用程序。

ionic serve

将浏览器指向http：// localhost：8100 /，然后应该运行Ionic项目。

这是项目结构的外观：

在Ionic项目中，您有一个名为src/app的文件夹。 在app文件夹内，您将找到一个名为app.module.ts的文件，其中定义了根模块AppModule 。

在imports部分内的app.module.ts文件中，您可以看到已使用以下代码定义了根组件：

IonicModule.forRoot(MyApp)

MyApp已经从进口app.component地方已经设置了rootPage为HomePage ，这表明了应用程序加载时。

创建列表任务组件

让我们创建一个视图以列出添加的任务。 在src/pages文件夹内，为名为list的list组件创建另一个文件夹。

在list文件夹中，创建一个名为list.component.html文件，该文件将作为组件模板。 将以下代码添加到list.component.html文件：

<ion-header><ion-navbar><ion-title>Ionic Task List</ion-title></ion-navbar>
</ion-header><ion-content><ion-list><ion-item><ion-label>Task 1 </ion-label><ion-checkbox></ion-checkbox></ion-item><ion-item><ion-label>Task 2</ion-label><ion-checkbox></ion-checkbox></ion-item><ion-item><ion-label>Task 3 </ion-label><ion-checkbox></ion-checkbox></ion-item></ion-list>
</ion-content>

如上面的代码所示，您已经使用了特定于Ionic的标签来创建元素。 您可以参考Ionic官方文档以获取可在创建模板时使用的Ionic组件API的列表。

要控制上面创建的模板，您需要一个控制器类。 创建一个名为list.component.ts的文件并定义ListPage类。 外观如下：

import { Component } from '@angular/core';@Component({selector: 'page-list',templateUrl: 'list.component.html'
})
export class ListPage {constructor() {}}

您已经使用@Component装饰器定义了任务列表组件。 在@Component装饰器中，已使用selector键定义了选择selector并使用了组件的templateUrl键定义了templateUrl 。

应用程序需要知道上面创建的组件存在，因此您需要将其导入到根模块中。

将ListPage类导入src/app/app.module.ts文件中，并将其包括在declarations和entryComponents列表中。 这是修改后的app.module.ts文件的外观：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ListPage } from '../pages/list/list.component';import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';@NgModule({declarations: [MyApp,HomePage,ListPage],imports: [BrowserModule,IonicModule.forRoot(MyApp)],bootstrap: [IonicApp],entryComponents: [MyApp,HomePage,ListPage],providers: [StatusBar,SplashScreen,{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

当应用程序加载时，您希望显示新创建的List组件而不是HomePage 。 因此，修改rootPage里面定义app.component.ts文件。

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list.component';
@Component({templateUrl: 'app.html'
})
export class MyApp {rootPage:any = ListPage;constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {platform.ready().then(() => {statusBar.styleDefault();splashScreen.hide();});}
}

如上面的代码所示，导入的ListPage里面app.component.ts文件，并改变了rootPage到ListPage ，而不是HomePage 。

保存以上更改，并使用以下命令启动Ionic服务器：

ionic serve

您应该在http：// localhost：8100 /上运行移动应用程序。

创建添加任务组件

在列表屏幕中，您将添加一个链接以将项目添加到列表中。 让我们在屏幕右侧放置一个添加图标。 在list.component.html文件中，添加以下内容以添加加号图标。

<ion-fab top right><button ion-fab mini><ion-icon name="add"></ion-icon></button>
</ion-fab>

这是修改后的list.component.html文件的外观：

<ion-header><ion-navbar><ion-title text-center>Ionic Task Manager</ion-title></ion-navbar></ion-header><ion-content padding><ion-fab top right><button ion-fab mini><ion-icon name="add"></ion-icon></button></ion-fab><ion-list><ion-item><ion-label>Task 1 </ion-label><ion-checkbox></ion-checkbox></ion-item><ion-item><ion-label>Task 2</ion-label><ion-checkbox></ion-checkbox></ion-item><ion-item><ion-label>Task 3 </ion-label><ion-checkbox></ion-checkbox></ion-item></ion-list></ion-content>

保存以上更改并重新启动服务器，您将在屏幕上显示加号图标。

当用户单击加号图标时，您需要显示屏幕以添加新任务。 因此，让我们创建另一个名为“ Add组件的组件。

在pages文件夹内创建一个名为add的文件夹。 在add文件夹中，创建一个名为add.component.html文件，并添加以下代码：

<ion-header><ion-navbar><ion-title text-center>Ionic Task Manager</ion-title></ion-navbar></ion-header><ion-content padding><ion-fab top right><button ion-fab mini> <ion-icon name="arrow-back"></ion-icon></button></ion-fab><ion-list><ion-item><ion-label color="primary" floating>Enter task </ion-label><ion-input></ion-input></ion-item></ion-list><button ion-button round>Add</button></ion-content>

上面的代码显示添加新任务的屏幕。

用户单击列表屏幕上的加号图标时，需要显示以上屏幕。 因此，您将其显示为模式弹出窗口。

创建一个名为add.component.ts的文件，并添加以下代码：

import { Component } from '@angular/core';@Component({selector: 'page-add',templateUrl: 'add.component.html'
})
export class AddPage {constructor() {}}

如上面的代码所示，您通过指定selector和templateUrl创建了Add组件。

通过将组件导入src/app文件夹内的app.module.ts文件来注册该组件。 这是修改后的app.module.ts文件的外观：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ListPage } from '../pages/list/list.component';
import { AddPage } from '../pages/add/add.component';import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';@NgModule({declarations: [MyApp,HomePage,ListPage,AddPage],imports: [BrowserModule,IonicModule.forRoot(MyApp)],bootstrap: [IonicApp],entryComponents: [MyApp,HomePage,ListPage,AddPage],providers: [StatusBar,SplashScreen,{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

要在模式弹出窗口中显示AddPage组件，您需要导入ionic-angular提供的ModalController 。 进口ModalController在list.component.ts 。

import { ModalController } from 'ionic-angular';

创建一个名为presentAddModal的方法，并使用导入的ModalController创建一个模态。 这是list.component.ts文件的外观：

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { AddPage } from '../add/add.component';@Component({selector: 'page-list',templateUrl: 'list.component.html'
})
export class ListPage {constructor(public modalCtrl: ModalController) {}presentAddModal() {let addModal = this.modalCtrl.create(AddPage);addModal.present();}}

在list.component.html的添加按钮上注册click事件。

<button ion-fab mini (click)="presentAddModal()"><ion-icon name="add"></ion-icon></button>

保存以上更改，然后重新启动Ionic服务器。 单击列表页面中的添加图标，您将进入添加任务页面。

对于添加任务屏幕上的后退按钮，您需要在add.component.ts文件中单击的按钮上添加一个dismiss方法。

<button ion-fab mini (click)="dismiss()"> <ion-icon name="arrow-back"></ion-icon></button>

导入ViewController模块，并调用dismiss方法返回到列表屏幕。 外观如下：

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';@Component({selector: 'page-add',templateUrl: 'add.component.html'
})
export class AddPage {constructor(public viewCtrl: ViewController) {}dismiss(){this.viewCtrl.dismiss();}}

包起来

在本教程中，您了解了如何开始使用使用Angular的Ionic框架创建移动应用程序。 您为任务管理器应用程序创建了视图。 您创建了添加组件和列表组件。

在本教程系列的下一部分中，您将实现任务管理器应用程序的功能，以添加和列出任务。

该教程的源代码可在GitHub上获得 。

请在下面的评论中告诉我们您的建议。

翻译自: https://code.tutsplus.com/tutorials/creating-a-task-manager-app-using-ionic--cms-29950