La figure ci-dessous illustre bien l’idée générale de Ionic.

Sur sa partie gauche, on voit les logos d’Angular, React et Vue. En effet, Ionic s’appuie sur ces frameworks pour générer ses applications. Plus exactement, c’en est une surcouche. On voit également les logos d’Android et d’Apple : grâce à Ionic, on peut produire des applications pour ces deux OS.

La partie droite de la figure détaille cette architecture : Ionic est, certes, une surcouche d’Angular, React et Vue, mais ce framework propose également ses propres composants, qui sont adaptés au look 'n feel d’Android et d’iOS. Pour s’adapter à ces derniers, notamment pour exploiter les composants des smartphones (appareil photo, GPS, etc.), Ionic s’appuie sur Capacitor. Cela lui permet de produire des applications natives Android, iOS, ou encore des PWA (Progressive Web Applications).

Une fois Ionic installé via la commande :

sudo npm install -g @ionic/cli

vous pouvez créer un nouveau projet monprojet, via la commande suivante :

ionic start monprojet

Ionic va alors vous demander de choisir sur quel framework s’appuyer (Angular, React ou Vue). Dans le cadre de ce module, nous utilisons Angular. Ensuite, on doit choisir un squelette pour le projet. Blank sera notre option par défaut. Puis Ionic vous demandera quel système de modules Angular vous souhaitez utiliser : ngModules ou Standalone. Dans la version actuelle d’Angular, les composants sont par défaut en Standalone. Donc c’est l’option Standalone que nous choisirons. En Standalone, lorsque vos composants utilisent des classes, des méthodes, des fonctions définies ailleurs (par exemple, le routerLink), vous devez les importer dans l’annotation @Component qui précède vos classes. C’est ce que vous avez fait dans les séances de développement web. Les ngModules sont une autre technique pour réaliser ces imports mais elle est obsolète. Enfin, la dernière question qui vous sera posée est si vous souhaitez créer ou non un compte Ionic. Ce n’est pas nécessaire.

Notez que, par défaut, l’installation inclut Capacitor, qui nous servira à exploiter les capacités des smartphones sur lesquels nous allons déployer nos applications Ionic.

Le projet ainsi créé se présente avec les fichiers comme indiqué ci-dessous :

On note que la structure est similaire à celle d’Angular. Quelques fichiers sont toutefois différents :

• le fichier src/app/styles.scss devient src/app/global.scss ;

• il y a un répertoire theme dans lequel on peut mettre des indications de style ;

• il y a un répertoire environnements, qui peut exister également en Angular mais seulement si on le génère (ng generate environments) ;

• il y a un fichier de configuration de capacitor.

À l’exception de ces quelques différences, vous retrouverez à peu près les mêmes fichiers que dans Angular.

Visualisation du projet :

Afin de visualiser le projet sur le navigateur, il suffit d’exécuter la commande :

ionic serve

Celle-ci va exécuter un ng serve mais en lui spécifiant le port 8100, qui est le port par défaut de Ionic (celui d’Angular est 4200).

Vous pouvez alors visualiser votre projet dans votre navigateur. Bien évidemment, la page web que vous observerez n’est pas tout à fait identique à celle visible sur un smartphone car les dimensions de votre navigateur diffèrent de celles d’un smartphone. Pour pallier cela, cliquez droit pour inspecter votre page puis, en bas à gauche ou à droite, sur l’icône indiquée dans le cercle rouge de l’image ci-dessous. Vous pouvez alors demander à votre navigateur de passer en mode « visualisation smartphone ». L’ellipse rouge en haut vous indique le type de smartphone sélectionné. Vous pouvez évidemment le modifier.

Contrairement à Angular, en Ionic, on différencie le composant app des pages de l’application.

Le composant « app »  

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

import { Routes } from '@angular/router';

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

Les pages de l'application  

ionic generate page ma_nouvelle_page

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'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent],
})
export class HomePage {
  constructor() {}
}

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

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

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

Des services similaires à ceux d'Angular  

ionic generate service mon_service

import { Injectable } from '@angular/core';
import {Observable, of} from "rxjs";

export interface MyInfo {
  nom : string;
  nb : number;
}

@Injectable({
  providedIn: 'root'
})
export class MonServiceService {

  constructor() { }

  getInfos() : Observable<MyInfo> {
    return of({nom: "toto", nb: 3});
  }
}

import { Component, OnInit } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
import {MonServiceService, MyInfo} from "../mon-service.service";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent],
})
export class HomePage implements OnInit {
  info!: MyInfo;

  constructor(private mon_service: MonServiceService) {}

  ngOnInit() {
    this.mon_service.getInfos().subscribe(res => {this.info = res;});
  }
}

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <p>Info : {{info.nom}} : {{info.nb}}</p>
  </div>
</ion-content>

Comment utiliser le client Http  

import { Injectable } from '@angular/core';
import {Observable, of} from "rxjs";
import {HttpClient} from "@angular/common/http";

export interface MyInfo {
  nom : string;
  nb : number;
}

@Injectable({
  providedIn: 'root'
})
export class MonServiceService {

  constructor(private http: HttpClient) { }

  getInfos() : Observable<MyInfo> {
    return this.http.get<MyInfo>('http://127.0.0.1/xmobile_cours/info.php');
  }
}

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import {provideHttpClient} from '@angular/common/http';
import {provideAnimations} from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations()
  ]
};

import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import {provideHttpClient} from "@angular/common/http";

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes, withPreloading(PreloadAllModules)),
    provideHttpClient()
  ],
});

Dans la section précédente, nous avons vu comment la page home pouvait exploiter dans la méthode ngOnInit() un service Http afin de charger les données dont elle a besoin. Dans votre application, vous aurez probablement plusieurs pages et vous pouvez revenir plusieurs fois sur la page home. Si vous exécutez un console.log() à l’intérieur de ngOnInit(), vous pourrez observer qu’un seul affichage apparaîtra dans la console, quel que soit le nombre de fois où vous revenez sur la page home.

Ionic prévoit différentes méthodes afin d’initialiser/de mettre à jour une page quand on l’affiche pour la première fois ou bien quand on y revient ultérieurement, (cf. l’URL https://ionicframework.com/docs/angular/lifecycle) :

Ionic est livré avec plein de composants prêts à l’emploi, qui vont vous simplifier la vie. Ils se trouvent sur l’URL :

https://ionicframework.com/docs/components

Par exemple, Ionic propose des composants spécifiques pour les listes, les inputs, les checkboxes, les date pickers, etc.

Une exemple : les listes  

Pour créer des listes, on peut utiliser les classiques balises ol, ul, li. Mais, en faisant cela, on n’a pas le look 'n feel des applications sur smartphone. Pour obtenir ce dernier, il faut utiliser les balises ion-list et ion-item spécifiques de Ionic :

https://ionicframework.com/docs/api/list

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Blank</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list inset="true">
    <ion-item>{{info.nom}}</ion-item>
    <ion-item>nombre : {{info.nb}}</ion-item>
  </ion-list>
</ion-content>

Pour que cela fonctionne, il vous faudra importer IonInput dans votre fichier login.page.ts. Pour cela, vous avez deux options :

• l’importer de @ionic/angular/standalone,

• l’importer de @ionic/angular.

Le second item importera IonItem en utilisant le système de modules ngModule. Or, vous avez créé votre projet en standalone. Il faudra donc sélectionner la première des deux options ci-dessus.

home.page.ts

import {IonList, IonItem} from '@ionic/angular/standalone';

Voici le résultat obtenu dans le navigateur :