Skip to content
This repository has been archived by the owner on Mar 5, 2020. It is now read-only.

Implementing a new plugin

ItsElu edited this page Oct 1, 2018 · 6 revisions

File structure

In the application there is a folder Plugins under:
Amy-Web/src/app/Plugins/
The plugin with its name is inserted into this folder.
Amy-Web/src/app/Plugins/newPlugin
The plugin itself contains 4 folders for:

  1. Components and the corresponding files
  2. Objects the plugin uses
  3. Services the plugin uses (e.g. service for the REST interface)
  4. Modules for Dependencies

Tasks of the individual parts

Components

Components are the key piece of the plugin. They display the information and take care of the functions of the UI. More in the official angular documentation here.
Components are created with this command:
ng generate component Plugins/newPlugin/Components/[name]

Objects

If the plugin needs objects for the REST interface or other uses, you can create them here. Simply create a new file in the folder by right-clicking on it in VS-code and selecting a new file. The file can have any name and must end with .ts .
The object must be declared and exported in the file:
export class anyName {
constructor() { }
}
In addition, the object must be imported in all files in which it is used, e.g.:
import { anyName } from '../../Objects/anyName';

Services

Services are used to provide data to components. All methods that are not used for data display should be swapped out to services. Read more in the official Angular-documentation here.
Services are created with this command:
ng generate service Plugins/newPlugin/Services/[name]
A service consists of 2 files, the service itself and the test file (recognizable by the .spec.ts extension). To use services in a component, they must be imported (e.g.):
import { AnyNameDataService } from '../../Services/anyName-data.service';
And declared in the constructor:
constructor(private readonly anyNameService: AnyNameService) { }

Modules

Modules are used to encapsulate functions that belong together. For example, you can collect imports of a library or separate components/services that belong together from the rest of the application. You can read more about Modules in the official Angular documentation here.
Plugins should have a module in which all associated components, services and other modules can interact encapsulated with each other.
Thus it should be possible to insert a plugin as a module into the WebApp without having to make major changes in the core of the WebApp.

Clone this wiki locally