Sample Mobile Application with AngularJS

AngularJS

In recent months, I have been sharing different versions of the Employee Directory sample application built with different technology stacks, different frameworks, and different back-end (REST services) implementations. Recent versions include:

A number of you have asked for a version of the application built with AngularJS. So here it is.

You can experience the application below:

Click here to run the app in a full browser window.

This version also uses the new Topcoat CSS library for the application’s mobile skins.

Source Code

The source code for this sample application is available on GitHub: http://github.com/ccoenraets/angular-directory

Data Services

The application comes with two different implementations of the data services:

  • The in-memory data services (default) are implemented in memory-services.js and provide an-out-of-the-box experience with no server dependency.
  • The REST data services are implemented in rest-services.js and provide a more real-life implementation.

To run the application with the REST services:

  1. Make sure Node.js and MongoDB are installed on your system
  2. Go to the angular-directory/server folder and run:
    npm install
  3. Run:
    node server
  4. In app.js, change:
    angular.module('myApp', [
        'ngRoute',
        'myApp.controllers',
        'myApp.memoryServices'
    ]).
    

    to:

    angular.module('myApp', [
        'ngRoute',
        'myApp.controllers',
        'myApp.restServices'
    ]).
    
  5. To avoid cross-domain issues, access the application from the following URL:
    http://localhost:3000

28 Responses to Sample Mobile Application with AngularJS

  1. Jonathan November 5, 2013 at 6:07 pm #

    Sent a PR to add animation

  2. Michael Sync November 5, 2013 at 8:50 pm #

    How do you make sure that your backend service can be called only from your front (not others)?

    I understand that it’s just a simple app.. I am seeking your advice on how you guys do it in real app.

    Thanks!

    • Zenobius Jiricek December 4, 2013 at 7:37 pm #

      @Christophe Coenraets

      You might like to checkout maker.github.io/ratchet/

      @Michael Sync

      You’d create a restrictive CORS policy and possibly also some apikey or oauth authentication checks. Finally it would also be a good idea to implement some kind of rate limiting policy.

      Django-Tastypie provides very nice framework for handling all of these situations.

  3. Manuel November 6, 2013 at 12:03 am #

    Thanks Christophe. Last one missing is chocolatechip-ui ;)

  4. Steve November 6, 2013 at 5:49 am #

    Thanks for your great samples. It really helps when having to compare the benefits and weaknesses of the different frameworks. I was really waiting for this angular + topcoat version :)

  5. Doron November 6, 2013 at 6:18 am #

    So what is your preferred selection ?
    which is the best choice for implementing mobile web sites ?

    thanks
    Doron

  6. boron November 9, 2013 at 3:59 pm #

    Hi,

    I pushed the server components to a cloud host, however it looks as though I am now experiencing some cross-domain issues. Has anyone reading this had any experience with working around this – would they be so kind as to detail how a CORS-type solution could be introduced to this piece?

    • boron November 10, 2013 at 1:05 pm #

      It seems that it should have something to do with app.js and adding something like the following:

      .config(['$httpProvider', function($httpProvider) {
      $httpProvider.defaults.useXDomain = true;
      delete $httpProvider.defaults.headers.common['X-Requested-With'];
      }
      ]);

      Could anybody provide any pointers as to how this could be incorporated?

    • ned November 12, 2013 at 11:56 pm #

      I solved this issue for localhost testing by routing requests to external address (where it would be on production) then editing my hosts file (windows) to redirect the requests to 127.0.0.1

  7. sprsrini November 10, 2013 at 4:10 am #

    How to import the custom employees.xml into the application

  8. Terry Bondy November 11, 2013 at 8:34 am #

    Back button at top of employee doesn’t seem to work on Safari on iPad. Takes you back to an empty search screen.

  9. EvanZ November 12, 2013 at 10:44 am #

    Search for James King doesn’t seem to work.

  10. Nelson November 13, 2013 at 4:11 am #

    I have installed successfully and confirmed it imported the data.

    It works when config is myApp.memoryServices but shows a screen with nothing in employee directory list when I switch to myApp.memoryServices

    I am accessing application using http://ServerIP:3000

    Can someone kindly advise what the issue could be

  11. Nelson November 13, 2013 at 7:12 am #

    Kindly disregard I resolved the issue localhost was hardcorded in client/js/rest-services.js.

    Changed it to the IP of the server and it worked ok

  12. Richard November 27, 2013 at 12:49 pm #

    Hi,

    thanks for this and your other very useful sample projects. I wondered why you did not use 3d animations for the page transitions this time as you have in other projects?

  13. Sergey December 10, 2013 at 9:34 pm #

    So, if there is MongoDB is used, then this Mobile app will not be working on Mobile..

    • ramin February 5, 2014 at 9:53 pm #

      The MongoDB is installed on your server. Follow the steps from http://coenraets.org/blog/cordova-phonegap-3-tutorial/#comment-456977 but replace the source with one Christophe has provided above. If you have a server somewhere, copy the server code there, install the required tools and start the mongo deamon (mongod).

      When you run your client on your cell make sure to change the rest-services.js to use your server’s IP.

  14. kobi December 13, 2013 at 2:44 am #

    An adaptation to mysql
    https://github.com/kobisegev/angular-nodejs-mysql

  15. Joel December 20, 2013 at 8:32 am #

    Hi, I am trying to implement transition animations using your example (using Phonegap 3.1) and though it works perfectly with your example it does not work when I try in my app.

    Using Phonegap 3.1 and AngularJS 1.2.0

    Can I get any help with this? Thank You

  16. Kbashya January 31, 2014 at 9:26 pm #

    I’m getting a flicker when I access this app from mobile

    • el orc February 10, 2014 at 3:56 pm #

      Me too.

      P.S.: I left this tab for ~10 hours and found that it consumes 100% of one i7 core. Should be some logic loop.

  17. Or March 11, 2014 at 9:19 am #

    Hi,

    Nice code.

    Did you try to host this app inside an android WebView/Chrome WebView? supposed to be working similar to a browser, but this app does not work well there (scrolling does not work, search text inside the input not well padded, etc.). Trying to use your example to do stuff, kind of battling with the scrolling issue inside the web view.

    Cheers,
    Or

  18. Or March 11, 2014 at 9:26 am #

    Oh – apparently the scroller class in the CSS needs to get an initial large enough height, otherwise the webview does can’t figure out (for whatever reason) what the height should be. so setting an initial height does the trick. something like

    style.css:
    .scroller {
    /*****/
    height: 1000px;
    /*****/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 168px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    }

  19. 0xbsd March 16, 2014 at 8:44 am #

    Hello !
    How you would actually authenticate/[register (new users)] from angularjs with your backend, given that your backend is Django-Tastypie ?

  20. patchwork kilim March 24, 2014 at 5:16 am #

    Great Tips.. Thanks a lot..

Trackbacks/Pingbacks

  1. AngularJS Highlights: Week Ending 10 November 2013 | SyntaxSpectrum - November 10, 2013

    [...] Sample Mobile Application with AngularJS [...]

  2. Links for November 9th through November 16th - November 16, 2013

    [...] Sample Mobile Application with AngularJS – In recent months, I have been sharing different versions of the Employee Directory sample application built with different technology stacks, different frameworks, and different back-end (REST services) implementations. A number of you have asked for a version of the application built with AngularJS. So here it is [...]

  3. Tutorial: Build a sample app with PhoneGap and AngularJS - November 26, 2013

    [...] He also shares the source code with you. Check it out on: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/ [...]

Leave a Reply