- Part 1: Google, Twitter, and AngularJS
- Part 2: Let's Make a Feed Reader
- Part 3: Rendering Feeds
- Part 4: Managing Feeds
- Part 5: Tests
- Part 6: Adding Dependencies
- Part 7: Form Validation
- Part 9: Installation
I’ve been working on tidying up the AngularJS tutorial project, which you can find here: GitHub: alexyoung / djsreader. The project was originally created with Yeoman, as part of the topics I wanted to cover on the tutorial series. However, a fresh checkout of my code from GitHub wouldn’t run out of the box, so I wrote up some instructions in the readme.
Although I’d prefer it if people could follow the tutorial series from part 1 and build their own version, it’s not always possible as dependencies change over time. I get asked about this a lot, and it’s just a consequence of the style of tutorials I write on this blog. It would be nice if I could maintain these articles and keep them working with the latest version of each of the major dependencies, but I have to earn a living!
If you just want to check out the AngularJS tutorial source and play with it I’ve included instructions below.
Installing the Dependencies
To run the project, you’ll need to install the following things:
- Node 0.10.x
- Bower (
npm install -g bower)
- Grunt (
npm install -g grunt-cli)
- Compass (
gem install compass)
Hopefully you already have Node – which means Bower and Grunt should be easy to install. Compass is annoying: one of the Grunt tasks builds Bootstrap from Sass, which needs the command-line
compass Ruby script. It’s annoying because Ruby is a mess and unless you work with it professionally you really don’t want to have to deal with Ruby version management. Fortunately, I found
gem install compass on a fresh Mountain Lion machine worked out of the box. The Ruby version is 1.8.7, which is dated. I noticed
sudo gem install compass resulted in a script that wouldn’t work and I didn’t bother to find out why. I may replace the Grunt task to get rid of this dependency so we can just depend on Node.
Once you’ve got that installed,
npm install will fetch Grunt’s dependencies. Then run
bower install to get the client-side libraries.
Using and Running It
The gruntfile that Yeoman generated has a few goodies built in. You can build the project with
grunt build, run tests with
grunt test, and start a server with
grunt server – this is the one you probably want, and if things don’t seem to work in the browser just check you’ve built it first.
If all you want to do is try out some AngularJS ideas or change the HTML, you should familiarise yourself with the project tree. Most of what you want is in
app/, and in particular
app/scripts/controllers/main.js is what most of the tutorials refer to and
app/views/main.html is the corresponding template.
Now you should be able to run the project without following the individual tutorials. Hopefully newcomers can at least try the project out relatively painlessly.