AngularJS Example: Wire up a Backend

The Firebase application Real-Time

by Francis Rodrigues

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<div ng-app="project">
    <h2>JavaScript Projects</h2>
    <div ng-view></div>
    
    <div ng-controller="FooController">
        <div ng-if="isLoaded">{{ result }}</div>
        <div ng-if="!isLoaded">{{ error }}</div>
    </div>

JavaScript

angular.module('project', ['ngRoute'])

.service('ServiceApi', function($resource, $q) {
    var self = this;
      this.query = function() {
          var deferredObject = $q.defer();
          $resource('http://frotista.com.br/api/v1/listar-caminhoes')
            .query()
            .$promise
            .then(function(result) {
              deferredObject.resolve(result);
            }, function(errorMsg) {
                deferredObject.reject(errorMsg);
            });
          return deferredObject.promise;
      };
  })

.controller('FooController', function($scope, ServiceApi) {
   ServiceApi.query().then(function(result) {
     $scope.isLoaded = true;
     $scope.result = result;
   }, function(error) {
     $scope.error = 'has failed... ' + error;
   })
})