generator-hirsch

Yeoman generator

Create a module based AngularJS Application.

Based on the famous style guide from John Papa angular-styleguide

Table of contents

• generator-hirsch
• Prerequisites
• Get Started
• Templating
• Tasks
• Styleguide
• App Structure
• License

Prerequisites

1. Install Node.js

   • on OSX use homebrew brew install node
   • on Windows use chocolatey choco install nodejs

2. Install Yeoman npm install -g yo

3. Install these NPM packages globally

   npm install -g bower gulp nodemon        
   

Get Started

1. Install generator-hirsch

   npm install -g generator-hirsch
   

2. Create a new folder and change directory to it

   mkdir myApp
   cd myApp
   

3. Run the generator

   yo hirsch appname
   

Installing Packages

When you generate the project it should run these commands, but if you notice missing packages, run these again:

• npm install
• bower install

Templating

Most of the templates will be generated with a standard karma unit/midway test

• yo hirsch:module myModule

  Adds a new module to your project

• yo hirsch:constant myConstant

  Adds a new constant to your project

• yo hirsch:view myNewView

  Adds a new view with a template and a controller in the view directory of the chosen module

• yo hirsch:service myService

  Adds a new service or factory to the chosen module of your project

• yo hirsch:filter myFilter

  Adds a new filter to the chosen module of your project

• yo hirsch:directive myDirective

  Adds a new directive to the chosen module of your project

Task Runner

Building

• gulp

  Injects all JS files into your index.html, generates a css from your less and start a watcher for further changes to restart the process

• gulp help or gulp list

  Lists all tasks

• - gulp build-config --env [ENVIRONMENT]

  • --env d, --env dev, --env development //development
  • --env p, --env prod, --env production //production
  • --env otherEnv //custom env json file

  Generate new config constant form the given environment

• gulp build

  Injects all JS files into your index.html and generates a css from your less

• gulp less

  Generates a css from your less

• gulp jshint

  Checks code quality

• gulp dist

  This generates a minified app

Servers (default)

Both tasks starts a server for testing your app. It also starts a watcher for your source code, when your source code has been modified the server refreshes the page.

• gulp serve

  This points on your src folder

• gulp serve-dist

  This points on your dist folder

Testing

• gulp test

  Runs all your karma tests

• gulp test:unit

  Runs all your unit karma tests

• gulp test:midway

  Runs all your midway karma tests

Styleguide

I use this style guide for my apps: johnpapa/angular-styleguide

App Structure

projectRoot/
   |
   +-- dist/ (minified app version will placed by gulp here with the task 'gulp dist')
   |
   +-- src/
   |   |
   |   +-- app/
   |   |   |  
   |   |   + common/  
   |   |   |   |  
   |   |   |   + directives/  
   |   |   |   + constants/  
   |   |   |   + filters/  
   |   |   |   + services/  
   |   |   |   + decorators/  
   |   |   |   + templates/  
   |   |   |     
   |   |   + core/
   |   |   |   |
   |   |   |   + config/
   |   |   |   |   + thirdParty.config.js (3rd party modules configurations)
   |   |   |   |   + angular.config.js (Defines the AngularJS modules and configures them)
   |   |   |   |   + config.module.js
   |   |   |   |
   |   |   |   + constants/
   |   |   |   |   + global.constants.js (Global constant like moment or lodash)
   |   |   |   |   + config.constant.js (This file is generated by the gulp task 'build-config')
   |   |   |   |   + constants.module.js
   |   |   |   |
   |   |   |   + router/ (ui.router middleware)
   |   |   |   |
   |   |   |   + utils/
   |   |   |   |   + events.js (event bus service)
   |   |   |   |   + logger.js (logger service)
   |   |   |   |   + utils.module.js
   |   |   |   |
   |   |   |   + core.module.js
   |   |   |
   |   |   + <moduleName>/
   |   |   |   |
   |   |   |   + directives/  
   |   |   |   |   |
   |   |   |   |   + <directiveName>.directive.js
   |   |   |   |   + <directiveName>.directive.html
   |   |   |   |   + directives.module.js
   |   |   |   |
   |   |   |   + filters/  
   |   |   |   |   |
   |   |   |   |   + <filterName>.filter.js
   |   |   |   |   + filters.module.js
   |   |   |   |
   |   |   |   + services/  
   |   |   |   |   |
   |   |   |   |   + <serviceName>.service.js (service or factory)
   |   |   |   |   + services.module.js
   |   |   |   |
   |   |   |   + templates/  
   |   |   |   + views/
   |   |   |   |   |
   |   |   |   |   + <viewName>.js
   |   |   |   |   + <viewName>.html
   |   |   |   |   + views.module.js
   |   |   |   |
   |   |   |   + <moduleName>.module.js
   |   |   |
   |   |   + app.js
   |   |   + app.router.js (entry point for the ui.router middleware)
   |   |   + util.js (this object has some useful methods outside of the angular scope) 
   |   |
   |   +-- assets/ 
   |   |   |
   |   |   +-- css/
   |   |   +-- fonts/
   |   |   +-- i18n/
   |   |   +-- less/
   |   |   +-- media/
   |   |   +-- config/
   |   |       |
   |   |       +-- environments/ (This are the various environments for the config file)
   |   |       |   |
   |   |       |   + development.json
   |   |       |   + production.json
   |   |       |
   |   |       + config.constant.js (This is the template file for the gulp task 'build-config')   
   |   | 
   |   +-- lib/ (Bower packages)
   |   +-- index.html ("MAIN" - This is the start page of your single-page-application and has some gulp vars)
   |
   +-- tasks/ (There are all gulp tasks in separated files)
   |  
   +-- test/
   |   |
   |   + lib/
   |   + e2e/
   |   + midway/
   |   + unit/
   |
   +-- .bowerrc (defines the location for the bower_components)
   +-- .gitignore
   +-- .jshintrc (JSHint Syntax definitions)
   +-- bower.json
   +-- gulpfile.js (Task Runner)
   +-- karma-midway.config.js
   +-- karma-shared.config.js
   +-- karma-unit.config.js
   +-- package.json
   +-- project.config.js (Path definitions for gulp)
   +-- README.md (describes the project and how to set it up)

License

The MIT License

Copyright (c) 2015 Gery Hirschfeld (@hirsch88)

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the righjs to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Back to top