rico-angular v1.0.7

= 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-js and rico-angular to your project:

npm install git+https://github.com/rico-project/rico-js.git#1.0.1 npm install rico-angular

So that these lines end up in your package.json:

"rico-angular": "^1.0.3",
"rico-js": "git+https://github.com/rico-project/rico-js.git#1.0.1",

=== 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]):

<input type="text" (ngModel)="model.newItemText" (keyup.enter)="addTask()" class="form-control" placeholder="Task">

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