If you want to develop applets with Angular you can follow this example. This tutorial explains how to create the first applet from the Angular project.
Prerequisites
- Node.js
8.16.0or Node.js10.16.0or 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 and 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-appletis 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 an applet you need to build your project. After the build command, ng generate build folder with index.html.
ng build
Once built you have a complete Angular project for creating your Applet and you can test it.
Hot reloading on the device
signageOS support a direct connection between the CLI project and the device. It helps streamline the development and testing. Read more docs for generic Applet generated via signageOS CLI.
For Angular-based projects, you will need to adjust your package.json and add a few files. See documented changes and files in this Github example commit.
Once you apply the described changes, run all the following commands in separate terminal windows.
sos device connect # Choose your device
npm run watch # Watch the changes in Angular application and build result into dist/ folder
npm run watch-applet # Watch newly built Angular appplication files in dist/ folder and upload them to the connected device
