Angular SDK

AngularアプリケーションにSquidを統合するためのライブラリ。

SDK Version

Latest stable

Features

• Angularモジュールと、Squid Client SDKの初期化および注入用のプロバイダー

Getting started

Requirements

このSDKは、Angularのドキュメントに記載されているactively supported versions of Angularのみをサポートしています。他のバージョンは互換性があるかもしれませんが、積極的なサポートの対象外です。

Installation

npmを使用:

npm install @squidcloud/angular

Configuring Squid

Squid Consoleを使用して Application を作成します。

• Angularのルートモジュールで、SquidModule をインポートし、SquidのアプリケーションIDとregionを設定します:

import { SquidModule } from '@squidcloud/angular';
// ...
@NgModule({
  // ...
  imports: [
    SquidModule.forRoot({
      appId: '<YOUR_APP_ID>',
      region: '<YOUR_SQUID_REGION>',
    }),
  ],
// ...

上記の設定により、アプリケーションの各種サービスやコンポーネントに注入可能なSquidインスタンスが提供されます。

または、ファクトリ関数を使用してSquidインスタンスを提供することもできます:

• SquidクラスとSquidファクトリプロバイダーをインポートします:

import { provideSquid } from '@squidcloud/angular';
import { Squid } from '@squidcloud/client';

• provideSquidプロバイダーをアプリケーションのprovidersに追加します:

@NgModule({
  // ...
 providers: [
  {
     provide: Squid,
     useFactory: provideSquid({
       appId: '<YOUR_APP_ID>',
       region: '<YOUR_SQUID_REGION>',
     }),
    deps: [NgZone],
  },
],
// ...

この設定により、同一のAngularアプリケーション内で複数のSquidインスタンスを作成することが可能になります。 例えば、Angularアプリケーション内で2つのSquidインスタンスを作成することができます:

export const usersSquidInjectionToken = new InjectionToken<Squid>('usersSquid');
export const billingSquidInjectionToken = new InjectionToken<Squid>('billingSquid');

@NgModule({
  // ...
 providers: [
  {
     provide: usersSquidInjectionToken,
     useFactory: provideSquid({
       appId: '<YOUR_APP_ID>',
       region: '<YOUR_SQUID_REGION>',
     }),
    deps: [NgZone],
  },
   {
     provide: billingSquidInjectionToken,
     useFactory: provideSquid({
       appId: '<YOUR_OTHER_APP_ID>',
       region: '<YOUR_OTHER_SQUID_REGION>',
     }),
     deps: [NgZone],
   },
 ],
// ...

Use the Squid client in your Angular component

import { Component } from '@angular/core';
import { Squid } from '@squidcloud/client';

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
})
export class MyComponent {
  constructor(private readonly squid: Squid) {}
  // ...
}

Use the Squid client in your Angular service

import { Injectable } from '@angular/core';
import { Squid } from '@squidcloud/client';

@Injectable({ providedIn: 'root' })
export class MyService {
  constructor(private readonly squid: Squid) {}
  // ...
}

または、トークンを用いて提供された場合、injection tokenを使用してSquidインスタンスを注入することもできます:

import { Injectable, Inject } from '@angular/core';
import { Squid } from '@squidcloud/client';
import { usersSquidInjectionToken } from './my.module';

@injectable({ providedIn: 'root' })
export class MyService {
  constructor(@Inject(usersSquidInjectionToken) private readonly usersSquid: Squid) {}
  // ...
}

Squidを使用したコンポーネントの完全な動作例:

import { Component } from '@angular/core';
import { Squid } from '@squidcloud/client';
import { map } from 'rxjs';

// Define your type
type User = { id: string; email: string; age: number };

@Component({
  selector: 'my-component',
  template: `
    <ul>
      <li *ngFor="let user of users | async">
        {{ user.email }}
      </li>
    </ul>
    <br />
    <button (click)="createNewUser()">Create user</button>
  `,
})
export class MyComponent {
  // Subscribe to data
  users = this.squid.collection<User>('Users').query().gt('age', 18).dereference().snapshots();

  constructor(private readonly squid: Squid) {}

  // Insert data
  async createNewUser(): Promise<void> {
    const userId = crypto.randomUUID();
    const email = `${userId}@gmail.com`;
    await this.squid
      .collection<User>('Users')
      .doc(userId)
      .insert({
        id: userId,
        email,
        age: Math.floor(Math.random() * 100),
      });
  }
}