Awesome

angular-meteor

Angular and Meteor, so happy together

angular-meteor is a meteor package that allows you to easily build meteor applications with an angular front end. It bridges the reactivity of meteor with the binding of angular.

Compatibility

Version 0.3.2 and later has been tested with Meteor 1.0

Quick start

1. Install Meteor <code>curl https://install.meteor.com | /bin/sh</code>
2. Create a new meteor app using <code>meteor create myapp</code> or navigate to the root of your existing app.
3. Install angular-meteor <code>meteor add superchris:angular-meteor</code>

Bootstrapping your module

With Meteor, you lose ng-app. It's not a big deal though. Make a lib/app.(coffee | js) that bootstraps and depends on ngMeteor:

    angular.module "app", ["ngMeteor", "ngRoute"]

    Meteor.startup ->
      angular.bootstrap(document, ["app"])

Angular expressions

You'll need to use [[]] instead of {{}} in your angular expressions. Blaze, meteor's template engine, takes over {{}} and I have not yet found a way around this. For example:

    <div>
        <label>Name:</label>
        <input type="text" ng-model="yourName" placeholder="Enter a name here">
        <hr>
        <h1>Hello [[yourName]]!</h1>
    </div>

Templates

Your templates with live in the templates folder of your Meteor app. They will need to be wrapped with a template element with a name attribute. This name attribute is what you will use to refer to your template in routes, directives, etc.

<template name="recipe.html">
  <div id="recipe_view">
    <dl>
      <dt>[[recipe.title]]</dt>
      <dd>[[recipe.description]]</dd>
      <dd>[[category.name]]</dd>
    </dl>
    <p>
      Ingredients:
      <ul>
        <li ng-repeat="ingredient in recipe.ingredients">[[ingredient.name]]</li>
      </ul>
    </p>
    <a href="#recipes/[[recipe._id]]/edit">Edit</a>
  </div>
</template>

Services

ngMeteor gives you two services you'll use in your app to talk to Meteor from Angular: $collection and $user

$collection

ngMeteor provides an AngularJS service called $collection, which is a wrapper for Meteor collections to enable reactivity within AngularJS. The $collection service no longer subscribes to a publisher function automatically, so you must explicitly subscribe to a publisher function before calling the $collection service.

$collection(collection, selector, options)

The $collection service only has the following methods

<code>bind</code> - used to bind the collection to an Angular model so that you can use it in your scope:

bind(scope, model, auto)

Once a collection has been bound using the <code>bind</code> method, the model will have access to the following methods for upserting/removing objects in the collection. If the <code>auto</code> argument as been set to true, then the user will not need to call these methods because these methods will be called automatically whenever the model changes.

<code>paginate</code> - Like bind, but paginates the collection:

paginate(scope, model)

Paginate will use the following scope properties to implement pagination:

<code>bindOne</code> - used to bind the a single model to your scope:

bind(scope, model, id)

<code>bindOneAssociation</code> - used to bind the a related model to your scope:

bind(scope, model, expression)

$user

$user only has one method, bind:

<code>bind</code> - used to bind Meteor.user to an Angular model so that you can use it in your scope:

bind(scope, model)

Example apps

• Cookbook
• Kanban Board

Acknowledgement

This project started as ngMeteor, a pre-0.9 meteorite package. I've updated it for Meteor 1.0 and added several features.