Movatterモバイル変換

[0]ホーム
URL:

Skip to main content
AnOutSystems Company →
Site LogoSite Logo
Site LogoSite Logo
Version: v8

Ionic Angular Quickstart

Welcome! This guide will walk you through the basics of Ionic Angular development. You'll learn how to set up your development environment, generate a simple project, explore the project structure, and understand how Ionic components work. This is perfect for getting familiar with Ionic Angular before building your first real app.

If you're looking for a high-level overview of what Ionic Angular is and how it fits into the Angular ecosystem, see theIonic Angular Overview.

Prerequisites​

Before you begin, make sure you have Node.js and npm installed on your machine.You can check by running:

node -v
npm -v

If you don't have Node.js and npm,download Node.js here (which includes npm).

Create a Project with the Ionic CLI​

First, install the latestIonic CLI:

npm install -g @ionic/cli

Then, run the following commands to create and run a new project:

ionic start myApp blank --type angular

cd myApp
ionic serve

At the first prompt, chooseStandalone.

After runningionic serve, your project will open in the browser.

Screenshot of the Ionic Angular Home page

Explore the Project Structure​

Your new app's directory will look like this:

└── src/
    └── app
        ├── app.component.html
        ├── app.component.scss
        ├── app.component.ts
        ├── app.routes.ts
        └── home/
            ├── home.page.html
            ├── home.page.scss
            ├── home.page.spec.ts
            └── home.page.ts
info

All file paths in the examples below are relative to the project root directory.

Let's walk through these files to understand the app's structure.

View the App Component​

The root of your app is defined inapp.component.ts:

src/app/app.component.ts
import{ Component}from'@angular/core';
import{ IonApp, IonRouterOutlet}from'@ionic/angular/standalone';

@Component({
  selector:'app-root',
  templateUrl:'app.component.html',
  imports:[IonApp, IonRouterOutlet],
})
exportclassAppComponent{
constructor(){}
}

And its template inapp.component.html:

src/app/app.component.html
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>

This sets up the root of your application, using Ionic'sion-app andion-router-outlet components. The router outlet is where your pages will be displayed.

View Routes​

Routes are defined inapp.routes.ts:

src/app/app.routes.ts
import{ Routes}from'@angular/router';

exportconst routes: Routes=[
{
    path:'home',
loadComponent:()=>import('./home/home.page').then((m)=> m.HomePage),
},
{
    path:'',
    redirectTo:'home',
    pathMatch:'full',
},
];

When you visit the root URL (/), theHomePage component will be loaded.

View the Home Page​

The Home page component, defined inhome.page.ts, imports the Ionic components it uses:

src/app/home/home.page.ts
import{ Component}from'@angular/core';
import{ IonHeader, IonToolbar, IonTitle, IonContent}from'@ionic/angular/standalone';

@Component({
  selector:'app-home',
  templateUrl:'home.page.html',
  styleUrls:['home.page.scss'],
  imports:[IonHeader, IonToolbar, IonTitle, IonContent],
})
exportclassHomePage{
constructor(){}
}

And the template, in thehome.page.html file, uses those components:

src/app/home/home.page.html
<ion-header[translucent]="true">
<ion-toolbar>
<ion-title> Blank</ion-title>
</ion-toolbar>
</ion-header>

<ion-content[fullscreen]="true">
<ion-headercollapse="condense">
<ion-toolbar>
<ion-titlesize="large">Blank</ion-title>
</ion-toolbar>
</ion-header>

<divid="container">
<strong>Ready to create an app?</strong>
<p>
      Start with Ionic
<atarget="_blank"rel="noopener noreferrer"href="https://ionicframework.com/docs/components">UI Components</a>
</p>
</div>
</ion-content>

This creates a page with a header and scrollable content area. The second header shows acollapsible large title that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.

Learn More

For detailed information about Ionic layout components, see theHeader,Toolbar,Title, andContent documentation.

Add an Ionic Component​

You can enhance your Home page with more Ionic UI components. For example, add aButton at the end of theion-content:

src/app/home/home.page.html
<ion-content>
<!-- existing content -->

<ion-button>Navigate</ion-button>
</ion-content>

Then, import theIonButton component inhome.page.ts:

src/app/home/home.page.ts
import{ IonButton, IonContent, IonHeader, IonTitle, IonToolbar}from'@ionic/angular/standalone';

