Angular and Yeoman: Password-Generator (Part 1)
Part 1 of this tutorial will show you how to setup your development environment to use yeoman to create an angular.js-application.
- 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?
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
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:
If you want to preview your application run:
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.