AngularJS Example:

by zdam

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">
      <button ng-click="test()" >test</button>
    <input type="text" ng-model="predicate" 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:predicate | orderBy:'name'">
        <td>{{project.name}}</td>
        <td>{{project.description}}</td>
        <td>
          <a href="#/edit/{{project._id.$oid}}"><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>
      </div>
    
      <label>Description</label>
      <textarea name="description" ng-model="project.description"></textarea>
    
      <br>
      <a href="#/list" class="btn">Cancel</a>
      <button ng-click="save()" ng-disabled="isClean() || myForm.$invalid"
              class="btn btn-primary">Save</button>
      <button ng-click="destroy()"
             ...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc4.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0rc4.js"></script>
<style>

JavaScript

angular.module('project', ['ngResource']).
  config(function($routeProvider) {
    $routeProvider.
      when('/list', {controller:ListCntl, template:'list.html'}).
      when('/edit/:projectId', {controller:EditCntl, template:'detail.html'}).
      when('/new', {controller:CreateCntl, template:'detail.html'}).
      otherwise({redirectTo:'/list'});
  });


function ListCntl($scope, $resource) {

    var res = $resource('https://api.mongolab.com/api/1/databases/magicmongo/collections/projects?apiKey=4f7fb7bde4b08a2eed5f3516',{});
    $scope.projects = res.query({}, function(resultData){
       var s = ''; 
    });
    
    $scope.test = function() {
        
    $scope.projects = res.query({}, function(resultData){
       var s = 'hello';
        s+=" world";        
    });
        
    };
}


function CreateCntl($scope, $location, Project, $resource) {
  $scope.save = function() {
      
         var res = $resource('https://api.mongolab.com/api/1/databases/magicmongo/collections/projects?apiKey=4f7fb7bde4b08a2eed5f3516',{});

      res.save($scope.project, function(resultData){
          $location.path('/edit/' + resultData._id.$oid);
      });   
  }
}


function EditCntl($scope, $location, $routeParams, Project, $resource) {
  var self = this;
    
    var res = $resource('https://api.mongolab.com/api/1/databases/magicmongo/collections/projects/:projectId?apiKey=4f7fb7bde4b08a2eed5f3516',{});
    
    res.get({projectId:$routeParams.projectId}, function(resultData){
        self.project = resultData;
        $scope.project = angular.copy(self.project);
    });
    
    

  $scope.isClean = function() {
    return angular.equals(self.project, $scope.project);
  }

  $scope.destroy = function() {
      
      res.delete({projectId: $scope.project._id.$oid}, function() {
          $location.path('/list');
      })
  };

  $scope.save = function() {

      res.save($scope.project, function(){
          $location.path('/list');
      });  
  };
}