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

Question

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.

a. Added angular to my gemfile:

source 'https://rails-assets.org'
gem "rails-assets-angular"
group :development, :test do
  gem 'rails-assets-angular-mocks'
end

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

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

d. Added an adminApp:

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

e. Added and adminController:

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

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

UPDATE: changed haml so that angular elements are inside the ng-controller div

%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?

Unless you've incorrectly pasted that into SO, your {{test}} is not within your %div{"ng-controller" => "AdminCtrl"} — Jon
– Jon, Commented Jul 3, 2014 at 5:45
@Jon thanks for catching that. Fixed it and still not rendering angular. — novicePrgrmr
– novicePrgrmr, Commented Jul 3, 2014 at 13:22

Dimitri Cabete Jorge · Accepted Answer · 2014-07-03 13:59:24Z

1

It seems that you are injecting ngResource. It's not included by default in angular so you need add the following if you want to use it:

in the Gemfile: gem "rails-assets-angular-resource"

application.js: //= require angular-resource

Also change %html{ 'ng-app' => true } to %html{'ng-app' => "adminApp"}

answered Jul 3, 2014 at 13:59

2,09318 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Good call on all of that. I made those changes and still nothing. Anything else we should try? Am I doing this the right way?

Nothing. Everything is clean as far as javascript errors go. Thanks again for your help, really appreciated!

Actually, just checked again and there are two:

Uncaught TypeError: undefined is not a function common.js?body=1:3

Uncaught TypeError: undefined is not a function contact_us_home.js?body=1:13

|