Random testing with Marvel's API
Install yo
, grunt-cli
, bower
, generator-angular-require
and generator-karma-require
- npm install
- bower install
- packages are setup you should be good shutup
- maybe something weird happens with compass / sass
- sudo gem install sass
- sudo gem install compass
grunt build
must be run before anything else due to dependency population in the RequireJS config and the like (this will be fixed in a future version).
Run grunt
for building and grunt serve
for preview
- angular-require:controller
- angular-require:directive
- angular-require:filter
- angular-require:route
- angular-require:service
- angular-require:provider
- angular-require:factory
- angular-require:value
- angular-require:constant
- angular-require:decorator
- angular-require:view
Generates a controller and view, and configures a route in app/scripts/app.js
connecting them.
Example:
yo angular-require:route myroute
Produces app/scripts/controllers/myroute.js
:
define(['angular'], function (angular) {
'use strict';
angular.module('myApp.controllers.myrouteCtrl', [])
.controller('myrouteCtrl', function ($scope) {
// ...
});
});
Produces app/views/myroute.html
:
<p>This is the myroute view</p>
Explicitly provide route URI
Example:
yo angular:route myRoute --uri=my/route
Produces controller and view as above and adds a route to app/scripts/app.js
with URI my/route
Generates a controller in app/scripts/controllers
.
Example:
yo angular-require:controller user
Produces app/scripts/controllers/user.js
:
define(['angular'], function (angular) {
'use strict';
angular.module('myApp.controllers.userCtrl', [])
.controller('userCtrl', function ($scope) {
// ...
});
});
Generates a directive in app/scripts/directives
.
Example:
yo angular-require:directive myDirective
Produces app/scripts/directives/myDirective.js
:
define(['angular'], function (angular) {
'use strict';
angular.module('myApp.directives.myDirective', [])
.directive('myDirective', function () {
return {
template: '<div></div>',
restrict: 'E',
link: function postLink(scope, element, attrs) {
element.text('this is the myDirective directive');
}
};
});
});
Generates a filter in app/scripts/filters
.
Example:
yo angular-require:filter myFilter
Produces app/scripts/filters/myFilter.js
:
define(['angular'], function (angular) {
'use strict';
angular.module('myApp.filters.myFilter', [])
.filter('myFilter', function () {
return function (input) {
return 'myFilter filter:' + input;
};
});
});
Generates an HTML view file in app/views
.
Example:
yo angular-require:view user
Produces app/views/user.html
:
<p>This is the user view</p>
Generates an AngularJS service.
Example:
yo angular-require:service myService
Produces app/scripts/services/myService.js
:
define(['angular'], function (angular) {
'use strict';
angular.module('myApp.services.myService', [])
.service('myService', function () {
// ...
});
});
You can also do yo angular:factory
, yo angular:provider
, yo angular:value
, and yo angular:constant
for other types of services.
Generates an AngularJS service decorator.
Example:
yo angular-require:decorator serviceName
Produces app/scripts/decorators/serviceNameDecorator.js
:
define(['angular'], function (angular) {
'use strict';
angular.module('myApp.decorators.serviceName', [])
.config(function ($provide) {
$provide.decorator('serviceName', function ($delegate) {
// ...
return $delegate;
});
});
});
In general, these options can be applied to any generator, though they only affect generators that produce scripts.
CoffeeScript is not supported at this time. Sorry. We'll take a look at CoffeeScript possibly being added at a later date.
tl;dr: You don't need to write annotated code as the build step will handle it for you.
By default, generators produce unannotated code. Without annotations, AngularJS's DI system will break when minified. Typically, these annotations that make minification safe are added automatically at build-time, after application files are concatenated, but before they are minified. The annotations are important because minified code will rename variables, making it impossible for AngularJS to infer module names based solely on function parameters.
The recommended build process uses ng-annotate
, a tool that automatically adds these annotations. However, if you'd rather not use it, you have to add these annotations manually yourself. Why would you do that though? If you find a bug in the annotated code, please file an issue at ng-annotate.
The following packages are always installed by the app generator:
- angular
- angular-mocks
The following additional modules are available as components on bower, and installable via bower install
:
- angular-animate
- angular-aria
- angular-cookies
- angular-loader
- angular-messages
- angular-resource
- angular-sanitize
All of these can be updated with bower update
as new versions of AngularJS are released.
As part of the grunt build
command, bower dependencies are inserted into the bootstrap.js
file using the bower:app
task specified in the Gruntfile. The test-bootstrap.js
file is taken care of by keeping it's dependencies in line with bootstrap.js
. This is handled by the replace:test
task within the Gruntfile.
json3
and es5-shim
have been removed as Angular 1.3 has dropped IE8 support and that is the last version that needed these shims. If you still require these, you can include them with: bower install --save json3 es5-shim
. wiredep
should add them to your index.html file but if not you can manually add them.
Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately.
You can change the app
directory by adding a appPath
property to bower.json
. For instance, if you wanted to easily integrate with Express.js, you could add the following:
{
"name": "yo-test",
"version": "0.0.0",
...
"appPath": "public"
}
This will cause Yeoman-generated client-side files to be placed in public
.
Note that you can also achieve the same results by adding an --appPath
option when starting generator:
yo angular [app-name] --appPath=public
Running grunt test
will run the unit tests with karma.
See the contributing docs
When submitting an issue, please follow the guidelines. Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.
When submitting a PR, make sure that the commit messages match the AngularJS conventions.
When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
When submitting a new feature, add tests that cover the feature.
Recent changes can be viewed on Github on the Releases Page