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.
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:
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
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?
- 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
- 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:
- Produce a native package so we can install it as an application on our mobile device
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
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')
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.