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

    Sent a PR to add animation

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

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

  • Manuel

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

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

  • Doron

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

    thanks
    Doron

  • boron

    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

      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

      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

  • Pingback: AngularJS Highlights: Week Ending 10 November 2013 | SyntaxSpectrum()

  • sprsrini

    How to import the custom employees.xml into the application

  • Terry Bondy

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

  • Search for James King doesn’t seem to work.

  • Nelson

    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

  • Nelson

    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

  • Pingback: Links for November 9th through November 16th()

  • Pingback: Tutorial: Build a sample app with PhoneGap and AngularJS()

  • Richard

    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?

  • Sergey

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

    • ramin

      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.

  • kobi
  • Joel

    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

  • Kbashya

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

    • el orc

      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.

  • Or

    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

  • Or

    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;
    }

  • 0xbsd

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

  • Great Tips.. Thanks a lot..

  • Sumeet

    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.

  • Pingback: AngularJS-Learning | Nisar Khan()

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

    Thanks

  • How do you use cordova plugins with angular js?

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

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

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

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

  • DJ

    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.

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

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

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

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

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

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

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

  • 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

  • Sangram

    Hi,

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

    Thanks,

  • Hello Friends, Pickme india is a best service provider in India Whenever there is the need to get the items repaired, Try pickme India.www.pickmeindia.com.

  • sudha

    Hi coenraets!

    This is awesome tutorial and it helps me a lot to to make mongodb run on webserver. Thanks a lot for your wonderful effort.keep rocking

    Thanks

  • Rakesh

    I Tried to setup your codebase in my local desktop.
    Installed mysql, setup directory database, created employee table

    Finally after running node server, I get following error

    C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server\node_modules\mysql\lib\protocol\Parser.js:82
    throw err;
    ^
    ReferenceError: res is not defined
    at Handshake.exports.findAll [as _callback] (C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server\routes\employee.js:12:13)
    at Handshake.Sequence.end (C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server\node_modules\mysql\lib\protocol\sequences\Sequence.js:96:24)
    at Handshake.ErrorPacket (C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server\node_modules\mysql\lib\protocol\sequences\Handshake.js:103:8)
    at Protocol._parsePacket (C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server\node_modules\mysql\lib\protocol\Protocol.js:271:23)
    at Parser.write (C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server\node_modules\mysql\lib\protocol\Parser.js:77:12)
    at Protocol.write (C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server\node_modules\mysql\lib\protocol\Protocol.js:39:16)
    at Socket. (C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server\node_modules\mysql\lib\Connection.js:92:28)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Socket. (_stream_readable.js:746:14)
    at Socket.EventEmitter.emit (events.js:92:17)

    C:\workspaces\angularJSprojects\employeedirectory\Employee-Directory-Angular-Mysql\server>

  • Pingback: JavaScript Dynamic Content shim для Windows JavaScript Apps | FNIT.RU()

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

  • ekledim ok.

  • I mean – are there any updates?

  • Fabrice

    Hi

    When I try node server

    I got :

    /home/ubuntu/angular-directory/server/routes/employee.js:6
    mongoClient.open(function(err, mongoClient) {
    ^

    TypeError: mongoClient.open is not a function
    at Object. (/home/ubuntu/angular-directory/server/routes/employee.js:6:13)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object. (/home/ubuntu/angular-directory/server/server.js:3:17)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

    Thanks for your help !
    Fabrice

    • Ajaykumar

      ———————————————————————–
      var MongoClient = require(‘mongodb’).MongoClient,
      Server = require(‘mongodb’).Server,
      db;

      var mongoClient = new MongoClient(new Server(‘localhost’, 27017));
      mongoClient.open(function(err, mongoClient) {
      db = mongoClient.db(“angular-directory-db”);
      db.collection(’employees’, {strict:true}, function(err, collection) {
      if (err) {
      console.log(“The ’employees’ collection doesn’t exist. Creating it with sample data…”);
      populateDB();
      }
      });
      });
      ————————————————————————-
      Replace above mentioned line from employee.js and replace with line below–
      var MongoClient = require(‘mongodb’).MongoClient;

      MongoClient.connect(“mongodb://localhost:27017/angular-directory-db”,function(err, mongoClient) {
      db = mongoClient.db(“angular-directory-db”);
      db.collection(’employees’, {strict:true}, function(err, collection) {
      if (err) {
      console.log(“The ’employees’ collection doesn’t exist. Creating it with sample data…”);
      populateDB();
      }
      });
      });

  • Great find here Find here AngularJs Mobile app development key benefits. Definitely it will be very helpful for Angularjs mobile app developers.

  • Pingback: Native Web App with PhoneGap, JQuery Mobile and AngularJS? | Some Cordova Questions and Answers()

css.php