AngularJS Example:

by WILLIAM CORREA

HTML

<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="search" class="search-query" 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 projects | filter: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="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" ng-class="{error: myForm.site.$invalid && !myForm.site.$pristine}">
        <label>Website</label>
        <input type="url" name="site" ng-model="project.site" required>
        <span ng-show="myForm.site.$error.required && !myForm.site.$pristine" class="help-inline">
            Required</span>
        <span ng-show="myForm.site.$error.url" class="help-inline">
            Not a URL</span>
      </div>
    
      <label>Description</label>
      <textarea name="description" ng-model="project.description"></textarea>
    
      <br>
      <a href="#/" class="btn">Cancel</a>
      <button ng-click="save()" ng-disabled="myForm.$invalid"
              class="btn...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-route.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<style>
// Uncomment this in Plunker or JSFiddle: @import '//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css';

JavaScript

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

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

.factory('Projects', function($firebase, fbURL) {
  return $firebase(new Firebase(fbURL)).$asArray();
})

.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:'/'
    });
})

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

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

.controller('EditCtrl',
  function($scope, $location, $routeParams, Projects) {
    var projectId = $routeParams.projectId,
        projectIndex;

    $scope.projects = Projects;
    projectIndex = $scope.projects.$indexFor(projectId);
    $scope.project = $scope.projects[projectIndex];

    $scope.destroy = function() {
        $scope.projects.$remove($scope.project).then(function(data) {
            $location.path('/');
        });
    };

    $scope.save = function() {
        $scope.projects.$save($scope.project).then(function(data) {
           $location.path('/');
        });
    };
});