- Notifications
You must be signed in to change notification settings - Fork0
Angular Client library for Rico
License
rico-projects/rico-angular
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
<p>
<p align="right"><a href="https://dev.karakun.com"><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 bothrico-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 inrico-angular.
Please find an example in therico-samples repository.
The following steps describes how you can use Rico in your Angular application.
Add dependencies to@rico-projects/rico-js andrico-angular to your project:
npm install @rico-projects/rico-jsnpm install rico-angular
So that these lines end up in yourpackage.json:
"rico-angular": "^1.0.3","@rico-projects/rico-js`": "1.1.0",
Extend theapp.module.ts by adding theRicoAngularModule 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 theApplicationRef 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 ofAngular’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()" placeholder="Task">
For a complete working example, please refer toclient-angular module of ourToDo List sample.
Prerequsite: HaveDocker 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.
Nowexecute 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, theng-packagr is used via the angular tool chain configuted viaangular.json file.
Releases are done automatically withsemantic-release when release-triggering commit is added tomaster branch.
Commits are evaluated by their commit message (thats why we need to stick with thecommit message format, see "Contributing"). Depending onfix,feat orBREAKING CHANGES, aPatch-,Feature- orBreaking release is build and released.
A new release is automatically published on NPM and as a release on GitHub.
Please useCommit 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 themain repo.
About
Angular Client library for Rico