Angular and Yeoman: Password-Generator (Part 1)

Categories: Tutorials, Web-Development

Currently I am taking a look at some new JavaScript-technologies and -frameworks. This time angular and yeoman aroused my interest, so I implemented the typical password generator I always use to start things off 🙂

Part 1 of this tutorial will show you how to setup your development environment to use yeoman to create an angular.js-application.

Yeoman is a powerful scaffolding tool for javascript applications. It creates your project depending on the technologies and frameworks you want to use. Therefor it uses three tools:

  • yo - Scaffolds your application, including grunt tasks and bower dependencies
  • grunt - build tool
  • bower - dependency manager

There are dozens of generators for different project setups. You can find some of them here: http://yeoman.io/generators.html.

So what do we need to use all these awesome tools?

Install Node.js

Node.js is used by the grunt task runner, e.g. to minify your JavaScript code.

Just head over to http://nodejs.org/ and click on the install button. Run the downloaded file and you are done. Awesome, isn't it?

Install Ruby and compass

Ruby and Compass are used to genereate stylesheets with SASS.

For installing ruby windows users go to rubyinstaller.org and download the installer. Linux users can use their package manager, e.g.

apt-get install ruby<version>

or use RVM to manage multiple ruby versions.

After ruby was installed successfully go to your command line and enter the following commands

gem update --system
gem install compass

Installing Yeoman

Now its time to install yeoman and its dependencies. Just enter the following command into your command line:

npm install -g yo

This should install grunt and bower as well. If you use an older version of npm (< 1.2.10) you have to execute the following command as well:

npm install -g grunt-cli bower

After that we can use yeoman to create our Angular.js-Application. Therefore we need to get the generator for angular:

npm install -g generator-angular

Then create a new folder and cd into it. Then run:

yo angular [optional: app-name]

Done! Thats all you need to do. To build your app you run:

grunt

If you want to preview your application run:

grunt serve

This will watch your code and build it everytime you change something. The browser window showing your app is refreshed automatically.

In Part 2 of this tutorial I will show some basic angular stuff and offer you the password generator code.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>