Why AngularJS* Will Succeed

01_jquery_version_01.js

$(function() {
  $('#trigger').on('click', function(e) {
    e.preventDefault();

    $.ajax({
      url: '/books/1/simpleDom',
      success: function (data) {
        $('#target').html(data);
      },
      fail: function (data) {
        alert("AJAX failed!");
      }
    });
  });
});

02_jquery_version_01.html

<a href="#" id="trigger">Fetch Book Data</a>

<div id="target">
  Replacement Target
</div>

03_jquery_version_01.html.erb

<span class="title">
  <%= @book.title %>
</span>

<span class="author">
  <%= @book.author %>
</span>

<span class="isbn">
  <%= @book.isbn %>
</span>

<span class="available">
  <%= @book.available %>
</span>

04_jquery_version_02.js

  var simpleExample = {};

  simpleExample['SimpleController'] = {
    trigger: function () {
      $.ajax({
        url: '/books/1/simpleDom',
        success: function (data) {
          $('#target').html(data);
        },
        fail: function (data) {
          alert("AJAX failed!");
        }
      });

      return false;
    }
  }

05_jquery_version_02.html

<a href="#" onclick="return simpleExample.SimpleController.trigger()">Fetch Book Data</a>

<div id="target">
  Replacement Target
</div>

10_angular_version_01.js

var mod = angular.module('simpleExample', []);

mod.controller('SimpleController', function($scope, $http) {
  $scope.trigger = function(event) {
    console.log(event.target);
    $http({ method: 'get', url: '/books/1/simpleDom.json' })
      .success(function (data) {
        $scope.book = data;
      })
      .error(function (data) {
        alert('AJAX failed!');
      });
  };
});

11_angular_version_01.html

<div ng-app="simpleExample">
  <div ng-controller="SimpleController">
    <a ng-click="trigger()">Fetch Book Data</a>

    <div>
      <span class="title">
        {{ book.title }}
      </span>

      <span class="author">
        {{ book.author }}
      </span>

      <span class="isbn">
        {{ book.isbn }}
      </span>

      <span class="available">
        {{ book.available }}
      </span>
    </div>
  </div>
</div>