Angular Meteor Architecture Explained

I have gone thru this, and it seems like a bit of confusing concepts for new developers trying to build an app in angular-meteor. The main source of confusion is because meteor documents are explaining the use of templates and blaze. When working with angular-meteor you do not really need to use those components but use angular instead, so let’s go thru some of the concepts.

If you are coming from a traditional stack background you are probably used to this kind of syntax:

Meteor is different as it provides a truly isomorphic syntax:

(Above slides taken from Uri Goldstein’s angular-meteor presentation).

The Architecture

It is a great feature, but if your brain (like mine) is wired to option 1 you will need some time to get used to this new idea. So let’s start exploring the underlying architecture:

The drawing below shows the angular-meteor “stack”. It is partially correct as it does not show the reactive nature of meteor, angular and their combination, but it can be useful in understanding what goes where:

Angular Meteor Architecture

Angular

The all beloved angularjs code will be used as the heart of the client code. I am assuming that you got here because you are familiar with angular and you are really keen about using all the goodies we know and love from it: 2 ways data binding, services, ui routing, dependency injection and foremost directives. The one thing you will probably not need is the $http service (or its derivatives: ngResource or Restangular) — DB access is handled in meteor in real time.

Meteor

The heart of your application will still be the meteor code. There are also quite few tutorials around. However, they will need to be taken with a grain of salt due to the source of confusion mentioned above. All of the meteor documentation can be found on their website. Working with angular meteor does not mean that you cannot use meteor functions — sure you can!

If you want to compare Angular code to the native templates / blaze code — check out my repository on https://github.com/Tallyb/ng-leaderboards

Angular Meteor

And this is where Angular Meteor comes into the picture. It saves you the burden of linking between the Meteor app and the Angular app. The most important thing you are getting from it is

Real time data synchronization between Angular and Meteor

Every change to the data in the Angular views is conveyed to Meteor, as well as changes in the Meteor data are reflected in Angular.

But that is not all. In addition to that you will also recieve

• Services to interact with meteor functions (angular meteor has a set of services under different names, but all are conveniently wrapped under the $meteor service for easy dependency injection.
• Directives — ok, one directive, which allows you to use meteor templates inside your application.
• $scope extensions that amends the angular $scope to work with meteor reactivity. This includes making a $scope variable reactive

Angular server, now in alpha, is extending the angular-meteor box to the left, so it will cover the same grounds as the meteor app, and angular code will be used also for running on the server. Yay! you got it — dependency injection on the server.