IBM Worklight 6.1 - How to integrate Ionic framework?

I am trying to add the ionic framework to my app.

For this purpose I have downloaded the "starter template" from the ionic website. The app's index.html file seems to be running on the browser correctly and without any problem. But after building it for the Android environment, the app shows only a white screen with nothing in it.

The following is the Worklight project: https://dl.dropboxusercontent.com/u/54761340/angulartest.zip

I don't quite understand how this was running anywhere, as the HTML is borked:

  • duplicate HTML and BODY elements
  • incorrect placement of references to .css and .js files...

Do the following:

  1. Open angulartest\apps\angulartestapp\common\index.html and replace its contents with the following:

    <!DOCTYPE html>
<html ng-app="ionicApp">
  <head>
      <meta charset="UTF-8">
      <title>Ionic</title>
      <link rel="shortcut icon" href="images/favicon.png">
      <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/ionic.min.css">
      <script src="js/ionic.bundle.min.js"></script>
      <script>
          window.$ = window.jQuery = WLJQ;
      </script>
  </head>

  <body ng-controller="MyCtrl">
      <ion-header-bar title="myTitle"></ion-header-bar>
      <ion-content has-header="true" padding="true">
          <h2>Content</h2>
      </ion-content>

      <script src="js/index.js"></script>
      <script src="js/initOptions.js"></script>
      <script src="js/main.js"></script>
      <script src="js/messages.js"></script>
  </body>
</html>

  2. Right-click on the angulartestapp folder and choose Run As > Run on Worklight Development Server

  3. Right-click on the generated Android projet and choose Run As > Android application

I've tested it in Worklight Console's MBS as well as Android Emulator. Seems to be working, whatever it is...

<body id='content'>
</body>

it will conflict with worklight.

you just try to remove the id='content' and try again.

but this may make that deviceReady() function will not be ready forever.