Quickstart: Angular

Overview#

This is a brief example how you can integrate Architect SDK into your existing angular application. If you want more comprehensive guide check out our phonebook app

Install Architect SDK#

Install Architect SDK via:

npm
Yarn

npm install architect-sdk

You should see architect-sdk dependency added to package.json file¹.

Setup environment#

In your environment.ts file add this line:

baseUrl: 'https://<your-app-id>.essentialz.cloud',

After that environment.ts file should look like this:

export const environment = {
  // rest of your environment
  baseUrl: "https://<your_app_id>.essentialz.cloud",
};

Create new file called architectConfig.ts inside src folder. In order to take full advantage of our type system you should define resources type and pass them to architectSDK configuration. For example if you are making todo app, you should define Todo type and pass it to architectSDK like this:

import architectSDK, { ArchitectResource } from "architect-sdk";

export type ArchitectSchema = {
  todos: ArchitectResource<Todo>;
};

export const client = architectSDK<ArchitectSchema>({
  baseUrl: environment.baseUrl,
});

You will now have full autocomplete for todos (and any additional resources you define) in editor of your choice.

Create architect SDK service#

Type into your terminal following code

ng generate service architectSDK

A new file called architect-sdk.service.ts should be in you app folder². One of the ways you can add architectSDK in you service is:

import { Injectable } from "@angular/core";
import { client } from "../architectConfig";

@Injectable({
  providedIn: "root",
})
export class ArchitectService {
  private _architectSDK = client;
  constructor() {}
}

With basic CRUD operations architect-sdk.service.ts might look like this:

import { Injectable } from "@angular/core";
import { environment } from "../environments/environment";
import { client } from "../architectConfig";

// Types
import { Todo } from "../types/Todo";

@Injectable({
  providedIn: "root",
})
export class ArchitectService {
  private _architectSDK = client;
  constructor() {}

  public getTodos() {
    return this._architectSDK.todos.getAll();
  }

  public getTodo(id: string) {
    return this._architectSDK.todos.get(id);
  }

  public createTodo(todo: Todo) {
    return this._architectSDK.todos.create(todo);
  }

  public deleteTodo(id: string) {
    return this._architectSDK.todos.delete(id);
  }

  public updateTodo(id: string, todo: Todo) {
    return this._architectSDK.todos.update(id, todo);
  }
}

You can now inject ArchitectService into your component.

import { Component, OnInit } from "@angular/core";
import { ToDo } from "../types/ToDo";

import { ArchitectService } from "./architect-sdk.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  constructor(private _architectService: ArchitectService) {}
  // rest of your code
}

Conclusion#

Integrating Architect SDK into your application is easy using simple steps provided above. If you want to see how small phonebook application utilises Architect SDK go and check link to tutorial. There you can see how authorization, CRUD operations and file upload can be handled in angular applications.

In order to use yarn you first need to configure CLI to use it. Go to this blog for more details.↩
If you want to create service into separate folder you can type ng generate service <folder_name>/architectSDK↩