Yeoman generator to create standalone AngularJS component libraries in seconds!
If you want to create a standalone library with filters, directives, services, etc for use in your AngularJS applications, then this generator may just be what you need.
The generator automatically:
- creates a complete directory structure with boilerplate code for your AngularJS library
- creates a complete directory structure for your tests
- configures Gulp to build your code and automate testing
- sets up Karma to run your unit tests using Mocha, Chai and Sinon
This generator is NOT made to generate complete AngularJS applications. If you want to generate a complete AngularJS web application with routes, views, etc then please use generator-angular.
Make sure you have yeoman installed:
$ npm install -g yoInstall the generator:
$ npm install -g generator-angularjs-libraryCreate a new project directory:
$ mkdir sample-project
$ cd sample-projectRun:
$ yo angularjs-libraryAnswer the questions and the generator will create the boilerplate for your library:
The generator automatically:
- creates a
srcdirectory structure with the boilerplate code for your AngularJS library - creates a
testdirectory structure to store your unit tests and e2e tests - creates initial unit tests in the
test/unit/directory - creates a custom
gulpfile.jsto build, minify and uglify your library - creates a custom
karma-src.conf.jsto let karma run your unit tests - creates a custom
karma-dist-concatenated.conf.jsto let karma run your unit tests - creates a custom
karma-dist-minified.conf.jsto let karma run your unit tests - creates a custom
bower.jsonwith necessary devDependencies and appropriate ignore files - creates a custom
package.jsonfile for your library - creates a custom
.travis.ymlfile to enable travis support - creates a custom
.jshintrcto support angular global during syntax check - creates a custom
README.mdfile - creates a custom
LICENSEfile
Running the generator using library name "Your Library" will result in the following files being generated for you:
.
├── .bowerrc # Configure bower directory for development
├── .editorconfig # Editor configuration for code consistency
├── .gitignore # Includes files that Git should ignore
├── .jshintrc # JSHint config with angular global support
├── LICENSE # Custom license file with your name in it
├── README.md # Basic README.md with title of your library
├── bower.json # Bower configuration with custom devDependencies and ignore files
├── dist # This folder and contents is generated by running gulp
│ ├── sample-library.js # Your library, ready to use in your development environment
│ └── sample-library.min.js # Your library, ready to use in your production environment
├── gulpfile.js # Gulp configuration with definition to build your library
├── karma-dist-concatenated.conf.js # Karma configuration to run unit tests using sample-library.js
├── karma-dist-minified.conf.js # Karma configuration to run unit tests using sample-library.min.js
├── karma-src.conf.js # Karma configuration to run unit tests using src/**/*.js
├── package.json # Npm configuration with necessary dependencies for development
├── src # Source directory
│ └── sample-library
│ ├── directives # Directory where you can store directives
│ ├── filters # Directory where you can store filters
│ ├── sampleLibrary.module.js # Main module file
│ └── services # Directory where you can store services
└── test
├── e2e
│ └── sample-library # Directory where you can store E2E tests
└── unit
└── sample-library
├── directives # Directory where you can store unit tests for directives
├── filters # Directory where you can store unit tests for filters
├── sampleLibrarySpec.js # Unit tests for main module
└── services # Directory where you can store unit tests for servicesThe basic library structure is automatically created for you in the src folder.
You can edit the existing files or add additional files in the src folder to add components to your library.
Once you have added files in the src directory, you can update the files in the dist directory using:
$ gulpFirst gulp will
- check the JavaScript syntax of
src/**/*.js - run all unit tests using the code in your
srcdirectory
to make sure the code is fine.
Then all files in the src directory will be concatenated into 2 files in the dist directory:
<your-library-name>.js: regular version of your library to use in a development environment<your-library-name>.min.js: minified version of your library to use in a production environment
The generator creates 3 configurations for unit testing:
karma-src.conf.js: run unit tests usingsrc/**/*.jskarma-dist-concatenated.conf.js: run unit tests usingdist/<your-library-name>.jskarma-dist-minified.conf.js: run unit tests usingdist/<your-library-name>.min.js
By default, gulp will run karma-src.conf.js, but you can use the following preconfigured Gulp tasks to specify the suite you want to run:
# Run unit tests using src/**/*.js
$ gulp test-src
# Run unit tests using dist/<your-library-name>.js
$ gulp test-dist-concatenated
# Run unit tests using dist/<your-library-name>.min.js
$ gulp test-dist-minified
This allows you to unit test the different builds of your code to ensure they all work as expected.
Suppose you have a service:
// src/my-lib/services/some-service.js
angular.module('myLib.services')
.service('someService', function() {
this.foo = function() {
return 1234;
};
});Then you write a test like this:
describe('someService', function() {
var someService;
// load the module
beforeEach(module('myLib.services'));
// inject the service
beforeEach(inject(function(_someService_) {
someService = _someService_;
}));
it('should exist', function() {
expect(someService).to.be.ok;
});
it('should have a method called foo', function() {
expect(someService.foo).to.be.a('function');
});
});Help make this project better - fork and send a PR or create an issue.
- Fix issue where library name was prefixed with
-in case of capital as first character
- Removed gruntfile from .gitignore
- Added gulpfile and karma config files to .gitignore
- Added spec reporter to karma for better unit test progress output (thanks @simplesthing)
- Added JSHint for gulpfile.js and karma configuration files
- Added angular as argument to module to further reduce minified output size
- Fixed copy of
.travis.yml
- Added JSHint syntax check
- Added gulp-plumber support for better error handling
- Gulp now starts watching for file changes by default for easier development
- Removed prefix and suffix files in favor of AngularJS styleguide support
- Moved bower dependencies to devDependencies to prevent version conflicts
- Updated bower dependencies to automatically install latest versions
- Let travis perform bower install before running tests
- Set default version as 0.1.0 instead of 0.0.0
- Added v3.x.x branch
- Completely rewritten to support newer version of Yeoman
- Now uses Gulp instead of Grunt as task runner
- Now uses Mocha as test framework instead of Jasmine
- Added travis support
- Updated bower and npm package versions
- Added automatic creation of README.md
- Added automatic creation of LICENSE.txt
- Added support for author name and email
- Removed obsolete dependencies
- Added support for PhantomJS in Karma configuration
- Fixed bower directory in gitignore
- Added support for library names with spaces and capitals
- Added chalk dependency
MIT