Thursday, April 24, 2014

Using Angular JS and Ionic on IBM Worklight

AngularJS has become quite a popular framework so I decided to write an example for Worklight using Angular and Ionic.  On the Worklight Getting Starting Page, there are examples for jQuey Mobile, Dojo Mobile, and Sencha Touch.  Worklight is an open platform that allows you to use any HTML 5 based framework.  In my forth coming book, (Modern Web Development with IBM WebSphere) , we show a couple of examples, one using Dojo Mobile with Bootstrap, and another using (jQuery Mobile with requirejs, backbone, and Handlebars).  This video blog will walk you through AngularJS and Ionic.  I have also provided the project archive.  


Project Archive for the example in the video:

Please check the Getting Started Page to get more details on Worklight Concepts.  
Posted by at

13 comments:

  1. Karl BishopApril 24, 2014 at 7:07 PM

    Great walkthrough of using Angular, Ionic, and Worklight

    ReplyDelete
  2. Hazem SalehApril 27, 2014 at 7:52 AM

    Very cool and interactive example of AngularJS with Ionic in WL land. Thanks Roland for sharing this with us.

    ReplyDelete
  3. UnknownJune 9, 2014 at 3:30 PM

    It was great to see how you boostrap angular, and appreciated the use of Ionic - very popular right now. A very useful post with the video walk-through and source code, thanks!

    ReplyDelete
  4. UnknownAugust 4, 2014 at 3:25 AM

    This looks really cool. Can you tell us the steps you took to get the ionic libraries working in worklight. Thanks

    ReplyDelete
  5. UnknownAugust 20, 2014 at 5:02 AM

    This comment has been removed by the author.

    ReplyDelete
  6. UnknownAugust 20, 2014 at 5:09 AM

    Ionic framework uses Angularjs to give the application structure, while Ionic itself concentrates on the client interface. As it were, we see a match between the force of Angular and the magnificence of Ionic UI.

    ReplyDelete
  7. UnknownOctober 23, 2014 at 5:36 AM

    Nice tutorial. I'm using it in a project.
    I would like to know how to have different header for each tab bar?
    I need to add buttons to some tabs (in the header or nav bar) and there is one tab that I don't need neither header nor nav bar.
    Is that possble? How?
    thanks and congrats for the tutorial.
    Cassio

    ReplyDelete
    Replies
    1. UnknownNovember 4, 2014 at 5:40 AM

      The Ionic documentation talks about how to do this: http://ionicframework.com/docs/api/directive/ionTabs/

      I think you would embed within the tab your header rather than have one.

      Delete
  8. UnknownOctober 28, 2014 at 4:06 AM

    Nice tutorial, it's a great help for integrating great mobile technologies in Worklight.
    However, it seems that latest version of Ionic does not integrate well with latest version of Worlight.
    I have made some tests with Worlight 6.2 and Ionic beta 13 and it renders blank page.
    Have you heard about this ?

    ReplyDelete
    Replies
    1. UnknownNovember 4, 2014 at 5:36 AM

      Jerry, please install the latest update for Worklight through the Eclipse market place.

      Delete
  9. UnknownNovember 6, 2014 at 9:01 AM

    Hi Roland. I can confirm Jerry's problem. It also has a discussion here: http://forum.ionicframework.com/t/blank-screen-occurs-with-only-partial-header-when-using-later-versions-of-ionic/6031/6

    It happens early on 1.0.0-beta.2

    ReplyDelete
  10. Efrain MotaNovember 25, 2014 at 8:30 AM

    Hello All.

    I was having the same issue, i downloaded the latest ionic version and tried to use but a blank page is shown, the DOM looks like it is ok, but the render is not performed.
    So i was trying diffent version and i found a solution, i use the lates js version ( * Ionic, v1.0.0-beta.11) and css (* Ionic, v1.0.0-beta.1)

    Afeter some testing it looks like is working. i will continue working on this way

    Saludos

    ReplyDelete
  11. AnonymousApril 9, 2015 at 12:41 PM

    I have imported your project, added the stub to my mobile first platform server, deployed the adapter, but i cannot get the accounts i get this error,

    [ERROR ] FWLSE0099E: An error occurred while invoking procedure [project DoradoBankProject]DoradoBankAdapter/HttpRequestFWLSE0100E: parameters: [project DoradoBankProject]
    Http request failed: org.apache.http.conn.HttpHostConnectException: Connect to localhost:9102 [localhost/127.0.0.1, localhost/0:0:0:0:0:0:0:1] failed: Connection refused
    FWLSE0101E: Caused by: [project DoradoBankProject]org.apache.http.conn.HttpHostConnectException: Connect to localhost:9102 [localhost/127.0.0.1, localhost/0:0:0:0:0:0:0:1] failed: Connection refusedjava.lang.RuntimeException: Http request failed: org.apache.http.conn.HttpHostConnectException: Connect to localhost:9102 [localhost/127.0.0.1, localhost/0:0:0:0:0:0:0:1] failed: Connection refused

    ReplyDelete

Subscribe to: Post Comments (Atom)