Add component subgenerator

generators/app/index.js

@@ -32,7 +32,7 @@ module.exports = fountain.Base.extend({
 
   configuring() {
     this.config.set('version', version);
-    this.config.set('options', this.props);
+    this.config.set('props', this.props);
     this.mergeJson('package.json', {
       dependencies: {
         angular: '^1.5.0'

generators/component/index.js

@@ -0,0 +1,23 @@
+const fountain = require('fountain-generator');
+
+module.exports = fountain.Base.extend({
+  writing() {
+    const name = this.options.name || 'component';
+    const titleCase = string => string.charAt(0).toUpperCase() + string.slice(1);
+    const componentName = titleCase(name);
+    const path = this.options.dir ? `src/app/${this.options.dir}` : `src/app`;
+    const typings = this.options.dir ? this.options.dir.split('/').reduce(prev => `../${prev}`, '../../typings/index.d.ts') : '../../typings/index.d.ts';
+    const props = {
+      componentName,
+      modules: this.config.get('props').modules,
+      js: this.config.get('props').js,
+      framework: this.config.get('props').framework,
+      name,
+      typings,
+      templateUrl: this.config.get('props').modules === 'systemjs' ? `src/${path}/${name}.html` : `${path}/${name}.html`
+    };
+    this.copyTemplate(`src/app/component.js`, `${path}/${name}.js`, props);
+    this.copyTemplate(`src/app/component.spec.js`, `${path}/${name}.spec.js`, props);
+    this.copyTemplate('src/app/component.html', `${path}/${name}.html`, props);
+  }
+});

generators/component/templates/src/app/component.babel

@@ -0,0 +1,11 @@
+class <%- componentName %>Controller {
+  constructor() {
+    this.text = 'My brand new component!';
+  }
+}
+
+<% if (modules === 'inject') { -%>
+<% include inject/component.babel %>
+<% } else { -%>
+<% include modules/component.babel %>
+<% } -%>

generators/component/templates/src/app/component.html

@@ -0,0 +1,3 @@
+<div class="component">
+  <h2>{{$ctrl.text}}</h2>
+</div>

generators/component/templates/src/app/component.js

@@ -0,0 +1,9 @@
+function <%- componentName %>Controller() {
+  this.text = 'My brand new component!';
+}
+
+<% if (modules === 'inject') { -%>
+<% include inject/component.js %>
+<% } else { -%>
+<% include modules/component.js %>
+<% } -%>

generators/component/templates/src/app/component.spec.babel

@@ -0,0 +1,15 @@
+<% if (modules !== 'inject') { -%>
+<% include modules/component.spec.header.babel %>
+<% } -%>
+describe('<%- componentName %> component', () => {
+<% if (modules === 'inject') { -%>
+<% include inject/component.spec.babel %>
+<% } else { -%>
+<% include modules/component.spec.babel %>
+<% } -%>
+
+  it('should...', angular.mock.inject(($rootScope, $compile) => {
+    const element = $compile('<<%- componentName %>></<%- componentName %>>')($rootScope);
+    expect(element).not.toBeNull();
+  }));
+});

generators/component/templates/src/app/component.spec.ts

@@ -0,0 +1,17 @@
+/// <reference path="<%- typings %>" />
+
+<% if (modules !== 'inject') { -%>
+<% include modules/component.spec.header.ts %>
+<% } -%>
+describe('<%- componentName %> component', () => {
+<% if (modules === 'inject') { -%>
+<% include inject/component.spec.ts %>
+<% } else { -%>
+<% include modules/component.spec.ts %>
+<% } -%>
+
+  it('should...', <%- modules === 'webpack' ? 'angular.mock.' : '' %>inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
+    const element = $compile('<<%- componentName %>></<%- componentName %>>')($rootScope);
+    expect(element).not.toBeNull();
+  }));
+});

generators/component/templates/src/app/component.ts

@@ -0,0 +1,13 @@
+class <%- componentName %>Controller {
+  public text: string;
+
+  constructor() {
+    this.text = 'My brand new component!';
+  }
+}
+
+<% if (modules === 'inject') { -%>
+<% include inject/component.babel %>
+<% } else { -%>
+<% include modules/component.babel %>
+<% } -%>

generators/component/templates/src/app/inject/component.babel

@@ -0,0 +1,6 @@
+angular
+  .module('app')
+  .component('<%- componentName %>', {
+    templateUrl: 'app/<%- name %>.html',
+    controller: <%- componentName %>
+  });

generators/component/templates/src/app/inject/component.js

@@ -0,0 +1,6 @@
+angular
+  .module('app')
+  .component('<%- componentName %>', {
+    templateUrl: 'app/<%- name %>.html',
+    controller: <%- componentName %>
+  });

generators/component/templates/src/app/inject/component.spec.babel

@@ -0,0 +1,7 @@
+  beforeEach(module('app', $provide => {
+    $provide.factory('<%- componentName %>', () => {
+      return {
+        templateUrl: 'app/<%- name %>.html'
+      };
+    });
+  }));

generators/component/templates/src/app/inject/component.spec.ts

@@ -0,0 +1,7 @@
+  beforeEach(module('app', ($provide: ng.auto.IProvideService) => {
+    $provide.factory('<%- componentName %>', () => {
+      return {
+        templateUrl: 'app/<%- name %>.html'
+      };
+    });
+  }));

generators/component/templates/src/app/inject/component.ts

@@ -0,0 +1,6 @@
+angular
+  .module('app')
+  .component('<%- componentName %>', {
+    templateUrl: 'app/<%- name %>.html',
+    controller: <%- componentName %>
+  });

generators/component/templates/src/app/modules/component.babel

@@ -0,0 +1,4 @@
+export const <%- componentName %> = {
+  templateUrl: 'app/<%- name %>.html',
+  controller: <%- componentName %>Controller
+};

generators/component/templates/src/app/modules/component.js

@@ -0,0 +1,4 @@
+module.exports = {
+  templateUrl: 'app/<%- componentName %>.html',
+  controller: <%- componentName %>Controller
+};

generators/component/templates/src/app/modules/component.spec.babel

@@ -0,0 +1,6 @@
+  beforeEach(() => {
+    angular
+      .module('<%- componentName %>', ['<%- templateUrl %>'])
+      .component('<%- componentName %>', <%- componentName %>);
+    angular.mock.module('<%- componentName %>');
+  });

generators/component/templates/src/app/modules/component.spec.header.babel

@@ -0,0 +1,3 @@
+import angular from 'angular';
+import 'angular-mocks';
+import {<%- componentName %>} from './<%- name %>';

generators/component/templates/src/app/modules/component.spec.header.ts

@@ -0,0 +1,3 @@
+import * as angular from 'angular';
+import 'angular-mocks';
+import {<%- componentName %>} from './<%- name %>';

generators/component/templates/src/app/modules/component.spec.ts

@@ -0,0 +1,6 @@
+  beforeEach(() => {
+    angular
+      .module('<%- componentName %>', ['<%- templateUrl %>'])
+      .component('<%- componentName %>', <%- componentName %>);
+    <%- modules === 'webpack' ? 'angular.mock.' : '' %>module('<%- componentName %>');
+  });

generators/component/templates/src/app/modules/component.ts

@@ -0,0 +1,4 @@
+export const <%- componentName %> = {
+  templateUrl: 'app/<%- name %>.html',
+  controller: <%- componentName %>Controller
+};