Arquitetura de páginas no Ionic: componentes, módulos e roteamento base

Como uma página Ionic é composta

No Ionic com Angular, uma página normalmente é um componente Angular com três partes principais: template (HTML), estilos (SCSS/CSS) e lógica (TypeScript). O Ionic adiciona componentes visuais (como ion-header, ion-content, ion-button) e integrações com navegação, mas a organização segue a arquitetura do Angular.

Uma página típica é formada por arquivos como:

• minha-pagina.page.ts: classe TypeScript (estado, métodos, ciclo de vida)
• minha-pagina.page.html: template com componentes Ionic
• minha-pagina.page.scss: estilos escopados para a página
• minha-pagina-routing.module.ts: rota(s) que apontam para a página
• minha-pagina.module.ts (em projetos com módulos): declara/importa dependências da página

Separação de responsabilidades (boas práticas)

• HTML: estrutura e binding (ex.: {{titulo}}, (click), *ngFor), evitando lógica complexa.
• TypeScript: regras de negócio da UI (carregar dados, reagir a eventos, preparar view-model).
• SCSS: estilos locais; prefira classes e evite sobrescrever estilos globais sem necessidade.
• Componentes reutilizáveis: extraia partes repetidas da UI para componentes próprios (ex.: card de produto, item de lista, badge).

Organização de pastas por feature

Uma forma prática de manter o projeto escalável é agrupar arquivos por funcionalidade (feature), em vez de separar por tipo (todas pages em um lugar, todos components em outro). Um exemplo de estrutura:

src/app/  features/    home/      pages/        home/          home.page.ts          home.page.html          home.page.scss          home-routing.module.ts      components/        user-greeting/          user-greeting.component.ts          user-greeting.component.html          user-greeting.component.scss      home.module.ts    products/      pages/        product-list/          product-list.page.ts          product-list.page.html          product-list.page.scss          product-list-routing.module.ts      components/        product-card/          product-card.component.ts          product-card.component.html          product-card.component.scss      products.module.ts  shared/    components/      app-toolbar/        app-toolbar.component.ts        app-toolbar.component.html        app-toolbar.component.scss    shared.module.ts  app-routing.module.ts  app.component.ts

Regras úteis de nomenclatura:

• Páginas: sufixo .page (ex.: product-list.page.ts).
• Componentes reutilizáveis: sufixo .component (ex.: product-card.component.ts).
• Módulos: *.module.ts; rotas: *-routing.module.ts.
• Pastas em kebab-case: product-list, user-greeting.

Passo a passo: criar uma página simples

O objetivo é criar uma página Perfil com um título, um texto e um botão que altera um estado na tela.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

1) Gerar a página

Use o gerador do Ionic/Angular para criar a página e seus arquivos:

ionic generate page features/home/pages/profile

Isso cria a pasta da página com os arquivos e, dependendo do template do projeto, também cria/atualiza o arquivo de roteamento da feature.

2) Implementar o template (HTML)

Edite profile.page.html:

<ion-header>  <ion-toolbar>    <ion-title>Perfil</ion-title>  </ion-toolbar></ion-header><ion-content class="ion-padding">  <h2>{{ name }}</h2>  <p>Status: <strong>{{ status }}</strong></p>  <ion-button expand="block" (click)="toggleStatus()">    Alternar status  </ion-button></ion-content>

3) Implementar a classe (TypeScript)

Edite profile.page.ts:

import { Component } from '@angular/core';@Component({  selector: 'app-profile',  templateUrl: './profile.page.html',  styleUrls: ['./profile.page.scss'],})export class ProfilePage {  name = 'Ana';  status: 'online' | 'offline' = 'offline';  toggleStatus() {    this.status = this.status === 'offline' ? 'online' : 'offline';  }}

4) Estilos locais (SCSS)

Edite profile.page.scss para um ajuste simples:

h2 {  margin-top: 8px;}

Note como o template referencia propriedades e métodos da classe: {{ name }}, {{ status }} e (click). Essa ligação é o que conecta HTML e TypeScript na renderização.

Passo a passo: criar um componente reutilizável

Agora vamos criar um componente UserGreeting que recebe um nome e exibe uma saudação. A ideia é reutilizar em várias páginas sem duplicar HTML.

1) Gerar o componente

Crie o componente dentro da feature (ou em shared se for realmente global):

