Why is Angularjs code not rendering in rails even though Angularjs is running?

Wednesday, July 2, 2014

I'm trying to implement some angularjs into my Rails application.

I've done the following, and Angular is running (I typed angular into dev console) but not rendering/executing my angular code in my HAML file.

  1. Added angular to my gemfile:

    source 'http://ift.tt/1cE3UoJ' gem "rails-assets-angular" group :development, :test do gem 'rails-assets-angular-mocks' end

  2. Added //= require angular and //= require angular/admin/adminApp (my Angular App file) to app/assets/javascripts/application.js

  3. Enabled Angular by adding %html{ 'ng-app' => true } to the tag in the layout app/views/layouts/application.html.haml

  4. Added an adminApp:

    adminApp = angular.module('adminApp', ['ngResource'])

  5. Added and adminController:

    'use strict'; angular.module('adminApp') .controller('AdminCtrl', function ($scope, $http) { $scope.test = "This is working!" });

  6. Added the following to one of my app's index.html.haml:

    %div{"ng-controller" => "AdminCtrl"} {{test}} %p Hello {{"World" + "!"}}

Upon loading that page, I get the non-angularized output:

{{test}} Hello {{"World" + "!"}}

From everything I've read, it should be working. Just not sure where I've gone wrong. Have I missed anything?