Heim > Web-Frontend > js-Tutorial > Ionisch: WinkelkondensatorJS & SQLite

Ionisch: WinkelkondensatorJS & SQLite

Patricia Arquette
Freigeben: 2024-11-26 01:03:10
Original
620 Leute haben es durchsucht

Ionic: Angular  CapacitorJS & SQLite

SQLite-Integration in einer eigenständigen Angular 18-Anwendung und CapacitorJS

In diesem Tutorial wird erläutert, wie Sie SQLite in eine Angular 18-Anwendung integrieren, die eigenständige Komponenten und Signale verwendet. Wir werden das Plugin @capacitor-community/sqlite verwenden, um die SQLite-Funktionalität sowohl für Android- als auch für iOS-Plattformen zu aktivieren.


Voraussetzungen

Stellen Sie sicher, dass Folgendes installiert ist:

  • Node.js und npm
  • CapacitorJS
  • Winkel 18 mit eigenständigen Komponenten und Signalen

Schritt 1: Erforderliche Pakete installieren

Führen Sie die folgenden Befehle aus, um die erforderlichen Abhängigkeiten zu installieren:

npm install @capacitor-community/sqlite
npx cap sync
Nach dem Login kopieren

Diese Befehle installieren das SQLite-Plugin und synchronisieren die Änderungen mit den nativen Plattformen.


Schritt 2: Erstellen Sie einen Datenbankdienst

Die Datenbanklogik wird zur besseren Wartbarkeit in einen Dienst gekapselt.

// src/app/services/database.service.ts
import { Injectable } from '@angular/core';
import { CapacitorSQLite, SQLiteConnection, SQLiteDBConnection } from '@capacitor-community/sqlite';

@Injectable({
  providedIn: 'root',
})
export class DatabaseService {
  private sqlite: SQLiteConnection;
  private db: SQLiteDBConnection | null = null;

  constructor() {
    this.sqlite = new SQLiteConnection(CapacitorSQLite);
  }

  async initializeDatabase(): Promise<void> {
    try {
      // Check connection consistency
      const retCC = (await this.sqlite.checkConnectionsConsistency()).result;

      // Check is connected
      const isConnection = (await this.sqlite.isConnection('appDB', false)).result;

      if (!isConnection && !retCC) {
        // Create a new connection
        this.db = await this.sqlite.createConnection('appDB', false, 'no-encryption', 1, false);
        await this.db.open();
        await this.createTables();
      } else {
        // Retrieve existing connection
        this.db = await this.sqlite.retrieveConnection('appDB', false);
        await this.db.open();
      }
    } catch (error) {
      console.error('Error initializing the database:', error);
    }
  }

  private async createTables(): Promise<void> {
    if (!this.db) throw new Error('Database connection is not open');
    const createTableQuery = `
      CREATE TABLE IF NOT EXISTS users (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT NOT NULL,
        age INTEGER NOT NULL
      );
    `;
    await this.db.execute(createTableQuery);
  }

  async addUser(name: string, age: number): Promise<void> {
    if (!this.db) throw new Error('Database connection is not open');
    const insertQuery = `INSERT INTO users (name, age) VALUES (?, ?);`;
    await this.db.run(insertQuery, [name, age]);
  }

  async getUsers(): Promise<any[]> {
    if (!this.db) throw new Error('Database connection is not open');
    const result = await this.db.query('SELECT * FROM users;');
    return result.values || [];
  }

  async closeDatabase(): Promise<void> {
    if (this.db) {
      await this.sqlite.closeConnection('appDB');
      this.db = null;
    }
  }
}
Nach dem Login kopieren

Schritt 3: Initialisieren Sie den Datenbankdienst in der Root-Komponente

Initialisieren Sie in der Stammkomponente Ihrer Anwendung den DatabaseService.

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from './services/database.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnDestroy, AfterViewInit {
  constructor(private databaseService: DatabaseService) {}

  // Important: Initialize the database connection when the component is created  
  async ngAfterViewInit() {
    await this.databaseService.initializeDatabase();
  }

  // Important: Close the database connection when the component is destroyed
  async ngOnDestroy() {
    await this.databaseService.closeDatabase();
  }
}
Nach dem Login kopieren

Schritt 4: Verwenden Sie den Datenbankdienst in einer Komponente

Sie können den DatabaseService jetzt in jeder Komponente verwenden, um CRUD-Operationen auszuführen.

// src/app/components/user-list/user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../../services/database.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private databaseService: DatabaseService) {}

  async ngOnInit() {
    await this.databaseService.addUser('Max Mustermann', 25);
    await this.databaseService.addUser('Erika Musterfrau', 30);
    this.users = await this.databaseService.getUsers();
  }
}
Nach dem Login kopieren

Notizen

  • Verbindungskonsistenz: Stellen Sie sicher, dass Sie die Verbindungskonsistenz mit checkConnectionsConsistency() überprüfen, um doppelte Verbindungsfehler zu vermeiden.
  • Singleton-Dienst: Verwenden Sie Angulars @Injectable mit bereitgestellterIn: 'root', um sicherzustellen, dass DatabaseService ein Singleton ist.
  • Testen Sie auf beiden Plattformen: Testen Sie Ihre Implementierung immer sowohl auf Android- als auch auf iOS-Geräten.

Abschluss

Mit diesen Schritten haben Sie SQLite erfolgreich in Ihre eigenständige Angular 18-Anwendung mit CapacitorJS integriert. Diese Implementierung stellt die Verbindungskonsistenz sicher und kapselt Datenbankoperationen in einem wiederverwendbaren Dienst.

Das obige ist der detaillierte Inhalt vonIonisch: WinkelkondensatorJS & SQLite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage