Get started with plain Angular
You must first create a project in Plasmic.
Installation
npm install @plasmicapp/loader-angular# or yarn add @plasmicapp/loader-angular
Initialization
Initialize Plasmic with the project ID and public API token. Define this in its own module to make it available globally.
import { initPlasmicLoader } from "@plasmicapp/loader-angular";export const PLASMIC = initPlasmicLoader({ projects: [ { id: "PROJECTID", // ID of a project you are using token: "APITOKEN" // API token for that project } ], // Fetches the latest revisions, whether or not they were unpublished! // Disable for production to ensure you render only published changes. preview: true,})
To find your project’s ID and public API token: open the project in Plasmic Studio.
The project ID is in the URL, like: https://studio.plasmic.app/projects/PROJECTID
.
The public API token can be found by clicking the Code toolbar button.
Auto load all Plasmic pages
To automatically render all Plasmic-defined pages at the routes specified in Plasmic, create a catch-all route in your routes.
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { RouterModule, Routes } from '@angular/router';import { PlasmicModule } from '@plasmicapp/loader-angular';
import { AppComponent } from './app.component';import { CatchAllComponent } from './catch-all.component';
const routes: Routes = [ /* ... Your other routes here ... */
// Add this route to catch all pages { path: '**', component: CatchAllComponent }];
@NgModule({ // Include the CatchAllComponent in your declarations declarations: [AppComponent, CatchAllComponent], imports: [BrowserModule, PlasmicModule, RouterModule.forRoot(routes)], bootstrap: [AppComponent]})export class AppModule {}
import { Component } from '@angular/core';
@Component({ selector: 'app-root', // Use the routing inside the app-root template: ` <router-outlet> </router-outlet> `})export class AppComponent {}
Create the following catch-all component in your components.
import { Component } from '@angular/core';import { ComponentRenderData } from '@plasmicapp/loader-angular';import { PLASMIC } from './plasmic-init';
@Component({ selector: 'catch-all', template: ` <plasmic-root-provider *ngIf="!loading && prefetchedData" [loader]="loader" [prefetchedData]="prefetchedData"> <plasmic-component [component]="path"></plasmic-component> </plasmic-root-provider> <div *ngIf="loading">Loading...</div> <div *ngIf="!loading && !prefetchedData">Error...</div> `})export class CatchAllComponent { loader = PLASMIC; path: string = ''; loading: boolean = true; prefetchedData: ComponentRenderData | null = null;
constructor() {}
ngOnInit() { (async () => { this.path = window.location.pathname; this.prefetchedData = await PLASMIC.maybeFetchComponentData(this.path); this.loading = false; })(); }}
Render a single Plasmic page or component
Note: You can instead auto-load all Plasmic pages at the correct routes (recommended) rather than manually loading individual pages—see previous section.
Import PlasmicModule into your AppModule.
import { PlasmicModule } from '@plasmicapp/loader-angular';
@NgModule({ declarations: [...], imports: [PlasmicModule, ...], ...})export class AppModule {};
For client-rendered or single-page apps, we fetch components dynamically at runtime. (These are cached for the lifetime of the application.) These are served from a globally replicated instance of the AWS Cloudfront CDN.
COMPONENT_OR_PAGEROUTE
refers to the name of the page or component that you want to render, such as Winter22LandingPage
.
If it’s a page, you can also use the route you assigned the page in Plasmic, like /landing
.
import { PLASMIC } from './plasmic-init';
@Component({ selector: 'app-root', template: ` <plasmic-root-provider [loader]="loader"> <plasmic-component component="COMPONENT_OR_PAGEROUTE"></plasmic-component> </plasmic-root-provider> `})export class AppComponent { ... loader = PLASMIC;}
There’s much more to explore!
- Perform server-side rendering.
- Render different variants.
- Override the content or props.
- Add dynamic behavior.