AngularJS seems to be the “it” framework for developing modern web apps.
If you want to ENJOY creating and working with AngularJS projects, you need the correct tools.
Whenever I train or consult teams on AngularJS, I always start with making sure they have the best tools to be the most productive.
Here is how I setup an AngularJS development environment:
NodeJS is miraculous. It can be used for so many things that I cannot list here.
1.1 NPM – Node Package Manager
This is installed with NodeJS and provides us with the ability to install node modules (our tools are all node modules) easily onto our environment.
2. Yeoman – Web Scaffolding (Project Structure Tools)
One of the most time consuming and manual error prone aspects of building modern web projects is creating a standard project structure and establishing coding standards for these projects. Yeoman is a tool that uses code generators to create/add modules, services, view and more to a project in an automated and consistent manner.
> npm install -g yo
2.2 Yeoman AngularJS generators
There are several Yeoman AngularJS code generators. The one I use the most for modular projects is .
> npm install -g generator-ng-appgen
3. git distributed source control
Probably the most widely used distributed source control system in the world. If you haven’t tried it, you’re in for a treat.
4. Bower – a package (dependency) manager for web apps
Bower is used for installing components from github and more. Bower requires NodeJS and git.
> npm install -g bower
> npm install -g grunt-cli
6. Gulp the streaming build system
Gulp and GruntJS can do the same types of things, they just do them differently. Gulp works with streams and GruntJS works with files.
From my experience it seems that production/system professionals tend to like GruntJS and developers tend to prefer Gulp.
> npm install -g gulp
Testing your Development Environment
Once you have installed all of the tools described here, make sure you can run them by performing the following commands.
a. Open a Terminal/Command window
b. Create a test folder
> mkdir test
> cd test
> yo ng-appgen
After you answer a few questions, you should see that files are created in your test folder and that bower and npm are running to install components (this can take a while).
Once everything is done, run the following command (from the terminal/command windows while in the /test folder) to see if your AngularJS project actually runs:
Open a browser and navigate to:
If all is well, you should see that the address in the browser changes to: