Employee Directory Sample App with Ionic and Node.js


Deploy

It 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 was time for an update.

Employee directory is a sample application that allows you to look up employees by name, view the details of an employee, call, text, or email an employee, and navigate up and down the org chart.

ngResource and Node.js REST Services

This new version of the application uses REST services powered by a Node.js server instead of in-memory data.

Running the Application

You can test the application in your browser:

  • Using the hosted version
  • By running the application’s Node.js server locally
  • By deploying the application’s Node.js server on Heroku

You can also run the application as a hybrid app in Cordova.

Check out the Github Repository for detailed instructions.

41 Responses to Employee Directory Sample App with Ionic and Node.js

  1. Mirko August 11, 2014 at 3:42 pm #

    This is great, but there is always one thing bothering me with these mobile apps: how to retain the scroll position when navigating back from the employee detail view to the list of employees….there is something like silentScroll in jQuery Mobile, which is less than ideal…anything better here with Ionic?

  2. Mirko August 12, 2014 at 1:38 am #

    Hi Mirko,

    The scroll position will be saved when you go back in the history. Although in some cases, for example if your list takes some time to be fetched each time you go back, you will have to do some work to get the position to be ‘loaded’ again when your list is done refreshing. What’s your use case?

    • Mirko August 12, 2014 at 6:01 am #

      Back in the history does it mean with the DOM cached? In my case I cannot cache the DOM so I refetch the entire list and then I scroll to the position…which is pretty much what you are suggesting, no? The only problem I have is the list item I tapped will be placed at the top of the screen as I have not figured out yet how to calculate the right offset from the top of the screen.

  3. Andrew Joslin August 12, 2014 at 1:39 am #

    Hi Mirko,

    In Ionic, the scroll position will be saved when you go back in the history. Although in some cases, for example if your list takes some time to be fetched each time you go back, you will have to do some work to get the position to be ‘loaded’ again when your list is done refreshing. What’s your use case?

  4. Arnaud August 12, 2014 at 4:38 am #

    Hi Christophe, thanks for your updated Ionic version!

    Just be careful with Angular image bindings: you should use ng-src=”…” instead of src=”…” because “src” will raise 404 errors (it will try to load the image before the binding):
    http://ionic-directory.herokuapp.com/pics/%7B%7Bemployee.pic%7D%7D 404 (Not Found)

    All you have to do is replacing src=”…” with ng-src=”…”
    https://docs.angularjs.org/api/ng/directive/ngSrc

    This being said, I’m also interested in a solution for the “scroll back” problem! :)

  5. Mirko August 12, 2014 at 6:04 am #

    I also noticed the slide animations are a bit choppy even on my Nexus 5 using the latest Chrome. All good on a iPhone 5S using Safari

  6. Andrew Herrick August 12, 2014 at 7:09 pm #

    First off this is awesome thanks!

    Based on the way this project is currently setup, how would I go about adding a button to the header bar in the “employee-list” template? I only want this button to show up on the home screen and it would bring up a modal.

    I can’t seem to figure out since the ion-nav-bar is sitting at the “root” of the application.

  7. Karthik Bashyam August 18, 2014 at 9:08 am #

    Thank you for posting a nice article.

  8. Michael Ridland August 21, 2014 at 2:48 am #

    Hi

    This isn’t bad, a little bit clunky and it’s still got nothing on Native. You should check out Xamarin you’ll be able to develop much much better apps than this.

    Check out this app, leagues ahead: http://www.michaelridland.com/mobile/asp-net-mvc-xamarin-mashups/

  9. John Christian September 3, 2014 at 9:11 pm #

    You’re amazingly gifted, Christophe. You make it look too easy. I do have a question for you, though…

    I kinda got screwed over by my developer (php developer I introduced to newer things like phonegap) who chose to work on his own (garbage) project while he said he was working on ours (too much of a control freak and needs it all for himself)…

    So my question – where can I find a rockstar phonegap dev who’ll replace him?

    The app is based off my website (currently spaghetti php/mysql) which has been/is pitched as a television show spinoff often, tons of press, user generated, and fairly unique in its space.

    I tend to worry about freelancers…any ideas?

    • Scott September 24, 2014 at 2:50 am #

      I am a bit fan of ODesk.com. Might want to look for freelancers there. Lots of ways to filter the consultant search so you get just what you’re looking for.

      Be sure you talk to them over Skype and get code samples as well, that’ll give you a better idea of their coding style.

      Good luck!

  10. Karthik Bashyam September 6, 2014 at 5:44 am #

    How can i emulate the application in my local machine with node server up in my local machine

  11. PhoneGap7`14 October 21, 2014 at 6:47 pm #

    How come this one does not have the camera API on it to add or change the pictures of the people? Thank you for your time

  12. John October 28, 2014 at 7:42 pm #

    You’re amazingly gifted, Christophe. You make it look too easy. I do have a question for you, though…

    I kinda got screwed over by my developer (php developer I introduced to newer things like phonegap) who chose to work on his own (garbage) project while he said he was working on ours (too much of a control freak and needs it all for himself)…

    So my question – where can I find a rockstar phonegap dev who’ll replace him?

    The app is based off my website (currently spaghetti php/mysql) which has been/is pitched as a television show spinoff often, tons of press, user generated, and fairly unique in its space.

    I tend to worry about freelancers…any ideas?

  13. Joe December 4, 2014 at 9:53 pm #

    The Employee Directory available for download from the Apple App Store is not compatible with IOS 8.x Do you intend to update it to be compatible with the latest IOS 8 release?

  14. Cilt Maskesi December 5, 2014 at 2:41 am #

    Hi,
    You’re amazingly gifted, Christophe. You make it look too easy. I do have a question for you, though…

    will raise 404 errors http://kadinamoda.com/kategori/cilt-bakimi/ 404 (Not Found)

  15. Karmet December 10, 2014 at 4:17 pm #

    Are these and your other samples available with open source licensing?

    Thanks!

  16. Bruno Oliveira January 6, 2015 at 2:01 pm #

    Christophe,

    Loved example, inspired me a lot and helped me on a personal project. However I can not use my Rest server. I do not know what my mistake but the application only works when I submit to your page (‘http://ionic-directory.herokuapp.com/employees/:employeeId/:data’); in services.js file.
    I tried even direct access to a JSON which is exactly what obtained in the search of your page, but I came across the following message – XMLHttpRequest cannot load http://www.alternativefinance.com.br/pear/get.json. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access. -. I would Knowing what can I do to make it work. Thank U

  17. michelbenay January 22, 2015 at 7:06 am #

    all the tutorials are great

    but
    les caractères accentués ne sont pas compris
    malgré charset=utf-8 ?!!

    thanks
    a french ‘hobby’ developper

  18. David January 30, 2015 at 11:08 am #

    Hello. I am trying to find an Employee Directory for use within our city. I really like the speed and look of your sample application. Is there something like this that has some type of administration side where contacts can be edited, deleted, added, etc?

    Thanks,
    David

  19. Ganucks April 1, 2015 at 1:20 pm #

    Hello, i like a lot your app. I run it in node server in local enviroment and works nice. When i build the app in the Phonegap website, It looks like its done without errors, but when I open de app in my android mobile, it doesn’t show the employees which i assume it is because the node won’t started. So how could i fix this to see the app running as in browser ?
    Thanks for your help in advance.

  20. John April 19, 2015 at 11:52 pm #

    Fine! This is password?

  21. John April 19, 2015 at 11:53 pm #

    Why?

  22. forma imalatı November 17, 2015 at 8:48 am #

    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.

  23. çelik raf November 19, 2015 at 1:52 am #

    The advantage of a virtual DOM (also with an eye on performance in some situations)

  24. sohbet December 8, 2015 at 5:10 pm #

    hem o nice to very o yea admin bla bla blog

  25. Zvi February 23, 2016 at 3:27 am #

    Thanks Christophe, but isn’t it a bit of a half & half app? Some of the data is stored on the Node server side ( see: routes/employee.js ) but the pics are at the client side ( see: www/pics , pulled by www/templates/employee-detail.html and the statement ) which makes no sense.

    I wish this would change to having a database on the server, storing all information there, and pulling out the data from the client via an API.

    Maybe a 3rd update of the article?
    Thanks!
    Zvi

  26. sharoon arshad April 24, 2016 at 12:58 pm #

    thanks for sharing this great information with me

  27. Sanjay Mishra March 23, 2018 at 5:07 am #

    Hi,
    Very informative and useful article, i like to read your article very much.

    http://www.airrescuers.com/air-ambulance-services-in-kolkata.html

  28. A Das March 23, 2018 at 5:09 am #

    Hey,
    Really interesting and informative article and it is useful information. Thanks for sharing the great article with us.

    http://www.shantineeroldagehome.org/best-old-age-home-in-kolkata-asansol-baranagar.html

  29. Model Interior March 23, 2018 at 5:10 am #

    Hi,
    I just wanted to say thanks.I enjoyed nice & excellent blog post.

    http://www.modelinteriors.co.in/interior-decorator-in-kolkata.html

  30. J Barman March 23, 2018 at 5:17 am #

    Thanks for sharing this great article. I read your post and me really like it.
    http://lcdledtvservicecentre.com/lcd-led-tv-repairing.html

  31. Nupur April 20, 2018 at 5:43 am #

    Hi,
    Thanks for the great post keep up the amazing work.

    http://www.sunrayshealthcare.org.in/our-services.php

  32. CIIT Noida April 21, 2018 at 3:07 am #

    I also like composing something if my downtime. So I could find out something from your write-up. Thanks.

    Hadoop Training Institute in Noida

  33. CIIT Noida April 25, 2018 at 2:51 am #

    I actually enjoyed reading through this posting.Many thanks

    Best B.Tech College in Noida

  34. Avishek Roy May 4, 2018 at 6:13 am #

    wonderful details …..loved it …
    Thanks For Sharing with us.
    http://clickamoment.com/

  35. Gopal Shaw May 4, 2018 at 6:24 am #

    Nice Post! Thank you for sharing great information.

    http://www.ledlcdtvservicecenter.com/led-lcd-tv-repair.html

Trackbacks/Pingbacks

  1. Chrome App Node.js | Free Documents App - January 16, 2015

    […] Employee Directory Sample App with Ionic and Node.js … – It 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 was time for …… […]

  2. Mobile Web Weekly No.19 | ENUE Blog - August 17, 2015

    […] Employee Directory Sample App with Ionic and Node.js […]

  3. Node Weekly No.48 | ENUE Blog - August 19, 2015

    […] Employee Directory Sample App with Ionic and Node.js […]

  4. Deploying Ionic1 as a webapp to Heroku | RaSor's Tech Blog - June 28, 2017

    […] Tip: Sample app: http://coenraets.org/blog/2014/08/employee-directory-sample-app-with-ionic-and-node-js/ […]

Leave a Reply

css.php