Angular.js for ajax CRUD

Its been a busy weekend, not in terms of coding though.  Just did some quick coding now.  This is now a book-markable ajax CRUD talking to conventional REST/JSON backend.

//app.js

angular.module('ratewatcher', ['ngResource']).
 config(function($routeProvider) {
  $routeProvider.
   when('/lenders', {controller:LenderListController, templateUrl:'lender-list.html'}).
   when('/lenders/new', {controller:LenderCreateController, templateUrl:'lender-detail.html'}).
   when('/lenders/:id', {controller:LenderEditController, templateUrl:'lender-detail.html'}).
   otherwise({redirectTo:'/lenders'});
 }).
 factory('Lender', function($resource) {
  return $resource('/lenders/:id', {id: '@id'}, {});
 });

//controllers.js

function LenderListController($scope, Lender) {
  $scope.lenders = Lender.query();
  
  $scope.remove = function(lender) {
   lender.$remove();
  }
}
  
function LenderCreateController($scope, Lender) {
  $scope.save = function() {
    var lender = new Lender({id: 0,
     name: $scope.lender.name, 
     category: $scope.lender.category, 
     url: $scope.lender.url
    });
    
    lender.$save();
  };
}

function LenderEditController($scope, $location, $routeParams, Lender) {
 $scope.lender = Lender.get({id: $routeParams.id});
 
  $scope.save = function() {
   $scope.lender.$save();
   $location.path('/');
  };
}

I thought the scala backend was really concise, but it turns you can also make the front end javascript just as concise.  Coupled with bootstrap css and basic html, this seems pretty good.

Suggested readings:
http://www.angularjs.org/ - Wire Up a Backend example
http://docs.angularjs.org/api/ngResource.$resource
http://jsfiddle.net/johnlindquist/qmNvq/
http://docs.angularjs.org/api/ng.$route

Angular.js my first few mins impression

I have been looking at Javascript frameworks.  I have experience in GWT and lately trying to learn ember.js.  So far ember.js is really powerful, but the docs is not that great.  Ember.js has made a lot of changes and the only way to learn it seems to be to read the code/api.  Since my javascript is not that good, it was taking me a bit of time to learn the magic of ember.js.  This lead to me look again a bit, I found angular.js because it was in google's CDN api.

Having read the watch and read the front page of angular.js it seems to be just as powerful as ember.js.  Its got bi-directional binding, a template engine, name spaces.  The terminology they have is FP (ala Scala).  They have apply, future promise.  So gave a try.

function LenderController($scope, $http) {
 $scope.lenders = [];
 
  $scope.all = function() {
    $http.get('/lenders').success(function(data) {
      $scope.lenders = data;
    });
  };
}

<div class="span10" ng-controller="LenderController">
    <table class="table striped">
        <tr> 
            <th>Name</th><th>Category</th><th>Url</th> 
        </tr>
        <tr ng-repeat="lender in lenders"> 
            <td>{{lender.name}}</td> <td>{{lender.category}}</td> <td>{{lender.url}}</td> 
        </tr>
    </table>
    <a href="" ng-click="all()">fetch all</a>
</div>

Pretty short and direct code for fetching from json/rest backend and displaying it on the view.  I think Angular.js is powerful and yet easy for a newbie to pickup.  That is my first few mins impression of it.