Skip to content

Latest commit

 

History

History
284 lines (209 loc) · 7.94 KB

README.md

File metadata and controls

284 lines (209 loc) · 7.94 KB
Raw

generator-hirsch

NPM version

Yeoman generator

Create a module based AngularJS Application.

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

Table of contents

Prerequisites

  1. Install Node.js

  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