Home > Uncategorized > AngularJS and BlackBerry 10 Webworks

AngularJS and BlackBerry 10 Webworks

webinspector
AngularJS, and in particular, the ionic framework is a great way to develop Javascript apps, with best-practices baked in. It gives y0u two-way data-binding out of the box, and encourages you to separate logic and display, as well as keeping the global namespace clean. – So, I decided to give it a go, and develop an app using the ionic framework, which is based on AngularJS.

So, after getting it up and running on iOS and Android, after a few tweaks, my last platform was BlackBerry, and when firing it up on the simulator, I was disappointed to see that I couldn’t click on any of the links on the list; which was a simple rendering as follows:

 

<ion-list>
<ion-item ng-repeat=”item in data” type=”item-text-wrap” href=”#/tab/company/{{item.cacheId}}”>
{{item.title}}
</ion-item>
</ion-list>

Nothing special there, and there was no sign of the bug in Chrome, so I couldn’t debug it locally. I needed a way to debug it directly on the device. Then I remembered the remote web inspector. I’d heard of it, but never used it.

Firstly, to enable it, open the browser on the Z10 emulator, and press … => settings => developer tools => web inspector => ON. It shows a IP address, and port, you type this into any webkit browser on the same local network, and then select your application from the list.

When using bbwp to build your bar file, use the -d switch to enable remote web inspector.

You can then see console.log output, and run jquery commands against the UI. I ran the command $(“.item-content”) to see how  AngularJS had rendered the list, and I saw the problem immediately. AngularJS had “sanitized” the URL links like so href=”unsafe:local://index.htm#…” which meant that they would be blocked. The solution I found to this, could be improved, but it worked for me:

setTimeout(function () {
console.log(“SearchResultCtrl – Desanitizing… BB10 requirement”);
$( “.item-content” ).each( function( index, element ){
$(this).attr(“href”,$(this).attr(“ng-href”));
});
}, 2000);

And, then when I re-built and deployed the app back on the z10 simulator, it worked like a charm.

In hindsight, perhaps in future, I’ll just wrap my android APKs to run on the BB10 devices, but for the moment, I’m still going to stick with Webworks.

 

Advertisements
Categories: Uncategorized
  1. Dan Slack
    May 3, 2014 at 1:55 pm

    A simpler way to handle this is to do something like:

    angular.module(‘myApp’, [],function ($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|local):/);
    })

    Unfortunately, if the whitelist changes later, this will be out of sync, but, otherwise, it works really well.

  2. February 12, 2015 at 1:01 pm

    Thank you for this, definitely helped me 🙂

  3. piflechien
    September 6, 2015 at 6:27 pm

    Actually you could just whitelist all href by using
    app.config([‘$routeProvider’,’$compileProvider’,function($routeProvider, $compileProvider){
    $compileProvider.aHrefSanitizationWhitelist(‘./’);

    Then your links will work in your app.

    • Gøran
      January 11, 2017 at 1:49 pm

      app.config([‘$compileProvider’, function($compileProvider){

      $compileProvider.aHrefSanitizationWhitelist(‘./’);
      $compileProvider.imgSrcSanitizationWhitelist(‘./’);
      }]);

      Worked for me! Big thx!!!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: