I’ve been playing around with AngularJS – which is a kick-ass front end framework by the way.
Today I tried to incorporate the angular-seed starter app (found here: https://github.com/angular/angular-seed) into a currently existing Rails 3.1.3 application.
Had a few issues getting the demo code – here: http://docs.angularjs.org/#!/tutorial – to work in the asset pipeline, so just for testing purposes I put them into the public folder – old school style.
I followed the tutorial and had all of my views, controllers, services set up correctly. However, when I included the js files at the bottom of my index page:
<script src="angular/app/lib/angular/angular.js" ng:autobind></script>
<script src="angular/app/js/services.js"></script>
<script src="angular/app/js/controllers.js"></script>
… none of the controllers would work. I would get the {{ model.property }} tags within my templates instead of the actual output.
No Javascript errors in Chrome’s dev tools – and network and resources showed all expected files loaded properly.
I thought that maybe I had overlooked something in my code, but when I looked at the developers guide, there is a link to angular’s cdn:
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
Just for the heck of it, I replaced my local angular.js script call with the cdn, and suddenly everything was working as expected.
I double checked, to make sure that I was loading the local copy from the proper directory, and I was – it’s the standard directory that comes with the angular-seed file. This file was also showing as a resource that was downloaded properly.
Anyone have ideas on why the cdn worked but the local copy would not?
The angular-seed uses AngularJS 1.0.0rc5 (currently) which is incompatible with 0.9.19. Check out how the seed app is wired. (e.g. remove ng:autobind and add ng:app or ng-app to the html tag in your layout template).