在本教程系列中，您将学习如何开始使用ionic框架创建移动应用程序。Ionic 使用 angular 编写组件和创建移动应用程序。
在本系列的整个过程中，您将使用 Ionic 框架创建一个简单的任务管理器移动应用程序。
来自官方文档：
Ionic 是一款美观、免费且开源的移动 SDK，用于轻松开发原生和渐进式 Web 应用程序。
入门
让我们开始使用节点包管理器 (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定义的文件。
在app.module.ts该部分内的文件中imports，您可以看到已使用以下代码定义了根组件：
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列表，您可以在创建模板时使用这些 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并使用组件的键定义了模板templateUrl。
应用程序需要知道上面创建的组件存在，因此您需要在根模块中导入它。
在文件中导入ListPage类src/app/app.module.ts并将其包含在declarationsandentryComponents 列表中。修改后的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组件。
add在文件夹内创建一个名为的pages文件夹。在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() {
}
}如上面的代码所示，您刚刚通过指定selectorand创建了 Add 组件templateUrl。
通过将组件导入 app.module.ts文件夹内的文件来注册组件src/app。修改后的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在模式弹出窗口中显示组件，您需要导入ModalController提供的ionic-angular. 导入. 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。
<button ion-fab mini (click)="presentAddModal()"><ion-icon name="add"></ion-icon></button>
保存上述更改并重新启动 Ionic 服务器。单击列表页面中的添加图标，您将看到添加任务页面。
对于添加任务屏幕上的后退按钮，您需要在文件dismiss中单击按钮上添加方法 。add.component.ts
<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 框架创建移动应用程序。您为任务管理器应用程序创建了视图。您创建了 Add 组件和 List 组件。
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
