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>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.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>



  <!-- CACHE FILE: list.html -->
  <script type="text/ng-template" id="list.html">
    <input type="text" ng-model="projectList.search" class="search-query" id="projects_search"
           placeholder="Search">
    <table>
      <thead>
      <tr>
        <th>Project</th>
        <th>Description</th>
        <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="project in projectList.projects | filter:projectList.search | orderBy:'name'">
        <td><a ng-href="{{project.site}}" target="_blank">{{project.name}}</a></td>
        <td>{{project.description}}</td>
        <td>
          <a ng-href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
        </td>
      </tr>
      </tbody>
    </table>
  </script>



  <!-- CACHE FILE: detail.html -->
  <script type="text/ng-template" id="detail.html">
    <form name="myForm">
      <div class="control-group" ng-class="{error: myForm.name.$invalid && !myForm.name.$pristine}">
        <label>Name</label>
        <input type="text" name="name" ng-model="editProject.project.name" required>
        <span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="help-inline">
            Required {{myForm.name.$pristine}}</span>
      </div>
    
      <div class="control-group"...

JavaScript

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

.value('fbURL', 'https://ng-projects-list.firebaseio.com/')
.service('fbRef', function(fbURL) {
  return new Firebase(fbURL)
})
.service('fbAuth', function($q, $firebase, $firebaseAuth, fbRef) {
  var auth;
  return function () {
      if (auth) return $q.when(auth);
      var authObj = $firebaseAuth(fbRef);
      if (authObj.$getAuth()) {
        return $q.when(auth = authObj.$getAuth());
      }
      var deferred = $q.defer();
      authObj.$authAnonymously().then(function(authData) {
          auth = authData;
          deferred.resolve(authData);
      });
      return deferred.promise;
  }
})

.service('Projects', function($q, $firebase, fbRef, fbAuth) {
  var self = this;
  this.fetch = function () {
    if (this.projects) return $q.when(this.projects);
    return fbAuth().then(function(auth) {
      var deferred = $q.defer();
      var ref = fbRef.child('projects-fresh/' + auth.auth.uid);
      var $projects = $firebase(ref);
      ref.on('value', function(snapshot) {
        if (snapshot.val() === null) {
          $projects.$set(window.projectsArray);
        }
        self.projects = $projects.$asArray();
        deferred.resolve(self.projects);
      });

      //Remove projects list when no longer needed.
      ref.onDisconnect().remove();
      return deferred.promise;
    });
  };
})

.config(function($routeProvider) {
  var resolveProjects = {
    projects: function (Projects) {
      return Projects.fetch();
    }
  };
    
  console.log('RESOLVE PROJECTS:', resolveProjects);

  $routeProvider
    .when('/', {
      controller:'ProjectListController as projectList',
      templateUrl:'list.html',
      resolve: resolveProjects
    })
    .when('/edit/:projectId', {
      controller:'EditProjectController as editProject',
      templateUrl:'detail.html',
      resolve: resolveProjects
    })
    .when('/new', {
      controller:'NewProjectController as editProject',
     ...