Using AngularJS within Haml views of a Rails app

Question

I have a Rails app with Haml views. Now I want to add AngularJS to some parts of the application, but the problem is that the Haml views are rendered server-side and the AngularJS code is not working, because it is rendered client-side.

Let's say I have just this in my index.html.haml:

!!!
%html{"ng-app" => "Test"}
  %head
    %script{:src => "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"}
    :javascript
      function Clock($scope) {
        $scope.currentTime = new Date();
      }
    %title Welcome to AngularJS
  %body
    %h1 Hello, World.
    %p{"ng-controller" => "Clock"}
      The current time is {{currentTime | date:'h:mm:ss a'}}.

So currently, it's just printing out everything within the curly brackets without actually processing it. There are solutions but they for situations where your complete view is replaced by an AngularJS template. I want to use AngularJS mainly for small bits of functionality in my Rails app. Any ideas how to solve this?

Leon · Accepted Answer · 2014-12-15 12:57:09Z

23

John,

I have edited your code a bit here: http://codepen.io/anon/pen/vKiwH

%html{"ng-app"=>true}
 %p{"ng-controller" => "clock"}
  The current time is {{currentTime | date:'h:mm:ss a'}}.

and the javascript is:

function clock($scope) {
  $scope.currentTime = new Date().getTime();
}

edited Dec 15, 2014 at 12:57

answered Apr 9, 2013 at 7:48

Leon

1,1361 gold badge11 silver badges17 bronze badges

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

4 Comments

John Over a year ago

Thanks, that works. I made a mistake to give my angular app a name in het html tag, but didn't create the namespace.

Jeremy S. Over a year ago

One very minor improvement on the haml is to write %html{"ng-app" => true} or %html(ng-app=true), both of which will result in <html ng-app> without the empty string.

Alistair A. Israel Over a year ago

With haml 4.0.5 (under Rails 4) I've found that I can simply go %html(ng-app).

Adam Cooper Over a year ago

Side note: Another way to write an Angular directive in HAML -> %p{ng: {controller: "clock", repeat: "loop in loops"}} etc...

Collectives™ on Stack Overflow

Using AngularJS within Haml views of a Rails app

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related