Angular Sprinkles

Angular Sprinkles is a gem for writing Rails-flavored AngularJS.

No frontend setup required: By just requiring it in your project, Sprinkles dynamically generates an Angular application around your Rails templates. It's never been easier to start developing with Angular and Rails.
Rails as it was intended to be written: Angular's two-way data binding, directives, and function calls are all done in the view via helper methods, giving you just a sprinkle of JavaScript.
A cleaner approach to JavaScript: Sprinkles allows you to continue to write Rails applications as you always have without all of the nasty jQuery spaghetti.

Examples

Two-way binding works right out of the box with Sprinkles. Just wrap your objects with the bindable helper.

class UserController < ApplicationController
  def show
    # bindable gives your objects the bind method
    @user = bindable(User.find(params[:id]))
  end
end

{{ <%= @user.bind(:name) %> }}
<input type="text" ng-model="<%= @user.bind(:name) %>" />

Use custom directives with the directive helper.

<script>
sprinkles.directive('blink', function () {
  // re-implement the blink tag
});
</script>

<%= directive(:blink) do %>
  Hello, world
<% end %>

Call services directly from the view with the service helper.

<script>
sprinkles.service('alertMe', function () {
  return function (input) {
    alert('Hello, ' + input);
  };
});
</script>

<button ng-click="<%= service(:alert_me, "world") %>">Click me!</button>

Also see the demo application for more examples.

Setup

Add angular_sprinkles to your Gemfile.

gem 'angularjs-rails'
gem 'angular_sprinkles'

Add yield :sprinkles to the bottom of your body tag.

<body>

<%= yield %>

<%= yield :sprinkles %>
</body>

Include and angular_sprinkles into your application.js.

//= require angular_sprinkles
//= require_tree .

Angular Sprinkles

Examples

Setup

Copyright