https://github.com/rico-projects/rico-angular
Angular Client library for Rico
https://github.com/rico-projects/rico-angular
angular frontend hacktoberfest rico rico-remoting
Last synced: 5 months ago
JSON representation
Angular Client library for Rico
- Host: GitHub
- URL: https://github.com/rico-projects/rico-angular
- Owner: rico-projects
- License: apache-2.0
- Created: 2019-01-10T14:44:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T11:56:58.000Z (over 3 years ago)
- Last Synced: 2025-10-06T12:51:32.348Z (9 months ago)
- Topics: angular, frontend, hacktoberfest, rico, rico-remoting
- Language: TypeScript
- Homepage:
- Size: 5.16 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.adoc
- License: LICENSE
Awesome Lists containing this project
README
⚠️ IMPORTANT: ⚠️ Rico has been put "on hold". To learn what is meant by that please read the blog post and feel free to contact us via rico@karakun.com to clarify open questions.
= Rico Angular Adapter
image:https://travis-ci.org/rico-projects/rico-angular.svg?branch=master["Build Status", link="https://travis-ci.org/rico-projects/rico-angular"]
image:https://nodei.co/npm/rico-angular.png["Rico-Angular on NPM", link="https://www.npmjs.com/package/rico-angular"]
== Usage
You need to have both https://github.com/rico-projects/rico-js[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 https://github.com/rico-projects/rico-samples[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 https://angular.io/api/core/ApplicationRef[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 https://angular.io/api/forms/NgModel[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 (https://github.com/rico-projects/rico-samples/blob/master/todo-list/client-angular/src/app/app.component.html#L17[from rico-samples ToDo list]):
For a complete working example, please refer to https://github.com/rico-projects/rico-samples/tree/master/todo-list/client-angular[client-angular module] of our https://github.com/rico-projects/rico-samples[ToDo List sample].
=== Run library tests
npm run test
=== Run library integration tests
Prerequsite: Have https://docs.docker.com/install/[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 https://www.npmjs.com/package/ng-packagr[ng-packagr] is used via the angular tool chain configuted via `angular.json` file.
== Releases
Releases are done automatically with https://github.com/semantic-release/semantic-release/[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 https://semantic-release.gitbook.io/semantic-release/#commit-message-format[Commit message format] when contributing changes via a PR to this repository. (https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type[List of commit types to be used])
For all details on contributing to Rico, please refer to the https://github.com/rico-projects/rico[main repo].