generator-angular-with-browserify
v0.2.4generator-angular-with-browserify
A generator for Yeoman.
Getting Started
To run this version of yeoman generator. First, make sure that you have already installed yeoman
$ npm install -g yo
To install generator-angular-with-require from npm, run:
$ npm install -g generator-angular-with-browserify
Finally, initiate the generator:
$ yo angular-with-browserify
Other dependencies
[Phantom.js] (http://phantomjs.org/) - You can change this in the config/karma.config.js by changing browsers tag
[Bower] (http://bower.io/)
[Grunt] (http://gruntjs.com/)
Napa (npm -g install napa)
SASS (gem install sass)
Compass (gem install compass)
Structure
New structure is based on [ng-boilerplate] (https://github.com/ngbp/ngbp) but optimized with browserify.
application/
|- app/
| |- bower_components/
| | |- <third libraries>
| |- images/
| | |- <image files>
| |- src/
| | |- index.js # main file
| | |- main.js # compiled file
| | |- spec.js # compiled file
| | |- <codeModule>/
| | | |- codeModule.js
| | | |- codeModule.spec.js
| | | |- codeModule.tpl.html
| |- style/
| | |- _custom_mixins.scss
| | |- style.scss
| | |- <other css files> - just copy other css files into this folder and
| | |- rerun `grunt serve` task to automatically concat css files
| |- 404.html
| |- favicon.ico
| |- index.html
| |- robots.txt
|- config/
| |- e2e.config.js
| |- karma.config.js
|- dist/
| |- <build>
|- node_modules/
| |- <node module code>
|- test/
| |- e2eSpecs
| | |- page.e2espec.js
| | |- <other e2e specs>
|- bower.json
|- Gruntfile.js
|- browserify.config.js # configuration for browserify alias for your application
|- package.json
Old structure for revision v0.2.*
application/
|- app/
| |- bower_components/
| | |- <third libraries>
| |- images/
| | |- <image files>
| |- scripts/
| | |- index.js # main file
| | |- main.js # compiled file
| | |- controllers/
| | | |- controllers.js
| | |- services/
| | | |- services.js
| | |- directives/
| | | |- directives.js
| | |- filters/
| | | |- filters.js
| |- style/
| | |- _custom_mixins.scss
| | |- style.scss
| | |- <other css files> - just copy other css files into this folder and
| | |- rerun `grunt serve` task to automatically concat css files
| |- 404.html
| |- favicon.ico
| |- index.html
| |- robots.txt
|- config/
| |- e2e.config.js
| |- karma.config.js
|- dist/
| |- <build>
|- node_modules/
| |- <node module code>
|- test/
| |- e2eSpecs
| | |- page.e2espec.js
| | |- <other e2e specs>
| |- specs/
| | |- <specs files>
| |- helpers/
| | |- <helper file for specs>
| |- test-main.js
|- bower.json
|- Gruntfile.js
|- package.json
Browserify alias
Alias for grunt browserify task are declared in browserify.config.js with the format of path:alias.
Usage
Your main javascript file is placed in app/src/index.js. The main.js is generated from grunt browserify task - I recommend to leave the app/src/main.js unchanged.
The version of generator uses SASS Bootstrap as its main theme. If you want to use Compass framework, make sure that you view their docs to know what to include Compass
To run the serve, and start building your application
$ grunt serve
It will automatically open the webpage on your localhost:9000, or you will have to do it manuallly
To run unit test:
$ grunt karma:unit # this requires the task `grunt browserify:spec` to be runned
To run e2e test. This requires selenium browser and chromedriver. Make sure you view [angular/protractor] (https://github.com/angular/protractor)
Setup protractor and seleium browser
$ npm install -g protractor
$ webdriver-manager update
Run actual e2e test
$ grunt shell:protractor
To build files for production
$ grunt build
This also supports for subgenerator for controller, filter, service, and directive as well. Make sure you link them in your main module
$ yo angular-with-browserify:controller "name" #replace the name with your module name
$ yo angular-with-browserify:service "name" #replace the name with your module name
$ yo angular-with-browserify:directive "name" #replace the name with your module name
$ yo angular-with-browserify:filter "name" #replace the name with your module name
License
Metadata
- Unknown
- >=0.8.0
- Phan Quang Hung
- released 3/4/2015