Getting Started with Angular and Rho

Angular JS is an immensely popular JavaScript framework for creating dynamic, responsive web pages with built in support for MVC.  Angular can be used for desktop, tablet or mobile applications and is the engine behind Ionic which there was a recent previous blog about.  Any framework that renders the application’s view in an HTML5 compatible browser can build their applications in Angular and Rho is no exception.  Other have gone into more detail on Angular specifics but I wanted to share my experience on using Angular and Rho together.

If you’re new to Angular I highly recommend following their standard tutorial that runs you through the basics of creating an Angular apps and some of the fundamental concepts, there are countably infinite tutorials on Angular JS already on the web so for the rest of this blog I’ll assume at least a basic working knowledge of Angular.

To get started I’ve uploaded a RhoElements application that uses Angular to github, https://github.com/darryncampbell/ng-rho-demo.  You may notice more than a passing resemblance to the official Angular tutorial. Please go ahead and clone the demo to your local disk.

Pre-Requisites:

You’ll need NodeJS installed on your machine and accessible from a command prompt in order to get going as well as RhoMobile Suite.  I've developed this example with RhoMobile Suite 5.1 so I recommend you use that but previous versions should also work.

Since it’s easier to develop web applications on the desktop it makes sense to start there.  Navigate to the public directory of ng-rho-demo and install the node dependencies:

/ng-rho-demo/public>npm install

This will install the dependencies of the application including angular and a local http server we can use to test our application.  Start the server with the following command

ng-rho-demo/public>npm start

Now launch your favourite web browser and navigate to http://localhost:8000 to see the application.

To see the application running without any of the above steps then head over to http://darryncampbell.github.io/ng-rho-demo/public/index.html

Since the application UI is designed for mobile devices you’ll see it does not render properly on the desktop in the detail view.  Chrome has a “device mode” to simulate viewing the page on a device,

https://developer.chrome.com/devtools/docs/device-mode that makes the page render well.

What is happening?

At this stage we have no dependencies on Rho, we are just viewing the Angular application in our web browser.  Since Angular relies on a lot of dynamic JavaScript, the browser will prevent it running from the local file system so we need to run a local server.  I recommend having a look through the code at /ng-rho-demo/public and noticing that this is just a standard Angular application:

• Bower_components: The dependencies installed by bower including Angular itself
• Css: The application’s CSS.  I’m not a graphic artist.
• Img: The images of Zebra devices which will be shown in our application
• Js: JavaScript files:
  
  • App.js: Angular bootstrapping and routing
  • Controllers.js: Controllers for our device list and device detail view.  Notice how the detail controller makes use of the Rho barcode API to enable the barcode scanner
  • Directives.js: empty
  • Filters.js: An example filter that prepends the barcode data with an arbitrary string depending on the scanned data.
  • Rhoapi-modules.js: This is the Rho API as you’ll find in any Rho application
  • Services.js: Empty.  describes how you can expose the Barcode API through an Angular service should you choose to do so but in this example we take the more simple route.
• Node_modules: The dependencies installed by npm.  Take care to delete this folder prior to building your Rho application as it will be quite large.
• Partials: The views associated with both the list and detail pages
• Devices: Information on the Zebra devices

Compiling for Rho

So far, everything we have done has been in the web browser with no Rho dependencies but now we want to use Rho for two things in this example:

1. Produce a native package so we can install it as an application on our mobile device
2. Take advantage of native device features through JavaScript

Firstly, add in JavaScript capabilities by uncommenting the rhoapi-modules.js script include in the following file: ng-rho-demo/public/index.html

Important: Before compiling make sure you delete the following folder: \ng-rho-demo\public\node_modules as this contains node dependencies and is far too large to be included in the native app

/ng-rho-demo/public>rmdir /S node_modules
/ng-rho-demo/public>cd ..
/ng-rho-demo>rake device:android:production

The application is now building for Android provided you have RhoMobile Suite installed and have configured it appropriately to point to your Android build chain.

Whilst the application is compiling, open up the following file: ng-rho-demo/public/js/controllers.js and observe the DeviceDetailCtrl controller:

if (typeof Rho !== 'undefined')
  {
    Rho.Barcode.enable({}, function(scan)
      {
        $scope.barcodes.push(scan);
        $scope.$apply();
        window.scrollTo(0,document.body.scrollHeight);
      })
  }

Here we test for the existence of the Rho namespace which will be present after we included the rhoapi-modules.js file.  This is just a quick (and dirty) way to allow us to develop our application view and business logic on the desktop before moving to the device.

The Barcode API is being called just like it is in a standard Rho application, this particular example is adding the scanned data to the model scope which gets displayed in the 'device-detail' view after running through an Angular filter.  You can run this example on any supported Zebra Android device to see the scanner beam but on some of our older models you will also need to ensure that datawedge is manually disabled prior to scanning in Rho.

Note: If you do not have a RhoElements license you won’t be able to build the application.  You can still use Angular in any Rhodes application, just modify the example to remove “app_type: rhoelements” from ng-rho-demo/build.yml and remove the JavaScript scanning logic from controllers.js.

rhobundle:
  exclude_items:
  - thumb.db
#app_type: rhoelements
capabilities: []