AngularJS Ejemplo Servicio Externo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="http://firebase.github.io/angularFire/angularFire.js"></script>
<link rel="stylesheet" href="http://angularjs.org/css/bootstrap.min.css">
<link rel="stylesheet" href="http://angularjs.org/css/font-awesome.css">
<div class="well" ng-app="project">
  <h2>Proyectos JavaScript</h2>
  <div ng-view></div>



  <!-- CACHE FILE: list.html -->
  <script type="text/ng-template" id="list.html">
    <input type="text" ng-model="search" class="search-query" placeholder="Search">
    <table>
      <thead>
      <tr>
        <th>Proyecto</th>
        <th>Descripcion</th>
        <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="project in projects | filter:search | orderBy:'name'">
        <td><a href="{{project.site}}" target="_blank">{{project.name}}</a></td>
        <td>{{project.description}}</td>
        <td>
          <a 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}">
        <label>Name</label>
        <input type="text" name="name" ng-model="project.name" required>
        <span ng-show="myForm.name.$error.required" class="help-inline">
            Required</span>
      </div>
    
      <div class="control-group" ng-class="{error: myForm.site.$invalid}">
        <label>Website</label>
        <input type="url" name="site" ng-model="project.site" required>
        <span ng-show="myForm.site.$error.required" class="help-inline">
            Required</span>
        <span ng-show="myForm.site.$error.url" class="help-inline">
            Not a URL</span>
     ...

JavaScript

var app = angular.module('project', ['firebase']);

app.value('fbURL', 'https://angularjs-projects.firebaseio.com/');

app.factory('Projects', function(angularFireCollection, fbURL) {
    return angularFireCollection(fbURL);
  });

app.config(function($routeProvider) {
    $routeProvider.
      when('/', 
           {controller:ListCtrl, templateUrl:'list.html'}).
      when('/edit/:projectId', 
           {controller:EditCtrl, templateUrl:'detail.html'}).
      when('/new', 
           {controller:CreateCtrl, templateUrl:'detail.html'}).
      otherwise({redirectTo:'/'});
  });

function ListCtrl($scope, Projects) {
  $scope.projects = Projects;
}

function CreateCtrl($scope, $location, $timeout, Projects) {
  $scope.save = function() {
    Projects.add($scope.project, function() {
      $timeout(function() { $location.path('/'); });
    });
  }
}

function EditCtrl($scope, $location, $routeParams, angularFire, fbURL) {
  angularFire(fbURL + $routeParams.projectId, $scope, 'remote', {}).
  then(function() {
    $scope.project = angular.copy($scope.remote);
    $scope.project.$id = $routeParams.projectId;
    $scope.isClean = function() {
      return angular.equals($scope.remote, $scope.project);
    }
    $scope.destroy = function() {
      $scope.remote = null;
      $location.path('/');
    };
    $scope.save = function() {
      $scope.remote = angular.copy($scope.project);
      $location.path('/');
    };
  });
}