Slush Freak Angular Scaffolding Tools

Generated by slush-fast 3.1.2 by Jean-Paul.Wesselink@klm.com

Features

Angular project creation with all your favorite goodies

• Streaming builds using Gulp
• Develop your project local server with fast reload using BrowserSync
• Conforms to John Papa's excellent Angular style guide
• Generation of all Angular module components including unit tests
• SCSS stylesheets
• Automatic angular template parsing
• Automatic angular dependency injection
• Code quality checks using jshint and scsshint
• Unit tests with Karma and Jasmine
• Istanbul code coverage reports
• Jasmine unit test reports
• TODO: End-to-end testing with Protractor
• Front end dependency management using Bower
• Packaging for production (TODO: including source maps)
• Namespace prefixing

TL;DR

• Creates Angular projects
• Scaffolds Angular modules and components
• Gulp
• Karma with Jasmine
• TODO: Protractor
• Jshint
• ScssHint
• BrowserSync
• Instanbul coverage reports as html and lcov
• Jasmine reports

Install prerequisites

• Git
• Ruby Programming Language and Sass: Syntactically Awesome Style Sheets
• node.js and npm, its package manager
• For generation of single page apps, Bower

Installation

Install the development tools you need for scaffolding, bear in mind these tools need to be installed globally, for *nixy systems you might want to use sudo or take a look here for npm without sudo.

$ npm install -g slush gulp bower

Installation of the slush generators

With private npm registry

$ npm install -g slush-fast

Without private npm registry

$ npm install -g git+https://stash.eden.klm.com/scm/fe/freak-angular-scaffolding-tool.git

Usage

Project types

For now this generator produces two different types of projects, targeted at scaffolding angular modules and its moving parts.

• Scaffolding only - Exactly what it says: scaffolding only of angular modules and module parts.
• SPA - Single page application with all the bells and whistles

In then near future more options are planned, first up is the ability to create angular module-type projects, targeted at creating single purpose modules like directives or services.

Initialize a new project

mkdir yourproject
cd yourproject
slush fast

You will be prompted for input on project type, name, etc. Upon finishing the generator will create a project layout for you.

Running in CI mode

gulp serve

In CI mode four local servers will be spawned:

• http://localhost:3001 Development server with BrowserSync
• http://localhost:8887 Development server
• http://localhost:8888 Karma coverage report
• http://localhost:8886 Jasmine report

API Mocking

In order to mock api requests place your files inside ./test/mock. When running the development server you can access those files using regular http requests.

For example, placing test.json inside ./test/mock/api will make it available by requesting http://localhost:3001/api/test.json.

Packaging for production

gulp package

Packaging provides the following:

• Per module
• All modules
• Bootstrap script
• All modules with bootstrap scripts

Per module

Modules

Create a module

Top level namespace modules

Make sure you are in the project's src/app directory.

$ slush fast:module {optional name}

This will create a module in src/app/{name} called {name}.module.js. If module name is not given as a command line parameter you will be prompted for one. The namespace for this module is the prefix concatenated with name: {prefix}.{name}

For example, for a given prefix 'afkl', calling

$ slush fast:module foo

will create a directory foo containing a file foo.module.js. The module definition will look like this:

angular.module('afkl.foo', []);

Sub modules

Inside a module directory {module} where a files exists named '{module}.module.js' you can create sub modules easily like so:

$ slush fast:module {optional name}

Again, the name is optional, you will be prompted for one if it is not given as a parameter. File naming behaviour is the same as creating a top level module, namespacing behaviour differs.

For example, calling the following inside src/app/foo

$ slush fast:module bar

will create a directory src/app/foo/bar containing a file bar.module.js and a file bar.module.spec.js. So far, so good, nothing fancy here. However, the namespace for this module is inherited from the parent module:

angular.module('afkl.foo.bar', []);

This way you can easily scale features while mainting unique namespaces to prevent collisions.

Module parts

Modules come in a lot of flavours: an application module differs from a single purpose module that only holds a service, directive or filter. For the latter case you can name your module part simply ., which will name the module part exactly the same as your module name. Confusing? Let's have an example:

