Slush-angular NPM

slush-angular

A slush generator for AngularJS using the Google Angular App Structure Recommendations

Installation

Install slush-angular globally:

npm install -g slush-angular

Remember to install slush globally as well, if you haven't already:

npm install -g slush

Usage

Create a new folder for your project:

mkdir my-angular-app

Run the generator from within the new folder:

cd my-angular-app

slush angular

You will now be prompted to give your new AngularJS app a name, which will be dasherized and used in its bower.json and package.json respectively. The chosen name will be camelized and used as the main angular module as well, inside src/app/app.js.

CSS Preprocessor

You can choose between LESS, Stylus, and Sass to use as the CSS Preprocessor for your project.

Note All _*.styl, _*.less, or _*.scss files will be considered "partials" and must be imported in another stylesheet file (without a leading "_") to be compiled.

Project structure

You will also have the option to generate a simple Todo list app in your project as well, to be used as a live example of how to structure your app.

The project structure with the Todo list example included will look like this:

my-angular-app/
├── .bowerrc
├── .csslintrc
├── .editorconfig
├── .gitignore
├── .jshintrc
├── bower.json
├── gulpfile.js                             # See "Gulpfile" below
├── karma.conf.js
├── README.md
├── package.json
└── src
    └── app
        ├── app.js                          # Main app module and configuration
        ├── app.styl/less/scss              # Main app stylesheet
        ├── index.html                      # The index.html / app layout template
        ├── assets                          # A folder meant for images and such...
        │   └── .gitkeep
        ├── styles
        │   └── _base.styl/less/scss        # A stylesheet partial with base styles
        └── todo
            ├── todo-controller.js          # The todo controller
            ├── todo-controller_test.js     # Karma test for the todo controller
            ├── todo.html                   # The todo list template
            ├── todo.js                     # The todo module
            └── todo.styl/less/scss         # Todo module specific styles

Gulpfile

Development

To start developing in your new generated project run:

gulp serve

Then head to http://localhost:3000 in your browser.

The serve tasks starts a static file server, which serves your AngularJS application, and a watch task which watches your files for changes and lints, builds and injects them into your index.html accordingly.

Tests

To run tests run:

gulp test

Production ready build - a.k.a. dist

To make the app ready for deploy to production run:

gulp dist

Now you have a ./dist folder with all your scripts and stylesheets concatenated and minified, also third party libraries installed with bower will be concatenated and minified into vendors.min.js and vendors.min.css respectively.