So, we’re going to aim to end up with our rails app living in app, test etc as it normally does, and our angularjs app living in src, build and other ng-boilerplate locations, all within the one directory structure. We’ll use rake and gemfiles to manage our rails app, and grunt and bower to manage our angularjs code.
The angular app will actually be served up by the rails web server for a variety of reasons to do with security and cross site scripting. We’ll achieve that by linking the angular build directory into the rails public directory.
The angular app we’re going to create by using the ng-boilerplate template provided by joshdmiller. My aim here is to leverage the best of the angular ecosystem, and that means using the automated testing tools, the build tools and the pre-existing collateral. Josh looks to have pulled a bunch of this collateral down into a single repository and made it (somewhat) easy to use, as well as having a directory structure that I think greatly improves modularity.
Before we do that we need to install nodejs, which provides the npm (node package manager) tool, which in turn we use to download everything else. In theory you can do this without installing nodejs, I haven’t quite worked that out yet, and it feels like AngularJS borrows some of the tooling from node, so easier to just install it. On linux (in my case debian, which probably means ubuntu as well), we do this by installing the dependencies, then installing nodejs itself:
- Install dependencies
aptitude install python g++ make checkinstall
- Make a directory in the source folder
mkdir /usr/src/node cd /usr/src/node
- Download the source code from the nodejs site
- Unpack the code
tar -xvf cd node-v0.10.15
- Setup the installation
- Build the code into an installation package
- checkinstall may fail, just running make directly in the directory may fix, then run checkinstall again
- install the package
dpkg -i node_0.10.15
- We also install fontconfig, because we need it later
aptitude install fontconfig
If you’re on OSX, you can do this by directly downloading a prebuilt package from the nodejs site. I don’t recommend using brew, I tried that and had problems, the package worked fine. Having installed nodejs, we’ll clone the ng-boilerplate git repository. We’re actually using git ourselves to version control our own app, so we don’t really want Josh’s repository to be our master. We’re using some git trickery to get this effect, basically we want to pull the current state of ng-boilerplate without it becoming our master repository:
git remote add ngboilerplate git://github.com/joshdmiller/ng-boilerplate.git git fetch ngboilerplate git merge --squash ngboilerplate/v0.3.1-release git commit -m "Merged boilerplate"
You’ll potentially get conflicts at the merge stage on the .gitignore file – if so edit that file to keep the superset of all changes, then execute the git commit -m. Next, we install the build and test tools
sudo npm -g install grunt-cli karma bower npm install
Npm is the node package manager, so this is telling the node package manager to install stuff for us, namely
- grunt, which is the scripting tool (sort of like make in C++, or rake in ruby/rails).
- karma, which is the test toolset, similar in concept to rspec in rails
- bower, which is an installation tool, similar in concept to bundle in rails, with perhaps bits of the Gemfile thrown in
Bower is another installation tool, I haven’t yet worked out why we have both npm and bower, other than that I think that they are somehow complementary. Which isn’t a great answer. Finally
This should build a base application for you. If, like me, you are running your development server headless (i.e. no UI and therefore no browser), this will give you an error that it cannot find Firefox. You can sort this by editing the browser setup at the bottom of karma/karma-unit.tpl.js.
browsers: [ ]
Run grunt build, which will hang waiting for a browser. Go to one of your browsers (Chrome is best) and visit http://localhost:9018. This will allow karma to capture your broswer. You can also use this approach if you want to test multiple browsers – so you can for example open Firefox and Chrome and visit that URL with both, and karma will then test every test on both of them. Now try running grunt build again:
This will run the unit tests, and will concatenate and copy the code into the build directory on your filesystem. Try opening the application directly from the file system by entering something like the following into your browser:
cd public ln -s ../build UI
We should now be able to get to our app from http://localhost:3000/UI/index.html The code at the ending point of this tutorial 2 can be found on github in the tutorial_2 branch. In the next segment of this tutorial we’re going to tie the two together – we’ll change our angular app to get data from the server for the club entity.