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

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

  21. Sumeet April 29, 2014 at 11:40 am #

    Hi ,

    How to run the app on my mobile? After copying the source code, what should I do to get the executable for my mobile? I am a beginner. Someone please let me know.

  22. Steven Benjamin May 3, 2014 at 1:08 pm #

    I noticed that you didn’t use any plugins in this example.
    How do make use of the plugins with the angular framework?

    Thanks

  23. Steven Benjamin May 3, 2014 at 1:09 pm #

    How do you use cordova plugins with angular js?

  24. edukacja.olsztyn.pl May 5, 2014 at 10:25 pm #

    Hi my friend! I would like to point out that this post is astounding, wonderful prepared including roughly almost all sizeable infos. I have to view added content similar to this .

  25. modern homes May 22, 2014 at 1:28 pm #

    always i used to read smaller posts that as well clear their motive, and that is
    also happening with this post which I am reading at this place.

  26. trailer lights May 24, 2014 at 7:07 am #

    Incredible! This blog looks exactly like my old one!
    It’s on a totally different subject but it has pretty much the same page layout and design. Wonderful choice of
    colors!

  27. dragon city working hack May 25, 2014 at 9:35 am #

    Excellent article. Keep posting such kind of information on your site.

    Im really impressed by your blog.
    Hey there, You have performed a fantastic job. I’ll certainly digg it and individually recommend to my friends.

    I am sure they’ll be benefited from this site.

  28. DJ June 3, 2014 at 10:22 am #

    Hi,

    CI am a newbie to the phone app/web app dev world. Can you please point me to basics of how to deploy this app on a smartphone? Would this app work on a Android phone and a Windows Embedded Compact 7 tablet/phone?

    Would appreciate a response.

    Thanks.

  29. Devon June 6, 2014 at 7:29 am #

    Admiring the dedication you put into your site and detailed information you offer. It’s awesome to come across a blog every once in a while that isn’t the same out of date rehashed material. Wonderful read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

  30. hnbb.net June 21, 2014 at 6:54 am #

    Hello There. I discovered your blog using msn. This is an extremely smartly written article.
    I’ll make sure to bookmark it and come back to
    learn more of your useful info. Thank you for the post.
    I will certainly return.

  31. cuenta premium minecraft June 24, 2014 at 1:26 am #

    Utilizing online flash games is simply a great thing to do to in order
    to aid in brightening up a functioning day. Nogueria: Massage parlors Zavala:
    But Huntington Beach is not alone. I wanted to mention that as it is definitely good when people discover new information about Minecraft Premium Account Generator.

  32. escorts Leeds June 30, 2014 at 8:22 am #

    After exploring a handful of the blog articles on your
    web site, I really appreciate your way of blogging.
    I saved it to my bookmark website list and will be checking back in the near future.
    Please check out my website too and let me know
    how you feel.

  33. necolebitchie.com July 4, 2014 at 4:51 pm #

    Hi! This post could not be written any better! Reading through this post reminds me
    of my old room mate! He always kept talking
    about this. I will forward this write-up to him.
    Fairly certain he will have a good read. Thanks for sharing!

  34. iphone repair in schaumburg July 7, 2014 at 9:05 am #

    Attractive component to content. I simply stumbled upon your web site and in accession capital to assert that I acquire actually loved account your blog posts.
    Anyway I’ll be subscribing for your augment or even I fulfillment
    you get admission to consistently fast.

  35. cell phone repair in schaumburg July 9, 2014 at 8:12 pm #

    Hey! This post could not be written any better!
    Reading through this post reminds me of my good old room
    mate! He always kept chatting about this. I will forward this page
    to him. Fairly certain he will have a good read.
    Thank you for sharing!

  36. http://www.secretsatisfaction.co.uk July 17, 2014 at 2:27 pm #

    I take pleasure in, lead to I found just what I was taking a look for.

    You’ve ended my four day lengthy hunt! God Bless you man. Have a nice
    day. Bye

  37. Sangram October 28, 2014 at 8:19 am #

    Hi,

    Please let me know how to run this application on android mobile.

    Thanks,

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/ […]

  4. AngularJS-Learning | Nisar Khan - May 1, 2014

    […] Sample Mobile Application with AngularJS […]

Leave a Reply

css.php