Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
CafeTownsend implementation using AngularJS
tag: v0.10.5

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

CafeTownsend - AngularJS

This project is an HTML5/Javascript implementation of the infamous CafeTownsend application. CafeTownsend is a well known application created to demonstrate various MVC frameworks using Flex or ActionScript. There are known ports using Cairngorm, Mate, PureMVC, Spring ActionScript, RobotLegs and Swiz.

Recently a developer contributed an HTML5 port of the application using the javascript Spine MVC framework.

This project contributes a superior port of the HTML5 CafeTownsend application;using the Angular.js IoC framework.


Click to play with the live CafeTownsend Demo.

AngularJS is an amazing IoC MVVM framework for Javascript applications. Supporting pageless architectures, advanced data binding, HTML templating, and dependency injection… AngularJS is strikingly similar to the Flex Swiz IoC framework.

Note: Subsequent CSS version will be rewritten in {Less} for dynamic stylesheet language support.
The AngularJS port also demonstrates significant advantages over the SpineJS implementation:

  • Pageless Architecture
  • Improved routing with deep link support
  • Significant reduction in HTML template fragments
  • Rigorous elimination of Javascript code from HTML
  • Inter-controller data sharing
  • Session Management/Authentication
  • Lazy loading of data services (with auto-jsonify of external JSON data)
  • Code versions handwritten in both Javascript and Coffeescript
  • Demonstrates separation-of-concerns for Model-Views-Controllers
  • Demonstates dependency injection for services and Controllers
  • Demonstrates best practices for Model-View-View-Model (MVVM) architectures
  • Uses CoffeeScript files for services and controller classes

Directory Layout

app/                  --> all of the files to be used in production

  index.html          --> app layout file (the main html template file of the app)


    css/              --> css files
      app.css         --> default stylesheet

    images/           --> image files

    partials/         --> angular view partials (partial html templates)

    members.json      --> external, simple JSON data 

  js/                 --> javascript files
    booter.js         --> application booter

    /master           --> original, handwritten javascript files
    /build            --> javascript output from CoffeeScript builds

        controllers.js    --> application controllers
        services.js       --> custom angular services
        directives.js     --> custom angular directives

    lib/              --> angular and 3rd party javascript libraries
        angular.js      --> AngularJS v0.10.5 IoC Framework
        jquery.min.js   --> jQuery v1.7 minified
        head.js         --> asynch script loader
        uuid.js         --> uuid generator

config/jsTestDriver.conf    --> config file for JsTestDriver

logs/                 --> JSTD and other logs go here (git-ignored)

scripts/              --> handy shell/js/ruby scripts
  test-server.bat     --> starts JSTD server (windows)      --> starts JSTD server (*nix)
  test.bat            --> runs all unit tests (windows)             --> runs all unit tests (*nix)
  watchr.rb           --> config script for continuous testing with watchr
  web-server.js       --> simple development webserver based on node.js

test/                 --> test source files and libraries
  e2e/                -->
    runner.html       --> end-to-end test runner (open in your browser to run)
    scenarios.js      --> end-to-end specs

    angular/                --> angular testing libraries
      angular-mocks.js      --> mocks that replace certain angular services in tests
      angular-scenario.js   --> angular's scenario (end-to-end) test runner library
      version.txt           --> version file

    jasmine/                --> Pivotal's Jasmine - an elegant BDD-style testing framework
    jasmine-jstd-adapter/   --> bridge between JSTD and Jasmine
    jstestdriver/           --> JSTD - JavaScript test runner

  unit/                     --> unit level specs/tests
    controllersSpec.js      --> specs for controllers

Pending Features

This effort is still ongoing with some in-progress effort that will provide the following features:

  • Provide loading indicator as data load indicator
  • Support deep linking with synch data loads
  • Convert disorganized CSS to LESS
  • Build CafeTownsend Tests/Scenarios
  • Create view slide transitions


Stay tuned for upcoming blog article and video on the GridLinked blog.
For more information on angular please check out

Something went wrong with that request. Please try again.