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.

  • Mirko

    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?

  • Mirko

    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

      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.

  • Andrew Joslin

    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?

  • Arnaud

    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! :)

  • Mirko

    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

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

  • Karthik Bashyam

    Thank you for posting a nice article.

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

  • John Christian

    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

      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!

  • Karthik Bashyam

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

  • PhoneGap7`14

    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

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

  • Joe

    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?

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

  • Karmet

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

    Thanks!

  • 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

  • Pingback: Chrome App Node.js | Free Documents App()

  • michelbenay

    all the tutorials are great

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

    thanks
    a french ‘hobby’ developper

  • 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

  • Ganucks

    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.

  • John

    Fine! This is password?

  • John

    Why?

  • Pingback: Mobile Web Weekly No.19 | ENUE Blog()

  • Pingback: Node Weekly No.48 | ENUE Blog()

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

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

  • hem o nice to very o yea admin bla bla blog

  • Zvi

    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

  • thanks for sharing this great information with me

  • Pingback: Deploying Ionic1 as a webapp to Heroku | RaSor's Tech Blog()

css.php