feat(): add option to set components name.

* Adds an option to specify the view's component name.

Closes #722.

Author: devversion

addon/ng2/blueprints/ng2/files/__path__/app/__name__.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   moduleId: module.id,
   selector: '<%= htmlComponentName %>-app',
   templateUrl: '<%= htmlComponentName %>.component.html',
-  styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']
+  styleUrls: ['<%= htmlComponentName %>.component.<%= styleExt %>']
 })
 export class <%= jsComponentName %>AppComponent {
   title = '<%= htmlComponentName %> works!';

addon/ng2/blueprints/ng2/files/angular-cli.json

@@ -1,7 +1,7 @@
 {
   "project": {
     "version": "<%= version %>",
-    "name": "<%= htmlComponentName %>"
+    "name": "<%= packageName %>"
   },
   "apps": [
     {"main": "<%= sourceDir %>/main.ts", "tsconfig": "<%= sourceDir %>/tsconfig.json"}

addon/ng2/blueprints/ng2/files/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "<%= htmlComponentName %>",
+  "name": "<%= packageName %>",
   "version": "0.0.0",
   "license": "MIT",
   "angular-cli": {},

addon/ng2/blueprints/ng2/index.js

@@ -8,7 +8,8 @@ module.exports = {
   availableOptions: [
     { name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
-    { name: 'mobile', type: Boolean, default: false }
+    { name: 'mobile', type: Boolean, default: false },
+    { name: 'component-name', type: String, default: '', aliases: ['cn'] }
   ],
 
   locals: function(options) {
@@ -22,9 +23,12 @@ module.exports = {
       .replace(/-(.)/g, (_, l) => ' ' + l.toUpperCase())
       .replace(/^./, (l) => l.toUpperCase());
 
+    const packageName = stringUtils.dasherize(options.entity.name);
+
     return {
-      htmlComponentName: stringUtils.dasherize(options.entity.name),
-      jsComponentName: stringUtils.classify(options.entity.name),
+      packageName: packageName,
+      htmlComponentName: stringUtils.dasherize(options.componentName) || packageName,
+      jsComponentName: stringUtils.classify(options.componentName) || stringUtils.classify(options.entity.name),
       fullAppName: fullAppName,
       styleExt: this.styleExt,
       version: this.version,
@@ -56,6 +60,9 @@ module.exports = {
       },
       __styleext__: () => {
         return options.locals.styleExt;
+      },
+      __name__: () => {
+        return options.locals.htmlComponentName;
       }
     };
   }

addon/ng2/commands/init.js

@@ -22,7 +22,8 @@ module.exports = Command.extend({
     { name: 'name', type: String, default: '', aliases: ['n'] },
     { name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
-    { name: 'mobile', type: Boolean, default: false }
+    { name: 'mobile', type: Boolean, default: false },
+    { name: 'component-name', type: String, default: '', aliases: ['cn'] }
   ],
 
   anonymousOptions: ['<glob-pattern>'],
@@ -91,7 +92,8 @@ module.exports = Command.extend({
       rawArgs: rawArgs.toString(),
       sourceDir: commandOptions.sourceDir,
       prefix: commandOptions.prefix,
-      mobile: commandOptions.mobile
+      mobile: commandOptions.mobile,
+      componentName: commandOptions.componentName
     };
 
     if (!validProjectName(packageName)) {

addon/ng2/commands/new.ts

@@ -21,6 +21,7 @@ const NewCommand = Command.extend({
     { name: 'skip-git', type: Boolean, default: false, aliases: ['sg'] },
     { name: 'directory', type: String, aliases: ['dir'] },
     { name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
+    { name: 'component-name', type: String, default: '', aliases: ['cn'] },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
     { name: 'mobile', type: Boolean, default: false }
   ],