@Component({
// ...existing config...
  imports:[IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
})

Add a New Page​

To add a new page, generate it with the CLI:

ionic generate page new

A route will be automatically added toapp.routes.ts.

Innew.page.html, you can add aBack Button to theToolbar:

src/app/new/new.page.html
<ion-header[translucent]="true">
<ion-toolbar>
<ion-buttonsslot="start">
<ion-back-buttondefaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>new</ion-title>
</ion-toolbar>
</ion-header>

And importIonBackButton andIonButtons innew.page.ts:

src/app/new/new.page.ts
import{ IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar}from'@ionic/angular/standalone';

@Component({
// ...existing config...
  imports:[IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
})

Theion-back-button will automatically handle navigation back to the previous page, or to/ if there is no history.

Navigate to the New Page​

To navigate to the new page, update the button inhome.page.html:

src/app/home/home.page.html
<ion-button[routerLink]="['/new']">Navigate</ion-button>

Then, importRouterLink inhome.page.ts:

src/app/home/home.page.ts
import{ RouterLink}from'@angular/router';

@Component({
// ...existing config...
  imports:[IonButton, IonContent, IonHeader, IonTitle, IonToolbar, RouterLink],
})
info

Navigating can also be performed using Angular's Router service. See theAngular Navigation documentation for more information.

Add Icons to the New Page​

Ionic Angular comes withIonicons pre-installed. You can use any icon by setting thename property on theion-icon component. Add the following icons tonew.page.html:

src/app/new/new.page.html
<ion-content>
<!-- existing content -->

<ion-iconname="heart"></ion-icon>
<ion-iconname="logo-ionic"></ion-icon>
</ion-content>

You'll also need to import and register these icons innew.page.ts:

src/app/new/new.page.ts
// ...existing imports...
import{ IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar}from'@ionic/angular/standalone';
import{ addIcons}from'ionicons';
import{ heart, logoIonic}from'ionicons/icons';

@Component({
// ...existing config...
  imports:[IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar],
})

Then, update the constructor of the page to useaddIcons:

src/app/new/new.page.ts
exportclassNewPageimplementsOnInit{
constructor(){
addIcons({ heart, logoIonic});
}

ngOnInit(){}
}

Alternatively, you can register icons inapp.component.ts to use them throughout your app.

For more information, see theIcon documentation and theIonicons documentation.

Call Component Methods​

Let's add a button that can scroll the content area to the bottom.

Update theion-content in yournew.page.html to include a button and some items after the existing icons:

src/app/new/new.page.html
<ion-content[fullscreen]="true"#content>
<ion-headercollapse="condense">
<ion-toolbar>
<ion-titlesize="large">new</ion-title>
</ion-toolbar>
</ion-header>

<ion-iconname="heart"></ion-icon>
<ion-iconname="logo-ionic"></ion-icon>

<ion-button(click)="scrollToBottom()">Scroll to Bottom</ion-button>

<!-- Add lots of content to make scrolling possible -->
@for (item of items; track $index; let i = $index) {
<ion-item>
<ion-label>Item{{ i+1}}</ion-label>
</ion-item>
  }
</ion-content>

In the component, add theViewChild import, the new component imports and define thescrollToBottom function:

src/app/new/new.page.ts
import{ Component, OnInit, ViewChild}from'@angular/core';
import{
  IonBackButton,
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonItem,
  IonLabel,
  IonTitle,
  IonToolbar,
}from'@ionic/angular/standalone';
import{ addIcons}from'ionicons';
import{ heart, logoIonic}from'ionicons/icons';

@Component({
// ...existing config...
  imports:[
    IonBackButton,
    IonButton,
    IonButtons,
    IonContent,
    IonHeader,
    IonIcon,
    IonItem,
    IonLabel,
    IonTitle,
    IonToolbar,
],
})
exportclassNewPageimplementsOnInit{
@ViewChild(IonContent) content!: IonContent;

  items=Array.from({ length:50},(_, i)=> i);

constructor(){
addIcons({ heart, logoIonic});
}

ngOnInit(){}

scrollToBottom=()=>{
this.content.scrollToBottom(300);
};
}

To call methods on Ionic components:

  1. Create aViewChild reference for the component
  2. Call the method directly on the component instance

You can find available methods for each component in theMethods section of their API documentation.

Run on a Device​

Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, useCapacitor:

ionic build
ionic cap add ios
ionic cap add android

Open the native projects in their IDEs:

ionic cap open ios
ionic cap open android

SeeCapacitor's Getting Started guide for more.

Explore More​

This guide covered the basics of creating an Ionic Angular app, adding navigation, and introducing Capacitor for native builds. To dive deeper, check out:

Build Your First App

Build a real Photo Gallery app with Ionic Angular and native device features.

Angular Documentation

Learn more about Angular's core concepts, tools, and best practices from the official Angular documentation.

Navigation

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

Components

Explore Ionic's rich library of UI components for building beautiful apps.

Theming

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

Capacitor Documentation

Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.

[8]ページ先頭
©2009-2025 Movatter.jp