daftmonk / generator-ng-component Goto Github PK
View Code? Open in Web Editor NEWComponent generators for AngularJS
License: MIT License
Component generators for AngularJS
License: MIT License
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)
.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,
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:
controllerAs:
value should be a string and by convention should be camel case.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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.