September 1, 2011

GAE + Gson + AngularJS

I have been playing with AngularJS lately. It is a JavaScript library with the following tag line: {% blockquote %} What HTML would have been had it been designed for web apps. {% endblockquote %} All I can say after a few hours: HTML would haven been great! It would have had a clear MVC separation, data binding, dependency-injection, and it would have kept development simple & fun.

My web app know-how is very rusty, so I hacked together a simple proof-of-concept, just to see how AngularJS actually feels. Here are the crucial snippets from my Google App Engine Java back-end (to generate JSON), and the HTML/AngularJS view (to render it).

The Servlet part:

protected void doGet(...) {
  response.setContentType("text/plain");
  String[] movies = new String[]{
    "Buffalo 66",
    "Jackie Brown",
    "Vicky Cristina Barcelona"};
  response.getWriter().print(new Gson().toJson(movies));
}

The AngularJS Controller:

function MovieListCtrl($xhr) {
  var self = this;
  $xhr('GET', 'http://localhost:8080/json',
    function(code, response) {
      self.movies = response;
    }
  );
}

The HTML/AngularJS View:

<body ng:controller="MovieListCtrl">
  Rahel's favorite movies:
  <ul>
    <li ng:repeat="movie in movies">
      {movie}
    </li>
  </ul>
</body>

Check out the official AngularJS Tutorial for more details and a ton of cool examples.

Above, Below, and Beyond Tech Talk

GAE + Gson + AngularJS