Conexión con API's REST

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="crud">
  <div class="container" ng-controller="crudCtrl">
    <div class=jumbotron>
      <h1>Conexión con apis <a ng-href='{{masInfo}}' target="_blank">rest</a></h1>
      <h2>Estamos usando un api <a href="{{baseUrl}}" target="_blank">pública</a></h2>
    </div>
    <div class="panel-group">
      <div class="panel panel-primary">
        <div class="panel-heading">Ejemplos de peticiones</div>
        <div class="panel-body">
          <button ng-click="getClick()" type="button" class="btn btn-success btn-small">Get</button>
          <button ng-click="postClick()" type="button" class="btn btn-success btn-small">Post</button>
          <button ng-click="putClick()" type="button" class="btn btn-success btn-small">Put</button>
          <button ng-click="deleteClick()" type="button" class="btn btn-success btn-small">Delete</button>
        </div>
      </div>
    </div>
      <div class="panel-group" ng-show="seleccion">
        <div class="panel panel-success">
          <div class="panel-heading">Url: {{urlPeticion}}</div>
          <div class="panel-body">
            {{datos | json}}
          </div>
        </div>
      </div>
    </div>
</body>

</html>

// Code goes here
var app = angular.module("crud", []);
app.run(function($rootScope) {
  $rootScope.baseUrl = 'https://jsonplaceholder.typicode.com';
});
app.controller("crudCtrl", function($scope, $rootScope, $http) {
  $scope.masInfo='https://docs.oracle.com/cd/E41633_01/pt853pbh1/eng/pt/tibr/concept_UnderstandingRESTServiceOperations.html';
  $scope.getClick = function() {
    $scope.seleccion = false;
    $scope.urlPeticion = $rootScope.baseUrl + '/posts/1';
    $http.get($scope.urlPeticion)
      .then(
        function(response) {
          $scope.datos = response.data;
        },
        function(response) {
          $scope.datos = "Error: " + response.statusText;
        }
      );
    $scope.seleccion = true;
  };
  $scope.postClick = function() {
    $scope.seleccion = false;
    $scope.urlPeticion = $rootScope.baseUrl + '/posts';
    $http.post(
      $scope.urlPeticion, {
        title: 'foo',
        body: 'bar',
        userId: 1
      }
    ).then(
      function(response) {
        $scope.datos = response.data;
      },
      function(response) {
        $scope.datos = "Error: " + response.statusText;
      }
    );
    $scope.seleccion = true;
  };
  $scope.putClick = function() {
    $scope.seleccion = false;
    $scope.urlPeticion = $rootScope.baseUrl + '/posts/1';
    $http.put($scope.urlPeticion, {
      id: 1,
      title: 'foo',
      body: 'bar',
      userId: 1
    }).then(
      function(response) {
        $scope.datos = response.data;
      },
      function(response) {
        $scope.datos = "Error: " + response.statusText;
      }
    );
    $scope.seleccion = true;
  };
    $scope.deleteClick = function() {
    $scope.seleccion = false;
    $scope.urlPeticion = $rootScope.baseUrl + '/posts/1';
    $http.delete($scope.urlPeticion)
      .then(
        function(response) {
          $scope.datos = response.data;
        },
        function(response) {
          $scope.datos = "Error: " + response.statusText;
        }
      );
    $scope.seleccion = true;
  };
});

/* Styles go here */

Conexión con API's REST
Uso de $http