Angular-kickoff

This project is maintained by marcelinhov2

Angular Kickoff Seed

AngularJS application boilerplate for Ng-Classify lovers

based on: ng-classify

inspirated in: angular-hipster-seed

Features

Installation

Clone repo using git

git clone https://github.com/marcelinhov2/angular-kickoff.git
cd angular-kickoff

Erase remote

make remove_remote

Install dependencies

make setup

Usage

CLI

Example of how to use the Command Line Interface of the seed:

Options:

angular-kickoff -h, --help                       # Output usage information
angular-kickoff -V, --version                    # Output the version number
angular-kickoff -g, --generate <option> [value]  # Generate files
angular-kickoff -d, --destroy <option> [value]   # Generate files

Ng-Classify Modules Available (module_name):

Examples:

angular-kickoff -g module module_name/class_name   # create modules
angular-kickoff -g partial folder_name/name        # create partials
angular-kickoff -g style name                      # create styles
angular-kickoff -d module module_name/class_name   # destroy modules
angular-kickoff -d partial folder_name/name        # destroy partials
angular-kickoff -d style name                      # destroy styles

Clean remote

This command automatically erase the .git folder.

make remove_remote

Running the App during Development

This command automatically compiles coffee, jade and stylus, injects bower components, generates source maps, starts livereload server and opens your app in the browser.

make server

Compiling app for development

This command compiles project and generates source maps. Output goes to sh app/ folder

make compile

Building the App for Production

This command compiles project and optimizes it for production. Output goes to sh dist/ folder

make build

Directory layout

Source

angular-kickoff
└── src
    ├── images               # image files
    ├── index.jade           # app layout file (the main jade template file of the app)
    ├── partials             # angular view partials (partial jade templates)
    │   ├── directives       # partial directives
    │   └── views            # partial views
    ├── scripts              # coffeescripts
    │   ├── main.coffee      # application
    │   ├── controllers      # application controllers
    │   ├── directives       # application directives
    │   ├── factories        # application factories
    │   ├── filters          # application filters
    │   └── services         # application services
    └── styles               # stylus stylesheets
        ├── animation.styl   # animation classes ( http://daneden.github.io/animate.css/ )
        ├── app.styl         # this file, import all the others files that you create
        ├── colors.styl      # here goes your colors vars
        ├── fonts.styl       # here goes your font-face declaration
        ├── mixins.styl      # here goes your mixins
        ├── reset.styl       # here goes your reset styles ( http://meyerweb.com/eric/tools/css/reset/ )
        └── transitions.styl # here goes your ng-view transitions ( https://github.com/mgechev/angular-transitions )

Development build

angular-kickoff
 app                      # development build
  ├── bower_components
  ├── fonts
  ├── images
  ├── index.html          # compiled app layout
  ├── partials            # compiled partials
  │   ├── directives
  │   └── views
  ├── scripts             # compiled scripts with source maps
  │   ├── main.js
  │   ├── dependencies.js # bower_components compiled files
  │   ├── controllers
  │   ├── directives
  │   ├── factories
  │   ├── filters
  │   └── services
  └── styles               # compiled stylesheets
      └── app.css

Production build

 dist                     # production build
  ├── bower_components
  ├── fonts
  ├── images               # optimized images
  ├── index.html           # minified app layout
  ├── partials             # minified partials
  │   ├── directives
  │   └── views
  ├── scripts
  │   ├── dependencies.js  # minified and concatenated bower_components
  │   └── main.js          # minified and concatenated javascripts
  └── styles
      └── style.css        # minified and concatenated styles

TODO's