OpenUI5 or AngularJS? How about both?

SAPUI5 has just been open sourced as OpenUI5 and provides a lot of features.  AngularJS is a great javascript library that can also add a lot of power to your application.

Let’s compare some of the features of the two frameworks.  Here’s two input fields beside some text. They both look similar.

Let’s look a bit behind the scenes at how to code them. First in UI5 based on the OpenUI5 sap sdk example:

Something similar in Angular can be done directly in the html:

There are similar templating options in OpenUI5 so we can do something almost the same without livebinding by using handlebars:

Along with just a bit of model binding in javascript (see the live examples).

Wouldn’t it be nice if we could use Angular model binding with OpenUI5 controls? What if we could also include OpenUI5 controls such as the datepicker  directly in our html using some custom tags?

Imagine we could type the following:

to produce an OpenUI5 datepicker and then just use the curly braces to show the information somewhere else:

Angular can help us do this with its concept of directives. Directives are a way to extend html new tricks and is also how we can use Angular models to bind data. Once we have the directive we can re-use it very easily in our html.

First is the Angular controller. In the controller the model is plain old javascript:

Then we create an Angular directive and initialize the datepicker. The main steps are:

1. Angular setup to tell it to link to an element and use the model passed into the element
2. Setup the OpenUI5 datepicker and initialize with the model and some attribute tags
3. Setup the binding on the change of the datepicker
4. Setup the binding on the Angular change of a model

All that’s left is to add the datepicker to our html. We’ve even added a custom attribute to set the locale as shown for the start date.

This will give us:

Checkout the live example on jsbin. In the jsbin example I’ve also added a filter to format the date. Be sure to open in Chrome or Firefox since the cdn version of OpenUI5 doesn’t work well with IE.

While there is a bit of code for the setup of the control and the directive, we gain some nice things:

• the controller doesn’t need to know about the ids of the html. Placeat is done with a tag. Wherever the tag is placed, the new control is created.
• binding can be done in the html view just by having the same ng-model

I hope this shows some ways that Angular can be used along with OpenUI5. Now you don’t have to choose between the two, you can use both!