Rails + Angular

@judytuna

Presentate

Make Your Rails App More Interactive With Angular

Judy Tuan 🎵 段清梅 🐠 @judytuna
RubyConf Taiwan 2015, Sat Sep 12

People <3 Ruby

People <3 Rails

People also <3
interactive experiences

Hello, JavaScript!

Why does Judy <3 Angular?

Why Rails + Angular?

Specifics on how to plop Angular into your Rails app

Database
ActiveRecord model
Serializer
API (or gon)
Angular service
Angular directives
Angular html templates

gon

Let's get up to speed on directives

Objective: make it modular

(function () {
  function myDirective(i18n){
    return {
      restrict: 'E',
      scope: { jumping: '=' },
      templateUrl: 'views/jump.html',
      link: function (scope, element) {
        scope.i18n = i18n;
        scope.isJumping = jumping;  
  };}};}
  angular.module('myApp')
    .directive('myDirective', ['i18n', myDirective]);
})();

IIFE

Immediately-Invoked Function Expression

Element: <my-directive>...</my-directive>

restrict: 'E'

Attribute: <div my-directive>...</div>

restrict: 'A'

Scope

Use isolate scopes { }

scope: { 
  campaign: '=' 
}
<my-directive jumping="<%= @is_jumping %>"></my-directive>

Link

link: function (scope, element) {
        scope.i18n = i18n;
        scope.isPlpAvail = campaign.comingSoonAvail;
}

Define a Template

templateUrl: 'views/pre-launch-cta.html'

Template code

<div ng-if="isPlpAvailable()">
  <div class="plp-info">
    {{::i18n.t('prelaunch_form.campaign_editor_banner') }}
  </div>
  <a ng-href="{{campaign.comingSoonEditPath}}">
    <div class="plp-cta">
      ...
    </div>
  </a>
</div>

snake_case, camelCase, kebab-case

Indiegogo quirks

Things we're still working on

(Perceived) Loading Speed?

- Duplicate everything in Rails .erb
- Loading indicators

? More to come

Separating our JS code?

mo repos, mo problems?

CSS?

in the monorail

Do

New feature, new tiny Angular app.

Do

Reuse components.

Don't

Don't mix your templates.

Don't

Don't skip your JavaScript tests.

judytuna@gmail.com
@judytuna (twitter/github)

Liked this talk? Share it!

  •   / 28

Published on

Share this presentation