<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.