Sample Mobile Application with Ionic and AngularJS

ionic_100

In the ever evolving quest for the best mobile application development stacks, I’ve recently been looking at Ionic. Ionic is a library that provides mobile-optimized UI components to build “native-feeling” hybrid applications.

Where does it fit?

frameworks

Ionic fits in the UI layer. But unlike other libraries in that space (Twitter Bootstrap, Foundation, Ratchet, Topcoat and others), Ionic is not agnostic in terms of the underlying architectural framework you are using. Instead, Ionic is built on top of AngularJS to provide a complete solution for developing applications that are both well architected and native-feeling. That’s great news if you are an Angular developer. If you use another architectural framework, you can still use the Ionic CSS stylesheets, but you won’t get the powerful UI interactions, gestures, and animations.

I’ve been impressed with the number and the quality of the components and interactions available in Ionic. My employee directory sample app (below) may never have felt that close to native.

Cordova Integration

Another thing I like about Ionic is its integration with Cordova. In fact, the Ionic CLI is built on top of the Cordova CLI. Here is how you install the Ionic CLI, create a seed project, and run it in the emulator or on a device:

npm install -g ionic
ionic start myApp
cd myApp
ionic platform ios
ionic emulate ios
ionic run ios

This should look very familiar if you are using Cordova or PhoneGap.

Sample Application

IMG_0080IMG_0079

To further experiment with Ionic, I created an Angular/Ionic version of my employee directory application with the seed project as a starting point. You can run it in the browser or on a mobile device as a Cordova/PhoneGap app. You can also run a hosted version of the application here.

Source Code

The complete source code for the application is available in this repository on GitHub.

