⚠️ IMPORTANT: ⚠️ Rico has been put "on hold". To learn what is meant by that please <a href="https://dev.karakun.com/rico/2021/06/25/rico-on-hold.html">read the blog post</a> and feel free to contact us via rico@karakun.com to clarify open questions.

  <p align="right">
<a href="https://dev.karakun.com" target="_blank"><img src="https://raw.githubusercontent.com/rico-projects/rico/master/readme/supported_by_karakun.png" alt="Supported by Karakun"/></a>
</p>

Rico Angular Adapter

Usage

You need to have both rico-js and this library as dependency to be able to use this adapter. This enables you, in case of a bugfix or extension of rico-js to benefit from it without an update in rico-angular.

Example

Please find an example in the rico-samples repository.

How-To

The following steps describes how you can use Rico in your Angular application.

Step 1: Add Dependencies

Add dependencies to @rico-projects/rico-js and rico-angular to your project:

npm install @rico-projects/rico-js
npm install rico-angular

So that these lines end up in your package.json:

"rico-angular": "^1.0.3",
"@rico-projects/rico-js`": "1.1.0",

Step 2: Inject library

Extend the app.module.ts by adding the RicoAngularModule to the imports:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { RicoAngularModule } from 'rico-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RicoAngularModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Add Code to connect to the Controller

Inject RicoService and the ApplicationRef into your Component you want to use Rico in:

constructor(ricoService: RicoService, appRef: ApplicationRef) {

Connect to a Rico server endpoint and create an instance of the controller to get access to the model for that you can establish bindings to:

 this.ricoService.connect('http://localhost:8080/todo-app/remoting', this.appRef).then(() => {

      this.ricoService.createController('ToDoController').then((controllerProxy) => {
        AppComponent.LOGGER.info('received proxy after createController:', controllerProxy);
        this.appRef.tick();
        this.controllerProxy = controllerProxy;
        this.model = controllerProxy.model;
      }).catch((error) => {
        AppComponent.LOGGER.error(error);
      });

Step 3: Add code for data binding

As we now have the contoller’s model in the component available, we can make use of Angular’s ngModel to use that model with our UI.

For example, we can bind a 'newItemText' property of the model to a input field like this (from rico-samples ToDo list):

<input type="text" [(ngModel)]="model.newItemText" (keyup.enter)="addTask()" class="form-control" placeholder="Task">

For a complete working example, please refer to client-angular module of our ToDo List sample.

Run library tests

npm run test

Run library integration tests

Prerequsite: Have Docker installed.

Then, have a integration tests server running using Docker:

npm run start-int-test-server

It will start a docker image with a rico runtime with some remoting controllers mapped to port 8085.

Now execute tests with:

npm run int-test

The tests will watch the source files and re-run upon changes.

Finally, you can stop the integration server with

npm run stop-int-test-server

Packaging

For packaging, the ng-packagr is used via the angular tool chain configuted via angular.json file.

Releases

Releases are done automatically with semantic-release when release-triggering commit is added to master branch.

Commits are evaluated by their commit message (thats why we need to stick with the commit message format, see "Contributing"). Depending on fix, feat or BREAKING CHANGES, a Patch-, Feature- or Breaking release is build and released.

A new release is automatically published on NPM and as a release on GitHub.

Contributing

Please use Commit message format when contributing changes via a PR to this repository. (List of commit types to be used)

For all details on contributing to Rico, please refer to the main repo.

rico-projects / rico-angular