AngularJS – Development Environment

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:

1. NodeJS – The engine for running JavaScript tools.
NodeJS is miraculous. It can be used for so many things that I cannot list here.
In terms of developing web apps (using JavaScript frameworks), NodeJS is an engine that runs all other tools.

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.

And if that’s not enough, these code generators are written as NodeJS modules, in JavaScript, so you can create your own!

> 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

5. GruntJS the JavaScript task runner
GruntJS is the Ant/MSBuild of the JavaScript world. It uses plugins (written in JavaScript) to perform anything from minification, packaging, deployment, code checking and more.

> 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:

>grunt serve

Open a browser and navigate to:

If all is well, you should see that the address in the browser changes to:

Welcome to the wonderful world of Angular/JavaScript web app development!

AngularJS – Building Real Apps

Hi, I’m JW.

I spend much of my time, helping companies, create or update their apps using AngularJS.

In the spirit of Open Source (AngularJS is an open source project), I thought I should find ways to share my experience with others.

I am hoping to do more, but here is my first attempt…
An AngularJS course, focused on showing people how to build real world apps based on my experience.

What are real world apps? Well, basically apps that need to work in the real world, handle data, security, perform well and provide great user experiences for users. This means different things to different people, so this course is my take, based on my experience with building apps that people use every day.

AngularJS – Building Real Apps – March 16, 23, 28 2015 (Ramat Gan College, Israel) – Course Syllabus.

I hope my course participants will enjoy the course. If it goes well, I’ll try to share some of it online soon.