In addition to Saga built-in stages (recognizers and processors) coming out of the box, developers can create external stages. This guide will help you create the Angular UI part of your new external stage.
Before Start
Info |
---|
See how to connect to the npm repository by checking this link |
...
- Install angular-cli
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
npm i -g @angular/cli |
- Cd to <project>/resources
- Create and empty angular project
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
ng new webapp --createApplication=false
Would you like to add Angular routing? No
Which stylesheet format would you like to use? Sass |
- Cd to webapp
- Create an angular library (this is where your interface will live)
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
ng generate library <name-of-library> --prefix=plug |
- Install Saga plugin
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
npm install @saga/plugin --save |
- Install Angular Material and Angular CDK
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
npm install @angular/material @angular/cdk --save |
- Open the file pacakge.json
- On the scripts section add or update
Code Block |
---|
|
"build": "ng build"
"build-prod": "ng build --prod" |
- Cd to projects/<name-of-library>
- Open the file package.json
- On peerDependencies add
Code Block |
---|
|
"@saga/plugin": "^x.y.z" |
the same version as the package.json located in webapp
- Cd to src/lib
- Open the file <name-of-library>.module.ts
import the following modules
Code Block |
---|
|
import {PluginModule} from '@saga/plugin';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms'; |
Then update the @NgModule by adding a new provider and the modules to the section imports
Code Block |
---|
|
providers: [{
provide: '<NameOfRecognizer>Component',
useValue: [{
name: '<NameOfRecognizer>Component',
component: <NameOfRecognizer>Component
}],
multi: true
}],
imports: [
CommonModule,
FormsModule,
PluginModule
] |
Updating the Pom.xml Step-by-step guide
- Add to the <properties>
Code Block |
---|
|
<saga.webapp.code>src/main/resources/webapp</saga.webapp.code>
<saga.webapp.export>webapp/dist/</saga.webapp.export> |
- In every "ManifestEntries" in the pom, add
Code Block |
---|
|
<Artifact>${project.artifactId}</Artifact>
<WebApp>${saga.webapp.export}</WebApp> |
- Add the following profiles to the pom.xml
Code Block |
---|
language | xml |
---|
theme | RDark |
---|
collapse | true |
---|
|
<profiles>
<profile>
<id>develop</id>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>${saga.webapp.export}</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>buildnumber-maven-plugin</artifactId>
<version>1.4</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>create</goal>
</goals>
</execution>
</executions>
<configuration>
<doCheck>false</doCheck>
<doUpdate>false</doUpdate>
</configuration>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>developUX</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>buildnumber-maven-plugin</artifactId>
<version>1.4</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>create</goal>
</goals>
</execution>
</executions>
<configuration>
<doCheck>false</doCheck>
<doUpdate>false</doUpdate>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>2.5</version>
<configuration>
<filesets>
<fileset>
<directory>src/main/resources/webapp/dist</directory>
<includes>
<include>**/*</include>
</includes>
<followSymlinks>false</followSymlinks>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.3.2</version>
<configuration>
<workingDirectory>${saga.webapp.code}</workingDirectory>
</configuration>
<executions>
<execution>
<id>npm install (generate-resources)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<!-- Optional: The following will output the npm configuration.
I do this so my CI logs will show the npm information used
for the build -->
<execution>
<id>npm config list (validate)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>validate</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>config</argument>
<argument>list</argument>
</arguments>
</configuration>
</execution>
<!-- Required: This following calls `npm run build` where 'build' is
the script name I used in my project, change this if yours is
different -->
<execution>
<id>npm run build (generate-resources)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build</argument>
</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>${saga.webapp.export}</include>
</includes>
</resource>
</resources>
</build>
</profile>
<profile>
<id>prod</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>buildnumber-maven-plugin</artifactId>
<version>1.4</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>create</goal>
</goals>
</execution>
</executions>
<configuration>
<doCheck>false</doCheck>
<doUpdate>false</doUpdate>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>2.5</version>
<configuration>
<filesets>
<fileset>
<directory>src/main/resources/webapp/dist</directory>
<includes>
<include>**/*</include>
</includes>
<followSymlinks>false</followSymlinks>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.3.2</version>
<configuration>
<workingDirectory>${saga.webapp.code}</workingDirectory>
</configuration>
<executions>
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Clean Lifecycle' -->
<execution>
<id>npm prune (clean)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>clean</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>prune</argument>
</arguments>
</configuration>
</execution>
<execution>
<id>npm install --production (generate-resources)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
<argument>--production</argument>
</arguments>
</configuration>
</execution>
<!-- Optional: The following will output the npm configuration.
I do this so my CI logs will show the npm information used
for the build -->
<execution>
<id>npm config list (validate)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>validate</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>config</argument>
<argument>list</argument>
</arguments>
</configuration>
</execution>
<!-- Required: This following calls `npm run build` where 'build' is
the script name I used in my project, change this if yours is
different -->
<execution>
<id>npm run build-prod (generate-resources)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build-prod</argument>
</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>${saga.webapp.export}</include>
</includes>
</resource>
</resources>
</build>
</profile>
</profiles> |
Updating the RestHandler in Java Step-by-step guide
- On the <NameRecognizer>RestHandler, after the RecognizerInfo is set up, add
Code Block |
---|
|
info.bundle(<path-to-bundle>); |
where the path would be <artifact-id>/<name-of-library>/bundles/<name-of-library>.umd.min.js
...