daftmonk / generator-ng-component Goto Github PK

Would a angular resource generator and template be an acceptable addition here?

It could be useful by itself and also with other sub generators to create matching client and server resource APIs.

In conjunction with generator-angular-fullstack 2.0.0 (ref issue #, I'm having issues generating anything under ng-component. This also falls into issue #279 on generator-angular-fullstack.

My setup (clean install)

• nvm 1.4.9
• node 0.11.13
• grunt-cli v0.1.13
• grunt v0.4.5
• yo 1.2.0

.yo-rc.json

{
  "generator-angular-fullstack": {
    "insertRoutes": "true",
    "registerRoutesFile": "server/routes.js",
    "routesNeedle": "// Insert routes below",
    "insertSockets": "true",
    "registerSocketsFile": "server/config/socketio.js",
    "socketsNeedle": "// Insert sockets below",
    "filters": {
      "js": true,
      "html": true,
      "sass": true,
      "uirouter": true,
      "socketio": true,
      "mongoose": true,
      "auth": true,
      "googleAuth": true
    }
  },
  "generator-ng-component": {
    "routeDirectory": "app/components/",
    "directiveDirectory": "app/components/",
    "filterDirectory": "app/components/",
    "serviceDirectory": "app/components/",
    "basePath": "app",
    "filters": [
      "uirouter"
    ],
    "extensions": [
      ".js",
      ".html",
      ".scss"
    ]
  }
}

I attempted installing via npm using the command below and appear to only get the app directory when it completes.

npm install -g generator-ng-component

Cloning the repository and then using npm link appears to work.

However, when I attempt to run it, I get nothing added.

$ yo ng-component:route test

[?] Where would you like to create this route? app/components/
[?] What will the url of your route be? /test
$ 

Any ideas on what I'm doing wrong? I've attempted the following,

• Run from the root directory of the project
• Run from the client/ directory
• Rename client/ to app/, and then run
• Tried using ng-component:directive too

Please note
I'm new to nodejs and still learning. If I've done something wacky, please let me know. :)

Breaking change with 0.1.1:

By upgrading the yeoman generator, we no longer expose underscore.String as this._ for templates, causing an error when generating files from custom templates.

(!) #_ is deprecated. Require your own version of Lodash or underscore.string
events.js:85
      throw er; // Unhandled 'error' event
            ^
TypeError: Cannot read property 'dasherize' of undefined
    at eval (lodash.templateSources[1]:9:12)
    at underscore (/usr/local/lib/node_modules/generator-ng-component/node_modules/yeoman-generator/lib/util/engines.js:23:45)
    at Generator.actions.engine (/usr/local/lib/node_modules/generator-ng-component/node_modules/yeoman-generator/lib/actions/actions.js:224:32)
    at Generator.template (/usr/local/lib/node_modules/generator-ng-component/node_modules/yeoman-generator/lib/actions/actions.js:198:19)
    at /usr/local/lib/node_modules/generator-ng-component/util.js:121:14
    at Array.forEach (native)
    at Object.copyTemplates (/usr/local/lib/node_modules/generator-ng-component/util.js:114:6)
    at Generator.createFiles [as writing] (/usr/local/lib/node_modules/generator-ng-component/route/index.js:41:10)
    at /usr/local/lib/node_modules/generator-ng-component/node_modules/yeoman-generator/lib/base.js:421:16
    at processImmediate [as _immediateCallback] (timers.js:358:17)

Regarding this issue I reported yesterday on generator-angular-fullstack, I believe the problem is with the generator-ng-component generator.

More specifically if you look at the index.js in /src/generators/filter you will see that the first element in prompts contains the default as a concatenation of the scriptAppName and the provided filter name. Removing this .${this.name} should do the trick.

    var prompts = [{
      name: 'moduleName',
      message: 'What module name would you like to use?',
      default: `${this.scriptAppName}.${this.name}`,
      when: () => this.config.get('modulePrompt')
    },

However, I'm afraid I'm missing something as all the generators have this approach and it has been like this for months, although in a slightly different coding:

      default: self.scriptAppName + '.' + self.name,

Please let me know if my suggestion is the correct one, and I will fix it in all the generator files and commit this for you to review.

You never import the source file for the directive into the spec; shouldn't there be an import there?

Hey, so when I try and run any of the sub-generators from generator-angular-fullstack I get.
TypeError: Cannot read property 'indexOf' of undefined

Here's the full stacktrace.

D:\Desktop\whenDoesItEnd>yo angular-fullstack:route switch
events.js:160
      throw er; // Unhandled 'error' event
      ^

TypeError: Cannot read property 'indexOf' of undefined
    at Generator.hasExtension (D:\Desktop\whenDoesItEnd\node_modules\generator-ng-component\generators\script-base.js:45:28)
    at Generator.exports.default (D:\Desktop\whenDoesItEnd\node_modules\generator-ng-component\generators\script-base.js:48:25)
    at Generator.initializing (D:\Desktop\whenDoesItEnd\node_modules\generator-ng-component\generators\route\index.js:37:35)
    at Object.<anonymous> (D:\Desktop\whenDoesItEnd\node_modules\generator-ng-component\node_modules\yeoman-generator\lib\base.js:431:23)
    at D:\Desktop\whenDoesItEnd\node_modules\run-async\index.js:26:25
    at D:\Desktop\whenDoesItEnd\node_modules\run-async\index.js:25:19
    at D:\Desktop\whenDoesItEnd\node_modules\generator-ng-component\node_modules\yeoman-generator\lib\base.js:432:9
    at tryOnImmediate (timers.js:543:15)
    at processImmediate [as _immediateCallback] (timers.js:523:5)

This should be able to be accomplished without being a breaking change. Should also be compatible with TypeScript.

When scaffolding out a new route it now uses the controller as approach, but it seems to be wrongly implemented in the template:

1. first of all the controllerAs: value should be a string and by convention should be camel case.
2. secondly it seems that the controllerAs: name has to be different from the component name itself (cameledName) and just the first letter being a capital doesn't seem to do the trick. Hence I propose to append Ctrl to the controllerAs name.

OLD

angular.module('<%= scriptAppName %>')
  .component('<%= cameledName %>', {
    templateUrl: '<%= htmlUrl %>',
    controller: <%= classedName %>Component,
    controllerAs: <%= classedName %>
  });

NEW

angular.module('<%= scriptAppName %>')
  .component('<%= cameledName %>', {
    templateUrl: '<%= htmlUrl %>',
    controller: <%= classedName %>Component,
    controllerAs: '<%= cameledName %>Ctrl'
  });

For your convenience I've created a pull request for you to review. Please let me know if I've missed something.

First time using your generator. Can't understand hot to generate anything. Please, improve your README.md and add some examples on how to generate module, controller, etc. Also, I would really appreciate if you explain how to configure yo-rc.json and what should I fill inside it's properties. Many thanks in advance.