ionic generate component features/home/components/user-greeting

2) Definir a API do componente com @Input

Edite user-greeting.component.ts:

import { Component, Input } from '@angular/core';@Component({  selector: 'app-user-greeting',  templateUrl: './user-greeting.component.html',  styleUrls: ['./user-greeting.component.scss'],})export class UserGreetingComponent {  @Input() name: string = 'Visitante';}

3) Criar o template do componente

Edite user-greeting.component.html:

<ion-card>  <ion-card-header>    <ion-card-title>Olá, {{ name }}!</ion-card-title>  </ion-card-header>  <ion-card-content>    Bem-vindo(a) ao app.  </ion-card-content></ion-card>

4) Usar o componente na página

No profile.page.html, inclua o componente:

<ion-content class="ion-padding">  <app-user-greeting [name]="name"></app-user-greeting>  <h2>{{ name }}</h2>  <p>Status: <strong>{{ status }}</strong></p>  <ion-button expand="block" (click)="toggleStatus()">    Alternar status  </ion-button></ion-content>

5) Garantir que o componente está disponível no módulo

Em projetos com módulos por feature, o componente precisa estar declarado no módulo da feature (ou exportado por um SharedModule). Um exemplo de home.module.ts:

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { FormsModule } from '@angular/forms';import { IonicModule } from '@ionic/angular';import { HomeRoutingModule } from './pages/home/home-routing.module';import { ProfilePage } from './pages/profile/profile.page';import { UserGreetingComponent } from './components/user-greeting/user-greeting.component';@NgModule({  imports: [CommonModule, FormsModule, IonicModule, HomeRoutingModule],  declarations: [ProfilePage, UserGreetingComponent],})export class HomeModule {}

Se o seu projeto estiver usando componentes standalone (Angular mais recente), a ideia é similar, mas você importa o componente diretamente onde for usar, sem declarar em módulo. O ponto principal é: uma página só consegue renderizar um componente se ele estiver no escopo de compilação (declarado/importado corretamente).

Roteamento básico: como uma página é registrada e renderizada

O roteamento define qual página aparece para uma determinada URL. No Ionic com Angular, isso é feito com o Angular Router e o ion-router-outlet (o “container” onde as páginas são renderizadas).

1) O ponto de renderização: ion-router-outlet

No template principal (geralmente app.component.html), existe algo como:

<ion-app>  <ion-router-outlet></ion-router-outlet></ion-app>

Quando você navega para uma rota, o Angular cria a instância do componente da página e o Ionic a renderiza dentro do ion-router-outlet.

2) Rotas no AppRoutingModule

O arquivo app-routing.module.ts define rotas de alto nível e, frequentemente, usa lazy loading para carregar módulos de features sob demanda. Exemplo:

import { NgModule } from '@angular/core';import { PreloadAllModules, RouterModule, Routes } from '@angular/router';const routes: Routes = [  {    path: '',    redirectTo: 'home/profile',    pathMatch: 'full',  },  {    path: 'home',    loadChildren: () => import('./features/home/home.module').then(m => m.HomeModule),  },];@NgModule({  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],  exports: [RouterModule],})export class AppRoutingModule {}

A rota home delega para o roteamento interno da feature.

3) Rotas dentro da feature (routing module)

No home-routing.module.ts (ou equivalente), você registra a página ProfilePage:

import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { ProfilePage } from '../profile/profile.page';const routes: Routes = [  {    path: 'profile',    component: ProfilePage,  },];@NgModule({  imports: [RouterModule.forChild(routes)],  exports: [RouterModule],})export class HomeRoutingModule {}

Com isso, ao acessar /home/profile, o router encontra a rota, cria a ProfilePage e renderiza seu templateUrl com seus styleUrls.

4) Navegação: link declarativo e navegação por código

Para navegar via template, use routerLink:

<ion-button [routerLink]="['/home/profile']">Ir para Perfil</ion-button>

Para navegar via TypeScript, injete o Router:

import { Component } from '@angular/core';import { Router } from '@angular/router';@Component({  selector: 'app-some-page',  templateUrl: './some-page.page.html',  styleUrls: ['./some-page.page.scss'],})export class SomePage {  constructor(private router: Router) {}  goToProfile() {    this.router.navigate(['/home/profile']);  }}

Checklist de boas práticas para páginas, componentes e rotas