Yeoman generator
Create a module based AngularJS Application.
Based on the famous style guide from John Papa angular-styleguide
Install Node.js
brew install node
choco install nodejs
Install Yeoman npm install -g yo
Install these NPM packages globally
npm install -g bower gulp nodemon
Install generator-hirsch
npm install -g generator-hirsch
Create a new folder and change directory to it
mkdir myApp
cd myApp
Run the generator
yo hirsch appname
When you generate the project it should run these commands, but if you notice missing packages, run these again:
npm install
bower install
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
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]
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
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
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
I use this style guide for my apps: johnpapa/angular-styleguide
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)
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.