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.
Stellen Sie sicher, dass Folgendes installiert ist:
Führen Sie die folgenden Befehle aus, um die erforderlichen Abhängigkeiten zu installieren:
npm install @capacitor-community/sqlite npx cap sync
Diese Befehle installieren das SQLite-Plugin und synchronisieren die Änderungen mit den nativen Plattformen.
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; } } }
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(); } }
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(); } }
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!