Sample Mobile Application with Ionic and AngularJS

February 5, 2014 in Angular.js, Cordova, Ionic, PhoneGap

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.

  • Ben

    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

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

      • 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.

  • 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.

  • José Augusto

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

  • 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?

    • Ashish Singh

      I think the main reason Ionic’s CLI wraps cordova is because they are looking to extend the functionality of the cordova.

  • 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.

  • Pingback: Tutorial: Build an sample app with Ionic and AngularJS()

  • Horst

    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?

  • Pingback: Sample Force.com Mobile Application with Ionic and AngularJS | Christophe Coenraets()

  • Pingback: Quickly start an app using Yeoman, Ionic, AngularJS and PhoneGap | Blog MNCC()

  • Stef

    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

      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.

      • Vikas

        This code is not working. :(

        I want to implement dynamic search, Help me.

  • Raphael Cohen

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

    • Mangap

      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

  • 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!

  • Pingback: Employee Directory Sample Application with Ratchet 2.0 | Christophe Coenraets()

  • Oluwafemi Korede

    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.

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

  • 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.

  • 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/

  • pierre

    Great stuff ! thanks a lot.

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

    Greetings.

    • bhuvana

      after cloning what to do i getting error i am not able to run in the browser

    • bhuvana

      i am newbie

  • 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.

  • Pingback: Sample Mobile Application with Ionic and AngularJS | Christophe Coenraets - appgong()

  • 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 ?

  • Bob Ken

    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

      hi Bob ken,

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

      Thanks

      • keilo

        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!

  • ibrahim eray

    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 .

  • ibrahim eray

    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 .

    • developer

      hey i have same question arise ? regarding tabs
      do u find any answer please send me on email……. wiotal source code also send.
      thanx

  • 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.

  • 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.

  • 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!

  • Great Application shared with us. thanks

  • Bruno Carvalho

    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.

  • 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.

  • Pingback: Employee Directory Sample App with Ionic and Node.js | Christophe Coenraets()

  • mrza

    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.

  • jerry davidson

    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.

  • Pingback: Worker Listing Pattern App with Ionic and Node.js | PakUltimate()

  • Hi, thanks for the nice tutorial on Ionic framework. I would like to add another two subcategories in the application. Can you please provide any suggestion?

  • Smartphones are a huge success story of the past two decades – and the devices get more powerful each year. Many businesses achieve significant benefits by using mobile technology – including those in both industrial and commercial markets. Deploying applications to mobile users involves a unique set of challenges and choices. This article provides a background on the current mobile technologies available.

  • Pingback: Quickly start an app using Yeoman, Ionic, AngularJS and PhoneGap | thanhpegasus()

  • Pingback: Zero to One: Building Mamoru – Weeks 5 and 6 | Something Worth Reading()

  • Pingback: Sample Application with Ionic 2 | Christophe Coenraets()

  • Fabrics we use in our form; The first-class micro-interlock; flex-fit, anti-bacterial, it has a thermo-balance, and immediately drying. This gives you the freedom to move your soccer jerseys of the match; It is designed stylish enough to be worn on a daily basis. Our models are produced in two types as my special jerseys and other digital printed.
      His highest production of our company, we use the sport socks products: cotton, cotton, polyester, nylon and lycra. It includes anti-bacterial..http://jonsunsport.com/futbol-takim-formalari.html

  • duka ile tanistircam sizi.

  • Sumit Basu

    Excellent tutorial. Very useful. Thank you.

    • bhuvana

      after cloning what to do i getting error i am not able to run in the browser

      • bhuvana

        could u plz help me i dnt know what to do the next

  • Minacs Developer

    checkout this ionic seed project https://github.com/iamntg/ionic_1x_seed

  • Asif

    excellent tutorial. http://www.rubycampus.com

css.php