| Newer Modern Generator for Angular and Webpack |
|---|
| There is a new generator for Angular 1.5, Webpack, npm, SASS, and ES6. Check it out here: https://github.com/cgross/generator-cg-angular15 |
#generator-cg-angular
Yeoman Generator for Enterprise Angular Projects
This generator follows the Angular Best Practice Guidelines for Project Structure.
Features
- Provides a directory structure geared towards large Angular projects.
- Each controller, service, filter, and directive are placed in their own file.
- All files related to a conceptual unit are placed together. For example, the controller, HTML, LESS, and unit test for a partial are placed together in the same directory.
- Provides a ready-made Grunt build that produces an extremely optimized distribution.
- Build uses grunt-ng-annotate so you don't have to use the Angular injection syntax for safe minification (i.e. you dont need
$injector(['$scope','$http',.... grunt servetask allows you to run a simple development server with watch/livereload enabled. Additionally, JSHint and the appropriate unit tests are run for the changed files.
- Build uses grunt-ng-annotate so you don't have to use the Angular injection syntax for safe minification (i.e. you dont need
- Integrates Bower for package management
- Includes Yeoman subgenerators for directives, services, partials, filters, and modules.
- Integrates LESS and includes Bootstrap via the source LESS files allowing you to reuse Bootstrap vars/mixins/etc.
- Easily Testable - Each sub-generator creates a skeleton unit test. Unit tests can be run via
grunt testand they run automatically during the grunt watch that is active duringgrunt serve.
All subgenerators prompt the user to specify where to save the new files. Thus you can create any directory structure you desire, including nesting. The generator will create a handful of files in the root of your project including index.html, app.js, and app.less. You determine how the rest of the project will be structured.
In this example, the user has chosen to group the app into an admin folder, a search folder, and a service folder.
app.less ....................... main app-wide styles
app.js ......................... angular module initialization and route setup
index.html ..................... main HTML file
Gruntfile.js ................... Grunt build file
/admin ......................... example admin module folder
admin.js ..................... admin module initialization and route setup
admin.less ................... admin module LESS
/admin-directive1 ............ angular directives folder
admin-directive1.js ........ example simple directive
admin-directive1-spec.js.... example simple directive unit test
/admin-directive2 ............ example complex directive (contains external partial)
admin-directive2.js ........ complex directive javascript
admin-directive2.html ...... complex directive partial
admin-directive2.less ...... complex directive LESS
admin-directive2-spec.js ... complex directive unit test
/admin-partial ............... example partial
admin-partial.html ......... example partial html
admin-partial.js ........... example partial controller
admin-partial.less ......... example partial LESS
admin-partial-spec.js ...... example partial unit test
/search ........................ example search component folder
my-filter.js ................. example filter
my-filter-spec.js ............ example filter unit test
/search-partial .............. example partial
search-partial.html ........ example partial html
search-partial.js .......... example partial controller
search-partial.less ........ example partial LESS
search-partial-spec.js ..... example partial unit test
/service ....................... angular services folder
my-service.js .............. example service
my-service-spec.js ......... example service unit test
my-service2.js ............. example service
my-service2-spec.js ........ example service unit test
/img ........................... images (not created by default but included in /dist if added)
/dist .......................... distributable version of app built using grunt and Gruntfile.js
/bower_component................ 3rd party libraries managed by bower
/node_modules .................. npm managed libraries used by grunt
Prerequisites: Node, Grunt, Yeoman, and Bower. Once Node is installed, do:
npm install -g grunt-cli yo bower
Next, install this generator:
npm install -g generator-cg-angular
To create a project:
mkdir MyNewAwesomeApp
cd MyNewAwesomeApp
yo cg-angular
Now that the project is created, you have 3 simple Grunt commands available:
grunt serve #This will run a development server with watch & livereload enabled.
grunt test #Run local unit tests.
grunt build #Places a fully optimized (minified, concatenated, and more) in /dist
When grunt serve is running, any changed javascript files will be linted using JSHint as well as have their appropriate unit tests executed. Only the unit tests that correspond to the changed file will be run. This allows for an efficient test driven workflow.
There are a set of subgenerators to initialize empty Angular components. Each of these generators will:
- Create one or more skeleton files (javascript, LESS, html, spec etc) for the component type.
- Update index.html and add the necessary
scripttags. - Update app.less and add the @import as needed.
- For partials, update the app.js, adding the necessary route call if a route was entered in the generator prompts.
There are generators for directive,partial,service, filter, module, and modal.
Running a generator:
yo cg-angular:directive my-awesome-directive
yo cg-angular:partial my-partial
yo cg-angular:service my-service
yo cg-angular:filter my-filter
yo cg-angular:module my-module
yo cg-angular:modal my-modal
The name paramater passed (i.e. 'my-awesome-directive') will be used as the file names. The generators will derive appropriate class names from this parameter (ex. 'my-awesome-directive' will convert to a class name of 'MyAwesomeDirective'). Each sub-generator will ask for the folder in which to create the new skeleton files. You may override the default folder for each sub-generator in the .yo-rc.json file.
The modal subgenerator is a convenient shortcut to create partials that work as modals for Bootstrap v3 and Angular-UI-Bootstrap v1.3 (both come preconfigured with this generator). If you choose not to use either of these libraries, simply don't use the modal subgenerator.
Subgenerators are also customizable. Please read CUSTOMIZING.md for details.
Submodules allow you to more explicitly separate parts of your application. Use the yo cg-angular:module my-module command and specify a new subdirectory to place the module into. Once you've created a submodule, running other subgenerators will now prompt you to select the module in which to place the new component.
The new app will have a handful of preconfigured libraries included. This includes Angular 1.5, Bootstrap 3, AngularUI Bootstrap, FontAwesome, JQuery, LoDash, LESS, and Momentx. You may of course add to or remove any of these libraries. But the work to integrate them into the app and into the build process has already been done for you.
The project will include a ready-made Grunt build that will:
- Build all the LESS files into one minified CSS file.
- Uses grunt-angular-templates to turn all your partials into Javascript.
- Uses grunt-ng-annotate to preprocess all Angular injectable methods and make them minification safe. Thus you don't have to use the array syntax.
- Concatenates and minifies all Javascript into one file.
- Replaces all appropriate script references in
index.htmlwith the minified CSS and JS files. - (Optionally) Minifies any images in
/img. - Minifies the
index.html. - Copies any extra files necessary for a distributable build (ex. Font-Awesome font files, etc).
The resulting build loads only a few highly compressed files.
The build process uses grunt-dom-munger to pull script references from the index.html. This means that your index.html is the single source of truth about what makes up your app. Adding a new library, new controller, new directive, etc does not require that you update the build file. Also the order of the scripts in your index.html will be maintained when they're concatenated.
Importantly, grunt-dom-munger uses CSS attribute selectors to manage the parsing of the script and link tags. Its very easy to exclude certain scripts or stylesheets from the concatenated files. This is often the case if you're using a CDN. This can also be used to prevent certain development scripts from being included in the final build.
-
To prevent a script or stylesheet from being included in concatenation, put a
data-concat="false"attribute on the link or script tag. This is currently applied for thelivereload.jsandless.jsscript tags. -
To prevent a script or link tag from being removed from the finalized
index.html, use adata-remove="false"attribute.
- 04/10/2016 - v3.30 - Upgrades to the Bower components including Angular to version 1.5.
- 11/9/2014 - v3.2.0 - Switch from ngmin to ng-annotate. Disabling grunt-contrib-imagemin so Windows users don't encounter its issues. Subgenerators prompt for a name if not entered. Other fixes.
- 7/6/2014 - v3.1.2 - Fix for directive template URLs with backslashes on Windows.
- 6/10/2014 - v3.1.1 - Fix for backslashes being used in injected routes/tags on subgenerators.
- 5/1/2014 - v3.1.0 - New subgenerators for modules and modals. Replaced grunt-contrib-jasmine with grunt-karma. Karma allows us to test against actual browsers other than PhantomJS.
- 3/10/2014 - v3.0.2 - Fix for directive files not being named correctly. Fix for htmlmin from affecting some Bootstrap styles.
- 3/03/2014 - v3.0.0 - All subgenerators now ask the user for a directory enabling any user-defined project structure. Gruntfile has been altered to allow scripts, partials, and LESS files to be located anywhere in the project directory structure. An option to use
angular-ui-routeris now available when initializing a new project.js/setup.jsandcss/app.lessmoved toapp.jsandapp.less.grunt serveris nowgrunt serve. Insideindex.htmlall user script tags are grouped together instead of split out into groups for services/filters/etc. New ability to customize the subgenerators. - 2/10/2014 - v2.1.1 - Fix for the directive spec file named with a .less extension.
- 1/06/2014 - v2.1.0 - Nice enhancements for unit testing. Specs are now placed in the same directory as the component they're testing. Additionally, unit tests are now run during
grunt serverallowing for an easy and efficient test-driven workflow. - 12/30/2013 - v2.0.0 - Big Update. Angular 1.2 and Bootstrap 3. Newer versions of Angular UI, Font Awesome, and JQuery. Lodash was replaced with Underscore. Lots of other small changes.
- 9/06/2013 - V1.0.4 - Fixed templating issue with generated specs for
yo cg-angular:servicesubgenerator. - 8/29/2013 - V1.0.3 - Renamed
/libback to/bower_componentsas clarity trumps brevity. Renamed/binto/dist. Fixed spelling error in generated directive's js template location. Moved up to later version ofyeoman-generatordependency to solve "Cannot read bold of undefined" error coming from Yeoman. JSHint options now read from.jshintrc. And more small stuff. - 7/08/2013 - V1.0.2 - Added utf8 charset to index.html. Fix for "EMFile, too many open files" on
grunt watchby no longer watching thelibfolder. - 6/20/2013 - v1.0.1 - Fixed a ton of known issues. Replaced
grunt-regardewithgrunt-contrib-watch. Fixed and tweaked the unit test specs andgrunt test. Fixed issues with the build. Generator is now ready for real use. - 6/18/2013 - v1.0.0 - Initial release of template as Yeoman generator.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent