fatarrow

An AngularJS application Reference Architecture

License Version Build Status Dependency Status

Build AngularJS applications with CoffeeScript - without the ceremony. By the way, you can write JavaScript too.

Table of Contents

Installing

Before running, you must install and configure the following one-time dependencies:

Enter the following in the terminal

Option 1: Using Yeoman Generator (Recommended)

$ npm install -g gulp yo
$ npm install -g generator-fatarrow
$ mkdir my-new-project && cd $_
$ yo fatarrow

Option 2: Clone this repo

$ npm install -g gulp
$ git clone git@github.com:CaryLandholt/fatarrow.git
$ cd fatarrow
$ npm install

Running

Here are some useful commands to get started:

Get all commands and options by typing

$ gulp help

Running with With a fake backend ($httpBackend)

$ gulp

With a real backend (gulp will proxy calls to the backend of your choice)

$ gulp --backend

Build for production

$ gulp --prod --no-serve

Run tests on your build server

$ npm test

Deploy your app

$ npm test
$ gulp --prod --no-serve
# deploy to a path (configuration in /config/locationConfig.coffee)
$ gulp deploy
# deploy to S3 (configurtion in /config/s3Config.coffee)
$ gulp deploy --target s3

Scripting

Your choice of scripting languages.

Styling

Your choice of styling languages.

Templating

Your choice of templating engines.

Structure

(Note: to keep the example succint, .coffee, .html and .less extensions are used below. However, all of the file extensions listed above can be used, and even can be mix-and-matched.)

The root directory generated for a fatarrow app:

├──  e2e/
├──  config/
├──  src/
│   ├──  components/
│   │   └──  comp/
│   │   │   ├──  test
│   │   │   ├──  └──  comp.spec.coffee
│   │   │   ├──  comp.coffee
│   │   │   └──  comp.html
│   │   │   └──  comp.backend.coffee
│   │   │   └──  comp.less
│   ├──  app/
│   │   ├──  app.coffee
│   │   ├──  appRoutes.coffee
│   │   └──  views.backend.coffee
│   ├──  home/
│   │   ├──  homeController.coffee
│   │   ├──  homeRoutes.coffee
│   │   └──  home.html
│   ├──  img/
│   │   └──  angularjs.jpg
│   └──  index.html
├──  tasks/
├──  bower_components/
├──  nodes_modules/
├──  .bowerrc
├──  .gitignore
├──  bower.json
├──  gulpfile.coffee
├──  package.json

Explanation of the folders:

Features

Configuration

(Note: Configuration for the rest of the gulp plug-ins lives in the config folder.)

Add Bower Component

You need three pieces of information for each Bower component to include in your app.

  1. The Bower component name (e.g. restangular)
  2. The version of the component (e.g. 1.4.0)
  3. The files within the component to include in your app (e.g. restangular.min.js)

The following will include the restangular component, version 1.4.0, and place the dist/restangular.min.js file in the vendor/scripts directory. By default, all Bower components will be placed in the vendor directory.

BOWER_COMPONENTS =
    'restangular': '1.4.0':
        scripts: 'dist/restangular.min.js'

If load order is important, include a reference to the file in the SCRIPTS section.

The following will ensure restangular is loaded prior to app.js.

SCRIPTS =
    '**/angular.min.js'
    '**/restangular.min.js'
    '**/app.js'
    '**/*.js'

For AngularJS components, include a reference to the module within your application. For example:

angular.module('app', ['restangular']);

Contributing

See CONTRIBUTING.md

Changelog

See CHANGELOG.md

License

See LICENSE