diff --git a/component/USAGE b/component/USAGE
new file mode 100644
index 000000000..e69de29bb
diff --git a/component/index.js b/component/index.js
new file mode 100644
index 000000000..2f8d1e531
--- /dev/null
+++ b/component/index.js
@@ -0,0 +1,18 @@
+'use strict';
+var util = require('util');
+var ScriptBase = require('../script-base.js');
+
+var Generator = module.exports = function Generator() {
+ ScriptBase.apply(this, arguments);
+};
+
+util.inherits(Generator, ScriptBase);
+
+Generator.prototype.createComponentFiles = function createComponentFiles() {
+ this.generateSourceAndTest(
+ 'component',
+ 'spec/component',
+ 'components',
+ this.options['skip-add'] || false
+ );
+};
diff --git a/readme.md b/readme.md
index 0268ae512..ca220dd47 100644
--- a/readme.md
+++ b/readme.md
@@ -44,6 +44,7 @@ Available generators:
* [angular](#app) (aka [angular:app](#app))
* [angular:controller](#controller)
* [angular:directive](#directive)
+* [angular:component](#component)
* [angular:filter](#filter)
* [angular:route](#route)
* [angular:service](#service)
@@ -127,6 +128,24 @@ angular.module('myMod').directive('myDirective', function () {
});
```
+### Component
+Generates a component in `app/scripts/components`.
+
+Example:
+```bash
+yo angular:component myComponent
+```
+
+Produces `app/scripts/components/myComponent.js`:
+```javascript
+angular.module('myMod').component('myComponent', {
+ template: '
{{$ctrl.message}}
',
+ controller: function () {
+ this.message = 'this is the myComponent component';
+ }
+});
+```
+
### Filter
Generates a filter in `app/scripts/filters`.
diff --git a/templates/coffeescript/component.coffee b/templates/coffeescript/component.coffee
new file mode 100644
index 000000000..2b0f1cc57
--- /dev/null
+++ b/templates/coffeescript/component.coffee
@@ -0,0 +1,14 @@
+'use strict'
+
+###*
+ # @ngdoc component
+ # @name <%= scriptAppName %>.component:<%= cameledName %>
+ # @description
+ # # <%= cameledName %>
+###
+angular.module '<%= scriptAppName %>'
+ .component '<%= cameledName %>',
+ template: '{{$ctrl.message}}
'
+ controller: ->
+ this.message = 'this is the <%= cameledName %> component'
+ return
diff --git a/templates/coffeescript/spec/component.coffee b/templates/coffeescript/spec/component.coffee
new file mode 100644
index 000000000..033a25fd8
--- /dev/null
+++ b/templates/coffeescript/spec/component.coffee
@@ -0,0 +1,18 @@
+
+'use strict'
+
+describe 'Component: <%= cameledName %>', ->
+
+ # load the component's module
+ beforeEach module '<%= scriptAppName %>'
+
+ scope = {}
+
+ beforeEach inject ($rootScope) ->
+ scope = $rootScope.$new()
+
+ it 'should make hidden element visible', inject ($compile) ->
+ element = angular.element '<<%= _.dasherize(name) %>><%= _.dasherize(name) %>>'
+ element = $compile(element) scope
+ scope.$apply()
+ expect(element.text()).toBe 'this is the <%= cameledName %> component'
diff --git a/templates/common/root/_bower.json b/templates/common/root/_bower.json
index 498d2434b..9bdcbd4f3 100644
--- a/templates/common/root/_bower.json
+++ b/templates/common/root/_bower.json
@@ -1,4 +1,4 @@
-{<% var ngVer = "1.4.0" %>
+{<% var ngVer = "1.5.7" %>
"name": "<%= _.slugify(_.humanize(appname)) %>",
"version": "0.0.0",
"dependencies": {
diff --git a/templates/javascript/component.js b/templates/javascript/component.js
new file mode 100644
index 000000000..cc9120132
--- /dev/null
+++ b/templates/javascript/component.js
@@ -0,0 +1,15 @@
+'use strict';
+
+/**
+ * @ngdoc component
+ * @name <%= scriptAppName %>.component:<%= cameledName %>
+ * @description
+ * # <%= cameledName %>
+ */
+angular.module('<%= scriptAppName %>')
+ .component('<%= cameledName %>', {
+ template: '{{$ctrl.message}}
',
+ controller: function () {
+ this.message = 'this is the <%= cameledName %> component';
+ }
+ });
diff --git a/templates/javascript/spec/component.js b/templates/javascript/spec/component.js
new file mode 100644
index 000000000..4f406cdc4
--- /dev/null
+++ b/templates/javascript/spec/component.js
@@ -0,0 +1,20 @@
+'use strict';
+
+describe('Component: <%= cameledName %>', function () {
+
+ // load the components's module
+ beforeEach(module('<%= scriptAppName %>'));
+
+ var element, scope;
+
+ beforeEach(inject(function ($rootScope) {
+ scope = $rootScope.$new();
+ }));
+
+ it('should make hidden element visible', inject(function ($compile) {
+ element = angular.element('<<%= _.dasherize(name) %>><%= _.dasherize(name) %>>');
+ element = $compile(element)(scope);
+ scope.$apply();
+ expect(element.text()).toBe('this is the <%= cameledName %> component');
+ }));
+});
diff --git a/test/component.js b/test/component.js
new file mode 100644
index 000000000..52ebbbf99
--- /dev/null
+++ b/test/component.js
@@ -0,0 +1,22 @@
+'use strict';
+var fs = require('fs');
+var path = require('path');
+var helpers = require('yeoman-test');
+var assert = require('yeoman-assert');
+
+describe('angular:component', function () {
+ beforeEach(function (done) {
+ helpers
+ .run(require.resolve('../component'))
+ .withArguments('foo')
+ .on('end', done);
+ });
+
+ it('generates a new component', function () {
+ assert.file('test/spec/components/foo.js');
+ assert.fileContent(
+ path.join('app/scripts/components/foo.js'),
+ /component\('foo'/
+ );
+ });
+});