How to use Angular to create applet

Have more questions? Submit a request

Angular applet example

If you want to develop applets with Angular you can follow this example. This tutorial explains you how to create the first applet from Angular project.

Prerequisites

  • Node.js 8.16.0 or Node.js 10.16.0 or later version on your local development machine

You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

Creating an App

You use the Angular CLI to create projects, generate application and library code.

npm

npm install -g @angular/cli

Creating project

To create a new workspace and initial starter app:

ng new example-app

It will create a directory called example-app inside the current folder.
Inside that directory, it will generate the initial Angular project structure and install the transitive dependencies.

Add signageOS

For creating and runnig your applet you must add signageOS dependencies to the project:

  • @signageos/front-display
  • @signageos/front-applet is a JS API library

You can add these dependencies in package.json manualy or you can add it and install with npm.

Use npm

npm i @signageos/front-display@latest
npm i @signageos/front-applet@latest

Add manualy

"dependencies": {
    "@angular/animations": "~10.1.5",
    "@angular/common": "~10.1.5",
    "@angular/compiler": "~10.1.5",
    "@angular/core": "~10.1.5",
    "@angular/forms": "~10.1.5",
    "@angular/platform-browser": "~10.1.5",
    "@angular/platform-browser-dynamic": "~10.1.5",
    "@angular/router": "~10.1.5",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2",
+    "@signageos/front-applet": "^4.4.0",
+  "@signageos/front-display": "^7.7.0"
  }

After you add these dependencies manualy you should run:

npm install 

For installing new dependencies.

Modify index.html

Now we will modify index.html in example-app/src. This modification will help us in futere, when we need to build app.

   <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>AngularExample</title>
+  <base href="./">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
    <app-root></app-root>
    </body>
    </html>

Modify Component

To check functionality of signageOS we modify app.component.ts file in example-app/appdirectory.

    import {Component, OnInit} from '@angular/core';
+ import sos from "@signageos/front-applet";


    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })

+   export class AppComponent implements OnInit{
    title = 'angular-example';
+    public sosIsReady: boolean;

+    public ngOnInit(): void {
+        this.initSos();
+    }

+    private initSos(): void {
+        sos.onReady()
+        .then( () => {
+        console.log("Ready to rock");
+        this.sosIsReady = true;
+        })}
+   }

Also we add condition to app.commponent.html for condition render of component after sos is ready. I cover existing html in another <div> with condition.

+  <div *ngIf="sosIsReady" >
       <!-- Toolbar -->
       <div  class="toolbar" role="banner">
       
       <div class="content" role="main">
       
       <div class="content" role="main">
   </div>

Building project

For creating applet you need to build your project. After the build command, ng generate build folder with index.html.

ng build 

Once built you have complete Angular project for creating your Applet and you can test it. 

 

Was this article helpful?
0 out of 0 found this helpful
Share