To use such a framework in the MobileFirst Platform Foundation, you need to make a couple of adjustments to ensure that the framework and the platform are both able to start, or bootstrap, correctly. This blog post will walk you through the steps to set up Ionic correctly with MobileFirst Platform Foundation. These principles should apply more widely. In this post, I will assume some basic knowledge of MobileFirst Platform Foundation for creating and previewing hybrid apps. Further information on this can be found in the MobileFirst Platform getting started guide.
To provide a useful demonstration of the integration, we are going to use the Todo app provided by Ionic. Download this from their Git repository, and extract it on your file system.
In the MobileFirst Platform Studio, create a new hybrid application project, Todo, containing a new app called TodoApp. (If you don’t wish to use the Studio environment, this can all be done using the command-line interface too.)
If you’re not familiar with the structure of a MobileFirst Platform app, it will be worth familiarizing yourself with the structure used. The content for the hybrid application will be found in Todo > apps > TodoApp > common, where all cross-platform development is done.
- index.html will handle the dependencies for the app, and in the sample it contains the user interface too (as a best practice you would likely remove this into separate files).
- js/main.js will handle the bootstrap processes for the MobileFirst Platform Foundation in the important method wlCommonInit().
Now let’s copy the contents of the Todo app into the MobileFirst Platform Foundation. The Git download actually provides a lot of artifacts that we don’t need. We will just take the artifacts needed to run the Todo app.
Before copying in the new code, rename the existing index.html to index.orig. We will need to copy some dependencies from the original afterwards.
Copy the following files from the Ionic Todo app on your file system into the MobileFirst Platform Foundation project. (You can just use drag and drop, or import from the file system.)
- index.html – application user interface
- js/app.js – application code
- css/app.css – simple design overrides
- lib folder – Ionic and AngularJS frameworks
It may be interesting to note that this application will now already run if you right-click on the common folder and select Run As > Preview. However, the MobileFirst Platform Foundation needs to bootstrap first, to ensure that all the MobileFirst Platform libraries are available to the application. The following steps walk through all that is needed there.
Make the following small changes to the application code:
- Copy the MobileFirst Platform Foundation dependencies into the new index.html. Copy the three <script> tags from the bottom of index.orig and add them just inside the closing <body> tag. It is primarily the main.js and initOptions.js files that are of importance here because they help configure the MobileFirst Platform Foundation bootstrap.< /br>
- From index.html provided by the Todo sample, remove ng-app=”todo” from the <body> tag. This would otherwise automatically bootstrap Angular before we’re ready for it.< /br>
- While we’re in the index.html, remove the <script> tag containing “cordova.js”. MobileFirst Platform Foundation will provide access to all Cordova and related libraries.
- Open the js/main.js file and add the following code to the wlCommonInit method. This will manually bootstrap AngularJS after MobileFirst Platform Foundation has been bootstrapped.
Preview the application by right-clicking on the common folder and selecting Run as > Preview. This should run the Todo app correctly in the browser. These small changes are all you need to run the Ionic (and actually any AngularJS) application in MobileFirst Platform Foundation.