39 Responses to Sample Mobile Application with Ionic and AngularJS

  1. Ben February 5, 2014 at 1:58 pm #

    Hey Christophe,

    Thanks for the awesome write up on Ionic! I think it’s a great introduction to the framework, and the simple application you made shows off the capabilities nicely.

    I’ll be interested to hear more about your development process with Ionic. There’s a lot of great stuff lined up for the Beta…

    Cheers!

    • Christophe Coenraets February 5, 2014 at 2:38 pm #

      Thanks Ben! Looking forward to seeing what comes next in the framework. Awesome job so far!

      • Anil July 1, 2014 at 1:11 am #

        Hi Chris,

        i have moved “var employees” into a json file. I try to fetch data and everything breaks down. what changes should i make exactly in the services and controllers file.

        i tried this, but its not fectching datas

        return {
        findAll: function() {
        var deferred = $q.defer();

        // simple get to an hypothetical url
        $http.get(‘http://your.api.server.com/all’)
        .then(function(data) {
        deferred.resolve(data)
        })

        return deferred.promise;
        },

        findById: function(employeeId) {
        var deferred = $q.defer();

        // this is a simple post that have to be customized, of course
        $http.post(‘http://your.api.server.com/byId’, {id:employeeId})
        .then(function(data) {
        deferred.resolve(data)
        })

        return deferred.promise;
        }
        }

        thanks.

  2. Trevor Miller February 5, 2014 at 3:06 pm #

    Hi Christophe,

    I love it! I am very interested in Ionic and have started to look into it. Thank you for writing a post about it. You should make a video tutorial series for Ionic…nobody has done that yet, and I think it would reach an ever increasing amount of people in the hybrid HTML5 app development market. I know I would be interested.

  3. José Augusto February 5, 2014 at 9:32 pm #

    Unlike other employee directory demos you dropped the real time search on key press. Any reason why?

  4. Raymond Camden February 5, 2014 at 11:25 pm #

    I have to say – it seems weird that the ionic CLI wraps cordova. Is there a reason for that? Just seems… I don’t know. Do you know why they did it?

  5. Raymond Camden February 5, 2014 at 11:28 pm #

    So yeah – right away i run into an oddity. “ionic emulate” requires you to specify a platform whereas “cordova emulate” will automatically run all platforms you’ve installed. It is a minor thing I guess, but one reason why I’d stick to the cordova cli and just use ionic to create the seed project.

  6. Horst February 6, 2014 at 2:52 am #

    I have tested the hosted version. It run very good on iOS, but on Android the scrolling and the whole behavior is not smooth. I think ionic uses the overflow:scroll. I had this in an app of mine, but Android users have begged for the old version without. This was also from Android user with new and fast devices.

    I am serching for a long time to get a more native look of cordova apps, but the Android glitches always slowdown.

    How is your experience? Have you feedback from Android users?

  7. Stef February 10, 2014 at 5:48 pm #

    Hi Christophe,

    Great sample application!
    Is there a way to show the search results when typing, without having to push the search button?

    Cheers!

    • mani April 30, 2014 at 3:28 am #

      The search function would be better implemented as a custom filter on the ng-repeat imo. Here’s a filter that I adapted from a Stackoverflow answer I found a while ago (don’t have the reference anymore):

      $scope.searchFilter = function (obj) {
      var res = new RegExp($scope.searchKey, ‘i’);
      return !$scope.searchKey || res.test(obj.firstName) || res.test(obj.lastName);
      };

      Which uses the ng-model of the search field, and which can test against any properties of the object that’s passed in (I arbitrarily chose the names in this case). Then in the ng-repeat you just do:

      ng-repeat=”employee in employees | filter:searchFilter”

      This way the results show as the user types – which removes the redundancy of clicking search after entering a string only to find no matches. Naturally it also means less space taken by unnecessary buttons.

  8. Raphael Cohen February 22, 2014 at 3:18 am #

    Seems very promising, although a lot of glitches on android. Hope they will clean things up in the coming releases.

    • Mangap May 22, 2014 at 8:39 pm #

      Have you try the latest version?
      Can you list some of the important problems. So developer can look at it and solve it?
      Please add more data, what is the problems, what is the Android version and device used

  9. Mark Simon February 26, 2014 at 12:14 am #

    The ionic CLI in your Cordova Integration did not work on OSX, better results with cordova (as described on the ionic install page). Thanks for ur code!

  10. Oluwafemi Korede March 15, 2014 at 8:15 am #

    Hi Christophe, great application you have here…
    I have a few questions bothering me , I will love you to help me out with.

    I want to create a mobile app with angularjs that should be able to take pictures with the device camera and send the image to a web api(written with php)..

    1. I will like to know if I angularjs has that kind of capability or do I need to use phonegap api to do that
    2. How do I use angularjs to send post data from a phonegap compiled app to a web api

    Thanks.

  11. Mobile Application Source Code March 16, 2014 at 6:38 am #

    Rhino Mob is a Social and Mobile Game Company. We create High Quality, Visually Entertaining and Addictive Games for the iOS and Android Platforms.

  12. intellisoftteam April 5, 2014 at 9:32 am #

    I download this source code but I not able to import into Eclipse kepler 4.3 and I observed there is no .setting folder available in source code.

  13. Jesús Carrera April 18, 2014 at 8:55 am #

    I made a tutorial on how to integrate PhoneGap with Angular and Ionic using Yeoman if anyone interested: http://www.frontendmatters.com/getting-started-mobile-app-development-phonegap-yeoman-angularjs-ionic/

  14. pierre April 24, 2014 at 6:38 am #

    Great stuff ! thanks a lot.

    You can use ng-src in the “employee-detail.html” to refer the employee’s picture.

    Greetings.

  15. Roboform April 27, 2014 at 5:17 am #

    I’ve had factors show up some months when i signed up for the
    item. These techniques are very valuable in jump starting your
    business to the extreme. If you want to make money
    from home, surveys that pay are one of the best methods, but you must to know the best practices to make the most of them.

  16. Fabio Santos May 26, 2014 at 6:11 pm #

    Hello !! I am from Brazil and I am trying expose the work with Ionic here. Have you ever experience with Ionic + Windows Phone ? If you already had, could you give us more details ?

  17. Bob Ken May 28, 2014 at 11:22 am #

    Hi,
    I am trying to get the data from a json, but I am missing something… I am new to this and I try to practice. This is the part that I have modified but it would not get the data from the json file.

    .factory(‘EmployeeService’, function($q, $http) {

    var employees = $http.get(‘js/data/test.json’);

    And this is the json file format:

    [
    {"id": 1, "firstName": "James", "lastName": "King", "managerId": 0, "managerName": "", "reports": 4, "title": "President and CEO", "department": "Corporate", "cellPhone": "617-000-0001", "officePhone": "781-000-0001", "email": "jking@fakemail.com", "city": "Boston, MA", "pic": "James_King.jpg", "twitterId": "@fakejking", "blog": "http://coenraets.org"}
    ]

    It would be great if you can give me some hint.

    • Anil June 30, 2014 at 12:38 am #

      hi Bob ken,

      if you’ve got the solution can u share with me.

      Thanks

      • keilo August 10, 2014 at 6:56 am #

        Have You managed to get this to work from JSON file? I too have tried without success.
        Would appreciate if you can share your findings or ways to achieve it.

        cheers!

  18. ibrahim eray June 3, 2014 at 8:16 am #

    Hello
    I have downloaded source code . It eats very well . but I have a question.
    I want to create a tabbar . But does not work. Because of the iconic script. somehow I can not use ICONIS javascript in my code.

    If I add below given line , your program does not work anymore ..

      

    But I want to add a tab bar .
    If I add this code also , it does not work well .

    What do I coll, so that I can use given above Tabbar and Ionic activate JavaScript language can use?

    Thank you for your response .

  19. ibrahim eray June 3, 2014 at 8:17 am #

    Hello
    I have downloaded source code . It eats very well . but I have a question.
    I want to create a tabbar . But does not work. Because of the iconic script. somehow I can not use ICONIS javascript in my code.

    If I add below given line , your program does not work anymore ..

       script src=”http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js”

    But I want to add a tab bar .
    If I add this code also , it does not work well .
    <!–

    –>
    What do I coll, so that I can use given above Tabbar and Ionic activate JavaScript language can use?

    Thank you for your response .

  20. Alisia June 15, 2014 at 9:54 am #

    There are tons of games watch dogs serial code generator such as Parking GamesMacromedia Peep player
    is rated by difficulty, if you do it. Abbreviations Used in clutch plates.
    The online game now that they’re exciting. The symbols and avoid jellyfish.

    We run our own, or” Null Data” value for the iPhoneThere is a much
    faster game play into daily routines or provide a distraction. Moreover, challenges
    and enemies. So much promise Please enjoy the arcades to enjoy them for premium.

  21. cool video game names June 21, 2014 at 5:23 am #

    Gamers see a statue. They feel as an art-class project by three watch dogs serial key students at the good merchandise concerning the situation for a great gaming experience online.
    SpongeBob also offers an advanced board game in any outposts.

    So if you get out.

  22. Very nice post. I simply stumbled upon your weblog and wished to mention that I’ve really enjoyed surfing around your weblog posts. After all I’ll be subscribing in your rss feed and I hope you write once more soon!

  23. omitsolutions June 24, 2014 at 4:18 am #

    Great Application shared with us. thanks

  24. Bruno Carvalho July 24, 2014 at 5:58 pm #

    Great stuff! I am using to create a tourist guide. If possible, explain to us how to use an external data source (json, with $ http) tried several ways and could not implement.

    Thanks and keep up the job.

  25. Jay Garcia July 30, 2014 at 12:21 pm #

    Thanks for the blog post. There is an issue w/ your instructions. You need to be root (via sudo, ideally) to install iconic. It seems that it wants to issue a mkdir on /usr/local/lib/node_modules, where /usr/local/lib is protected. Simple fix to line #1 is “sudo npm install -g iconic”.

    Here’s what I see: http://www.screencast.com/t/vsNkmhNlFn

    Thanks again for the post dude.

  26. mrza August 26, 2014 at 2:06 am #

    dear,
    i’m working on a ionic project.
    i need to set gradient color to header, it’s ok on browser , but whene i run it on android device ver4, it show only on color.
    do you know where is the problem ?

    best regards.
    mrza.

  27. jerry davidson September 24, 2014 at 9:33 pm #

    I am looking for someone that can program in ionic for a app we are trying to develop. we have a framework available for the MVP once we have made contact with someone.

Trackbacks/Pingbacks

  1. Tutorial: Build an sample app with Ionic and AngularJS - February 6, 2014

    […] The source code can be downloaded from GitHub. You can find the article here. […]

  2. Sample Force.com Mobile Application with Ionic and AngularJS | Christophe Coenraets - February 6, 2014

    […] my previous post, I wrote about Ionic, a new UI framework that’s built on top of AngularJS and that provides […]

  3. Quickly start an app using Yeoman, Ionic, AngularJS and PhoneGap | Blog MNCC - February 10, 2014

    […] Sample Mobile Application with Ionic and AngularJS […]

  4. Employee Directory Sample Application with Ratchet 2.0 | Christophe Coenraets - February 27, 2014

    […] Ionic (built on top of AngularJS) has a lot of momentum in this space right now. It’s good to have options, especially if you are using another architectural framework. You can read about the Ionic/AngularJS version of the same application in this post. […]

  5. Sample Mobile Application with Ionic and AngularJS | Christophe Coenraets - appgong - May 6, 2014

    […] Sample Mobile Application with Ionic and AngularJS | Christophe Coenraets […]

  6. Employee Directory Sample App with Ionic and Node.js | Christophe Coenraets - August 11, 2014

    […] has been six months since I posted the first version of the Employee Directory app built with Ionic and AngularJS. Ionic has been moving fast, and it […]

Leave a Reply

css.php