Angular.js beginner: Is Yeoman scaffolding the wrong way to go? - angularjs

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.

Related

What barebone set up for developing web apps in angularjs?

I know its base on what you need, but in bare minimum what would be the best start up frameworks, task runners, plugins etc to develop real world web application? Im a noob but I think Il set it up as using:
Npm, angularjs ,jquery, expressjs, grunt, bower, bootstrap?
Then you just check which plugin you need for particular job?
Because alot of tutorials are pretty focus on just the angular side of things but never a real world development environment that could help with the job.
And follow up question is it advisable to have a dst and src folder and when youre done put everything in dst? What would be your take on this matter? Thank you
And for your question, I would suggest Angular CLI. It creates all the boilerplate to start coding in Angular, including task manager with all most all the tasks you need, CSS and boiler plates, etc.. It even has a command-line interface which would help you create components, classes, services, etc of your app from the terminal.

What do Yeoman Generator's add "really" to Ionic Projects

I don't understand why the generator-ionic (along with other ionic + Yeoman project)s are so popular.
I don't see what the advantages are in using a yeomen generator in this case, this is.
I understand why the Ionic framework is useful in a Cordova project (as we all know, the UI, ngCordova plugins, it uses AngularJS, ect) but what specifically does the Yeoman component add that a basic Ionic project doesn't already have or that cannot be easily added with a bower install.
It seems to me that the Yeoman ionic projects just seem to be unnecessary bloat and can lead to more errors and library issues. I just do not see how components like karma and grunt (as opposed to ionic using gulp) fit into help with development.
True, you can set all this up by yourself. However, imagine setting this up on each and every project that you start. Kind of cumbersome, don't you think?
That's why some people tend to create these generators - to save you (if you like) the time of having to scaffold your application every time from beginning. Usually they provide some features (about which you can read on the Github pages) or they may even enforce some kind of project directory layout (which may help with big projects).
All in all, you don't have to use them, or stress about them. For instance, I personally don't use them on every project, but I appreciate the community effort and when I want to try something quick I tend to test them from time to time to see how they've evolved.
Don't hate, donate ;) (Sure sure, I know you're not hating, the statement just seemed appropriate).

angularjs with gulp and browserify

I am using this https://github.com/Swiip/generator-gulp-angular
for scaffolding my project and I want to add browserify support to that
what steps should I take ?
yeoman has a angulpify generator. it's the best start i can think of for your question. just start a boilerplate project and dissect it.
However, as someone who tried almost everything out there, unless you really need to include some node modules in your project stay away from it. cuz actually for angularjs it really doesn't have any advantage.
Instead, you can try the concat style building. much easier for testing and deployment.

Is there any angular test skeleton generators?

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.

Is there a way I can use angular-generator without yeoman?

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.

Resources