After-class notes

gistfile1.md

Removing .pkg for people that installed it on their mac

if you installed the .pkg version of nodejs from their website, and you don't want to have to sudo when you npm install things, you can try this, it was just the first result I found from googling: http://stackoverflow.com/questions/9044788/how-do-i-uninstall-nodejs-installed-from-pkg-mac-os-x

Installing dependencies

On a mac, the way I recommend installing node is via homebrew. do what it says at http://brew.sh/ to install homebrew then do brew install node. On windows, just do whatever the nodejs website says.

Install global npm tools

once you have node running, you'll want to install the tools we use globally on your computer. to do that you'll do npm install -g grunt-cli bower yo generator-angular (the "-g" means install these npm packages globally on my system, not just in the "node_modules folder of the directory I am in)

explaination of what those are:

• grunt is a task runner for javascript, it is the thing we use to serve our app using grunt serve. grunt-cli just looks for a local grunt in your project's node_modules folder and uses that. That is why you install grunt-cli globally (with npm install -g grunt-cli) that way you can have 2 projects that use different versions of grunt and typing grunt from the command line in either will use the correct version for that project
• bower is the thing that grabs the browser packages, things like jquery, angular, boostrap, etc
• yo aka, yeoman is the app scaffolding and code generator. it's just useful to create template files with sane defaults so we don't have to type everything by hand and sets things up using common conventions and best practices.
• generator-angular is the yeoman generator for generating angular apps

use yeoman to generate your app:

from the directory where you want your project to be do:

mkdir name-of-my-app
cd name-of-my-app
yo angular name-of-my-app

where name-of-my-app is the name of your app. what you did there was say "yeoman, please use the angular generator to create an app scaffold and call it name-of-my-app."

it will try to install the node_modules and the bower components for you, but if it pukes and dies like it did in class for everyone (because of our awesome internet) you can always start from scratch by doing rm -rf node_modules bower_components and then installing them again with:

npm install which will look at package.json and install the things you need to have on you dev machine to build, test, and develop your app. it downloads and puts them all in the node_modules folder.

bower install looks at bower.json and installs all the browser packages that you will send to the visitors of your webpage. it puts them in bower_components and our grunt tasks take care of serving those when asked in grunt serve

at that point you have a running angular app. you can grunt serve to see it in your browser and press control-c to stop grunt serve.

I hope that clarifies some of the things we did in class today. really, we could have done everything we did today by just creating html and javascript files ourselves and linking to angular, boostrap, etc manually without all this complexity. but doing it like this is nice because of all the testing, deploying, and code generation that it could do for us in the future.