<p>
<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>
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.
Please find an example in the rico-samples repository.
The following steps describes how you can use Rico in your Angular application.
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",
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 { }
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);
});
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.
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
For packaging, the ng-packagr is used via the angular tool chain configuted via angular.json file.
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.
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.