Angular SDK
Angular アプリケーションに Squid を統合するためのライブラリ。
特徴
- Angular モジュールおよびプロバイダーを使用して Squid Client SDK を初期化および注入
はじめに
要件
この SDK は、Angular ドキュメントに記載されている積極的にサポートされている Angular のバージョンのみに対応しています。他のバージョンも互換性がある可能性がありますが、積極的なサポートは提供されません。
インストール
npm を使用:
npm install @squidcloud/angular
Squid の設定
Squid Console を使用して Application を作成します。
- Angular のルートモジュールで、
SquidModule
をインポートし、Squid アプリケーションの ID とリージョンで構成します:
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';
- アプリケーションの providers に
provideSquid
プロバイダーを追加します:
@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],
},
],
// ...
Angular コンポーネントで Squid クライアントを使用する
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) {}
// ...
}
Angular サービスで Squid クライアントを使用する
import { Injectable } from '@angular/core';
import { Squid } from '@squidcloud/client';
@Injectable({ providedIn: 'root' })
export class MyService {
constructor(private readonly squid: Squid) {}
// ...
}
あるいは、トークンを使用して提供された場合、インジェクショントークンを使用して 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),
});
}
}