I am working on an angular project. I am interested in creating a generator in Yeoman that allows me to generate 'Widgets'.
Basically I would like to have a scenario where I call a command like:
yo angular:widget pieChart
and this would generate a folder in app/scripts/widgets with an js file called pieChart.js and also generate some test code in test/spec/widgets.
Would anyone have any pointers on where to start with this?
Many thanks,
kSeudo
I did something similar to want you want. I would recommend starting with angular-generator. Then you need to add a new file to the templates folder called widget that contains the widget template. Create a new folder on same level as the directive folder called widget and give it an index.js. Then you can pretty much copy the index.js from the directive folder and make necessary changes. You would also just create a widget.js template in the templates/javascript/spec folder as well
Writing your own Yeoman generators is fairly straightforward if you are already familiar with tools like Grunt and Bower.
I'd recommend starting with the official tutorial here. The Yeoman generator-generator is fairly straightforward to use and will create a simple skeleton for your generator.
EDIT: Also, if an existing generator does at least some of what you want, it might be worth using that as a starting point.
There is official generator-generator
It's quite easy to create your own generator, just follow official tutorial http://yeoman.io/authoring/
Related
I'm starting with angular.js and after reading realized that I should use ng-boilerplate to bootstrap my project. But I'm a bit confused, I've cloned the project and stuff and I have a project called ng-boilerplate with all the structure needed, but what now? Do I need to change the project name "ng-boilerplate" to my project name? And what about the folders for example "Home" and "About"? Do I need to delete these folders and create the ones I need? I guess I have to remove some code in other files right? the problem is that I'm starting with angular so don't know what should I remove and what not.
As you can see I'm pretty new with this, am I right with the procedure?
thanks
Well if you read the ngboilerplate documentation carefully you will understand it use. As the first line says:
ngBoilerplate is designed to make life easy by providing a basic
framework with which to kickstart AngularJS projects.
ngboilerplate like many other seed projects, provide a prescriptive guideline about how a project should be structured. To demonstrate the working of the setup some project like this one add implementation for some standard scenarios to highlight how the complete setup works. Remember a working sample is far better than writing lengthy documentation.
The pages that you have mentioned are indeed for demo purpose and you can remove the folders if required. What this organization is telling us is that group your model-view-controller implementation together into a folder. These folders could be one per view or one per feature. The documentation on the site itself is self explanatory here https://github.com/ngbp/ngbp/tree/v0.3.2-release/src/app
Almost all folders of ngboilerplate have some documentation around specifics of that area. Read it to learn more about it.
I'm searching some similar to PHPUnit Skeleton Generator just for Angular, maybe you could help me to find one ?
I'd recommend looking into the ng-boilerplate project. It sets you up with a sane structure, including where to put tests and running them.
You should familiarize yourself with yeoman which is a very nice scaffolding tool for JS projects.
It works around the concept of generators, different generators can generate different files for you. For example the angular-generator will help you with setting up an angular project and also add controllers, services and such.
Basically what I want is a scaffolding tool (without bower and other stuff that it comes with) and controller, service/factory generators.
Yeoman is great but I was wondering if there's anything minimalist cli out there for angular.
Well, if all you want is a base angular app structure, that is called a boilerplate. There are a few available:
https://github.com/angular/angular-seed
https://github.com/ngbp/ngbp
https://github.com/angular-app/angular-app
However, you seem to also want a controller, service/factory generator. This will always require:
some kind of task runner (like Grunt)
or an IDE that supports templates.
Since you don't seem to like grunt (grunt IS AWESOME), these IDEs might help you...
Eclipse supports template, you can find some here
IntelliJ's PHPStorm or WebStorm have a feature called Live Templates which, IMHO, are far better than eclipse. You can find some premade templates here, but is easy to roll your own, as explained in this tutorial.
If you want a command line interface but not Yeoman's, you might want to have a look at the "Generation" section of this collection. As of today, it has one option that uses Lineman and two that made their own CLI, but they use bower. Anyway, if what you're looking for exists, it should be in there somewhere.
I am trying to add Angular to my arsenal and just started playing around with it this weekend. Looks cool!
In one of the videos done by Google, the guy recommended Yeoman. I'm watching another tutorial video on it now as well: https://www.youtube.com/watch?v=rqdRXqeqgZs
However, it looks like it generates everything (even writes tests for you??). In the video above, to generate a route he ran yo angular:route myroute which generated the controller, route, view, and test. I mean it's great that I get to see the structure, but I wrote like 0 lines of code.
Perhaps I should just start off with something like this where the file structure is way simpler but at least I have to write more lines of code? https://github.com/davidb583/white-angularjs-app
For a beginner, which do you recommend for a first project?
For a beginner to AngularJS, don't check out Yeoman. It's a very useful tool remember, but before you use it, understand why it was built.
Start off with AngularJS's tutorial - it is one of the best tutorials out there. It tells you all that you need to know to explore off on your own. I started out with that and at the end of it, I just loved the entire framework.
I did not start off with Yeoman until building 2-3 applications using AngularJS. Once you do this, you figure out some common tasks that you carry out for every AngularJS application.
That's where Yeoman comes in. Rather than doing the same thing again and again for each application you use Yeoman to automate a lot of stuff. Once you know the why of using Yeoman, you will understand the how of using it.
Without having worked in AngularJS sufficiently, do not try to use Yeoman. You will enjoy the tool but then you will be left wondering how to work with AngularJS without it.
My 2 cents.
To smalls app, Yeoman is awesome. But you will know his limits when you will want to split your app into modules.
with yeoman, you will have a structure like that:
scripts/
controllers
controller1.js
controller2.js
...
directive/
...
But In large app you probably want to have:
scripts/
controllers
userModule
controller.js
myOtherModule
controller.js
...
directive/
...
And for that, you need to create manually all the files.
My advice is to always start with yeoman but use their route/directive/etc generator only at the begining of your project.
For the tests, it only generate a file and a very simple test, ofcourse you need to modify it, to cover your whole app.
In addition Yeoman provide you a lot of tools with grunt like minifications of your assets, a jshint to use the best coding practices, etc.
in qooxdoo desktop you usually have to develop using the SDK and then "build" your app.
Is there a way to generate something like a qooxdoo.js file with the whole library inside so that you can script script it as you like (like jqueryui or dojo)?
Actually it could be nice to have every widget loaded at runtime like dojo's require("dojo.button") but both the approaches would be nice, just avoiding the build phase.
I hope the question is understandable :)
Thank you everybody!
Don't use the output of the build job to run your code as you develop - as among other things - will minify your code and make debugging very difficult.
If you want to code freely without needing to rebuild when you reference new classes then source-all is the build job for you.
In the root directory of your application, type:
python generate.py source-all
If will include the entire framework in the HTML file generated (you'll find it under source/index.html). This would work well if you are composing the UI from scratch and referencing many new qooxdoo widgets with each browser refresh.
If you add a completely new class of your own, you will need to run the source-all job again to include it.
I use the source build job however for a few reasons:
Habit: source-all didn't exist when I started using qooxdoo
Speed: You can notice a bit of lag it when you refresh the browser to view
your app
References: For a mature app, enough of the framework is
included in the application and its rare to add a new reference and
when you do, its probably in a new class of your own which would
require a re-run of the source job anyway.
I suggest you also look at Default Action Jobs as all the possibilities are explained in detail. Hope this helps.
Please check that thread for a detailed answer: http://qooxdoo.678.n2.nabble.com/Using-qooxdoo-desktop-without-having-to-build-it-td7585015.html;cid=1387453759247-228