Category Archives: Yeoman

Announcing generator-angular-require

I’m proud to announce the release of my first Yeoman generator, designed specifically to scaffold out and enforce a degree of rigour when working with AngularJS projects that use RequireJS for module loading.

When creating a project using yo angular-require in your terminal/command prompt and answering the few questions you are presented with, a scaffolded, AMD-based AngularJS project is created, with the RequireJS configuration tokenised appropriately. Also included are sub-generators for creating new routes, views, directives, services, and so on. These ensure that the AMD JavaScript pattern is used throughout and the project has a predictable structure. Of course you are free to fork the project on GitHub and tailor it to work for you if that’s what you need!

How to install

Assuming you’ve node and Yeoman installed, type the following to install generator-angular-require (you may need to run this as an administrator/root):

npm install -g generator-angular-require

How to run generator-angular-require

Running the generator is easy. Create the directory in which you wish to place your web application and navigate to it in your terminal/command prompt. Then, issue the following command, substituting <APP_NAME> for the name of your project:

yo angular-require <APP_NAME>

You’ll find a directory and file setup that includes your app scaffolded, and importantly a Gruntfile. Grunt is used as the typical build tool in Yeoman applications at present. Issue the following to build your new project:

grunt

That’s it to build your project. Grunt will take care of linting, image optimisation, running the ngmin tool against your AngularJS code, minification and a whole heap of useful goodness. When that is done, issue the following to server up your app and watch for file changes so that they can be seen instantly:

grunt serve

You’ll find a browser window will open with your application proudly displayed. Try changing a file, and upon saving you’ll notice the changes are reflected right there in the browser. Superb!

What is Yeoman?

Taken from the Yeoman homepage: “The web’s scaffolding tool for modern web apps”. Put simply, it automates web application project creation in accordance with industry best practices. Grunt is then used as the means in which to automate as much as possible the build of your project. Finally, Bower is used to provide web package management. Read more about Yeoman on the Yeoman.io home page.

And finally

Check out the project on GitHub (where incidentally you can raise issues or enhancement requests). I’m happy to answer questions on GitHub or by email. There’s also the project page on NPM for those you are interested.