The Lab: Front-End Frameworks: AngularJS
These episodes are an exploration and review of the AngularJS framework for building web applications. This repository contains an example application written in AngularJS. It demonstrates several concepts:
- Sample application. The sample application code can be found in
src/client. The main page template is in
index.html. Its controller is in
example.js. The AngularJS UI code consists of several directives, which may be found in
The application also includes a domain layer, value objects, and a (simulated) persistence layer. Those layers are in subdirectories of
src/client. This architecture was an experiment to see how well AngularJS handled an approach outside of its comfort zone. It didn't work well, and I don't recommend following this pattern in your own application.
See the screencasts for more information about the sample app.
Unit Tests. All the code is unit tested. You can find tests of an AngularJS controller in
src/client/_example_test.jsand tests of directives in
src/client/ui/_*_test.js. Pay particular attention to the setup code; it's tricky to get right and the test setup fails silently if it's wrong. Also see
build/config/karma.conf.jsfor how the Karma test runner is configured. In particular, the
angular-mocksfile must be included, or the test setup silently fails.
Modularity. We use CommonJS
require()statements for modularity, and we use Browserify to make it work. AngularJS isn’t designed to work with CommonJS, so see
src/client/example.jsto see how files are included, and e.g.,
src/client/ui/configuration_panel.jsto see how modules are exported.
Other than the AngularJS integration, there's nothing unusual about the CommonJS infrastructure. See the "browserify" target in
build/util/browserify_runner.js for the automated build. (You can use
browserify_runner.js in your own build scripts.) See
build/config/karma.conf.js for the karma-commonjs configuration needed to make tests work.
For further details about how this code works, watch the screencasts.
To try this code on your own computer:
- Install Node.js.
- Download and unzip the source code into a convenient directory.
- All commands must run from the root of the source tree:
Running the Sample Application
./jake.sh run(Unix/Mac) or
http://localhost:8080in a browser.
Running the Tests
./jake.sh karma(Unix/Mac) or
jake karma(Windows) to start the Karma server.
- Start the browsers you want to test and point each one at
./jake.sh loose=true(Unix/Mac) or
jake loose=true(Windows) every time you want to build and test.
MIT License. See