{"id":1254,"date":"2015-02-27T21:34:04","date_gmt":"2015-02-27T21:34:04","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1254"},"modified":"2015-08-10T06:50:03","modified_gmt":"2015-08-10T06:50:03","slug":"speeding-up-angular-development-with-yeoman","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/angular\/speeding-up-angular-development-with-yeoman\/","title":{"rendered":"Speeding up Angular development with Yeoman"},"content":{"rendered":"

Yeoman<\/a>\u00a0helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.<\/p>\n

To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts…<\/p><\/blockquote>\n

First, install Yeoman with npm:<\/p>\n

npm install yo -g<\/pre>\n
Now you need a “generator”, and most likely you’ll need grunt:<\/p>\n
npm install -g generator-angular grunt<\/pre>\n
If you get the error like The package generator-karma does not satisfy its siblings’ peerDependencies requirements<\/em>\u00a0then try uninstalling generator-karma:<\/p>\n
npm uninstall -g generator-karma<\/pre>\n
and running the previous npm install command again.<\/p>\n
Btw, \u00a0you can use Yeoman’s CLI (by first executing yo<\/strong>) to\u00a0search and install any of the existing generators.<\/p>\n
To scaffold a new app, create some folder and execute the following command:<\/p>\n
yo angular myApp<\/pre>\n
Yeoman will ask you few questions to which you can all give a default answer and it will start the installation process. After the installation is done you can do:<\/p>\n
grunt serve<\/pre>\n
to actually see a live preview of your scaffolded app.<\/p>\n
If you get an error like\u00a0Warning: Couldn’t find the `compass` binary. Make sure it’s installed and in your $PATH Use –force to continue\u00a0<\/em>install it with (if you’re on Mac):<\/p>\n
sudo gem install compass<\/pre>\n
Additional cool thing is that this generator comes with extra tools for quick scaffolding of routes, controllers, views, directives, services, filters… Be sure to check the project on GitHub<\/a> for more info.<\/p>\n
For example, the following command generates a controller and a view, and configures a route in app\/scripts\/app.js<\/em> connecting them.<\/p>\n
yo angular:route myroute<\/pre>\n
 <\/p>\n