$ slush fast:module foo
$ cd foo
$ slush fast:directive .
$ ls -la
total 24
drwxr-xr-x  6 jp  staff  204 Feb 18 13:09 .
drwxr-xr-x  5 jp  staff  170 Feb 18 13:08 ..
-rw-r--r--  1 jp  staff   26 Feb 18 13:09 foo.directive.html
-rw-r--r--  1 jp  staff  712 Feb 18 13:09 foo.directive.js
-rw-r--r--  1 jp  staff   87 Feb 18 13:08 foo.module.js
drwxr-xr-x  3 jp  staff  102 Feb 18 13:09 tests

Module foo looks like this:

$ more foo.module.js
(function() {
  'use strict';

  angular.module('afkl.foo', ['ui.router']);

}());

And our foo directive looks like this:

$ more foo.directive.js
(function() {
  'use strict';

  /* app/foo/foo.directive.js */

  /**
  * @desc
  * @example <div afkl-foo></div>
  */
  angular
  .module('afkl.foo')
  .directive(
  'afklFoo', AfklFooDirective);

  ...

TL;DR - Use . as name to create a module part with the same name as the module.

Config

Inside the current module directory you can run the following command:

$ slush fast:config

This will create a new file with the same name as the module postfixed with .config along with a unit test spec file postfixed with '.config.spec';

For example, calling this following inside src/app/foo

$ slush fast:config

will create a file src/app/foo/foo.config.js containing a definition like this:

angular.module('afkl.foo')
  .config( .... )

and a file src/app/foo/foo.config.spec.js.

Run

Inside the current module directory you can run the following command:

$ slush fast:run

This will create a new file with the same name as the module postfixed with .run;

For example, calling this following inside src/app/foo

$ slush fast:run

will create a file src/app/foo/foo.run.js containing a definition like this:

angular.module('afkl.foo')
  .run( .... )

Controller

Inside the current module directory you can run the following command:

$ slush fast:controller {optional name}

If you don't provide a name, you will be prompted for one. This will create a new file with the same name as the module postfixed with .controller, as well as a controller spec file.

For example, calling this following inside src/app/foo

$ slush fast:controller barbar

will create a file src/app/foo/barbar.controller.js containing a definition like this:

angular.module('afkl.foo')
  .controller('BarBar',  .... )

Directive

Inside the current module directory you can run the following command:

$ slush fast:directive {optional name}

If you don't provide a name, you will be prompted for one. This will create a new file with the same name as the module postfixed with .directive, as well as a directive .html file and directive spec file.

For example, calling this following inside src/app/foo

$ slush fast:directive blinken lights

This will create the following files: blinken-lights.directive.js, blinken-lights.directive.html and foo.blinken-lights.directive.spec.js The src/app/foo/blinken-lights.directive.js file contains the following definition:

angular.module('afkl.foo')
  .directive('afklFooBlinkenLights',  .... )

Provider

Inside the current module directory you can run the following command:

$ slush fast:provider {optional name}

If you don't provide a name, you will be prompted for one. You will also be prompted for one of the provider types: service or factory. This will create a new file with the same name as the module postfixed with .provider, as well as a provider spec file.

For example, calling this following inside src/app/foo

$ slush fast:provider unf

This will prompt for service or factory and create the following files: unf.provider.js, tests/unf.provider.spec.js and either unf.service.spec.js or unf.factory.spec.js.

The src/app/foo/unf.provider.js file contains the following definition:

angular.module('afkl.foo')
        .provider('afklFooUnf', .... )

Filter

Inside the current module directory you can run the following command:

$ slush fast:filter {optional name}

Value

Inside the current module directory you can run the following command:

$ slush fast:value {optional name}

Constant

Inside the current module directory you can run the following command:

$ slush fast:constant {optional name}

Service

Inside the current module directory you can run the following command:

$ slush fast:service {optional name}

Factory

Inside the current module directory you can run the following command:

$ slush fast:factory {optional name}