- 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
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.