Angular Has Reached the Server!

Creating Angular-Meteor was and is all about bringing the worlds of Angular and Meteor closer together. It starts by making Angular a first class citizen FrontEnd framework for Meteor applications, as an alternative, or a companion to Meteor’s own FrontEnd framework — Blaze. That meant working on enabling Angular templates, binding to Mongo Collections and more.

Since we combined the two frameworks, new possibilities came up and one of those is the crazy idea of running Angular on the server side!

By doing so, we moved from making the two frameworks work together, to delivering a new experience to developers. Having Angular run on the server opens a whole world of possibilities and we are just scratching the surface. The main advantage we see so far in bringing Angular to the server side, is turning Angular developers into full stack developers using their existing knowledge! We would like to apply the same Angular concepts to the server, making writing server side code as easy and enjoyable as writing Angular on the client side.

How does it look?

Here is a regular Angular service:

angular.module('myApp').service('Math', function() {
  this.add = function(a, b) {
    return a + b;
  };
});

The only difference is that this service in running on the server! this is a server code.

But you can still call it on the client exactly like you would if it was on the client!

angular.module('myApp').controller('MyController', function(Math) {
  $scope.currentResult = 0;
  
  $scope.add = function(value) {
    Math.add($scope.currentResult, value).then(function(result) {
      $scope.currentResult = result;
    });
  }
});

The only difference from the original service is that all functions of the service return a promise on the client side instead of the actual return value (that is because it is a call to the server after all).

All we need is to register the service as a Server API using the ServerAPIProvider created by angular-meteor. Anywhere in your server code add the following:

angular.module('myApp').config(function(ServerAPIProvider) {
  ServerAPIProvider.register('Math');
});

This first feature, which is supported in version 0.9.0-alpha.1, makes our server code more modular and Angular oriented.

As you can see it was as easy as creating a service on your client side, with no need for REST endpoints, methods or any other boilerplate. It is very clear what are the dependencies of MyController and what it uses from the server side.

All the magic of having the Math service on the client side and wrapping the functions with promises is done by Angular-Meteor using Meteor’s great infrastructure.

Also important to notice is that if the Math service was defined in common code (both server and client), the client side method would be called as well as the server side one. That means that it works just like Meteor.methods, allowing the developer to create client side stubs for server methods with latency compensation

As we said before, this is just scratching the surface. We are working on making more tasks more Angular oriented and bringing more Angular goodies to the server side. These include:

• Server side digest cycle for change detection (as Meteor’s Tracker.autorun isn't available on the server)
• Server side rendering
• Easier publishing of data
• Manipulating a collection in the DB using regular Array functions (push, pop…)
• Much more…

Read more in depth on the Angular-Server API page.

Server side Angular will also be featured in the angular-meteor tutorial for an easier start for developers coming from all backgrounds. We want to make it easy for everyone to write awesome code!

Keep following this blog for future updates and feel free to contact us, raise issues on our Github repository and influence the way the library is heading.

Can't wait to see what more Angular can do on the server!