angular-meteor

The power of Meteor and the simplicity and eco-system of AngularJS

Community - Thank you so much for making the ng-conf 2015 talk happen!

Quick start

Install Meteor $ curl https://install.meteor.com | /bin/sh
Create a new meteor app using $ meteor create myapp or navigate to the root of your existing app
Install urigo:angular $ meteor add urigo:angular

Resources

Change Log, updates and breaking changes
Getting started tutorial
angular-meteor University
Example application (Final version of the tutorial)
angular-meteor Blog
Meteor package - urigo:angular
Roadmap - Trello board
Meteor Forums

Contributing

We would love contributions in:

Code
Tutorial - our goal with the tutorial is to add as many common tasks as possible. If you want to create and add your own chapter we would be happy to help you writing and adding it.
Roadmap - you can add a card about what you want to see in the library or in the tutorial.
I (Urigo) live around the world with one small bag, so another way of contributing can be by offering me a place to sleep somewhere interesting around the world that I have to see :)

Contributor Developer Setup

Create your Meteor Project

meteor create myProject
cd myProject

Create a packages directory and clone from your forked repo

mkdir packages
cd packages
git clone https://github.com/[your_username]/angular-meteor.git my-package

Add your local package

cd ..
meteor add my-package

Now you can start using your own copy of the angular-meteor project from myProject.

Usage

App initialization
Data binding (new method to avoid conflicts)
Using Meteor Collections
Adding controllers, directives, filters and services
Routing
User service
Meteor methods with promises
Bind Meteor session

App initialization

If you have a module called myModule, you can initialize your app like you would normally and by specifying angular-meteor as a dependency:

var myModule = angular.module('myModule', ['angular-meteor']);

You don't need to bootstrap the application manually, simply specifying the ng-app attribute on a container element will do.

Data binding

From angular-meteor version 0.6 you can use Angular's default template delimiters and there is no need to change them.

However, you need to write your Angular template markup in .ng.html files, since Meteor won't look at those files as Spacebars templates. Tying HTML and .ng.html files together isn't very difficult, we can simply use Angular's ng-include.

Please note that the names of the templates to Angular will be their URL as Meteor sees it when minifying the .ng.html files. Hence every template URL is relative to the root of the Meteor project, and contains no leading forward slash. This is important to note when working with ng-include to include templates.

client/index.html:

<head>
    <title>Angular and Meteor</title>
</head>

<body>
    <div ng-app="myModule">
        <ng-include src="'client/views/user.ng.html'"></ng-include>
        <ng-include src="'client/views/settings.ng.html'"></ng-include>
    </div>
</body>

client/views/user.ng.html:

<div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">

    <h1>Hello {{yourName}}!</h1>
</div>

Using Meteor Collections

angular-meteor provides 3-way data binding (view-client-server) by tying a Meteor collection to an Angular model. The API to accomplish this is $meteor.collection.

$scope.todos = $meteor.collection(Todos);

Adding controllers, directives, filters and services

When adding controllers and the likes, remember to use Dependency Injection. This is common Angular practice and helps you avoid problems when minifying and obfuscating code.

app.controller('TodoCtrl', ['$scope', '$meteor',
  function($scope, $meteor) {

    $scope.todos = $meteor.collection(Todos);

    $scope.addTodo = function() {
      $scope.todos.push({text:$scope.todoText, done:false});
      $scope.todoText = '';
    };

    $scope.saveTodo = function(){
      $scope.todos.save($scope.newTodo);
    };
  }
]);

Routing

Use to official AngularUI ui-router Meteor package - angularui:angular-ui-router

More on how to actually use angular-ui-router in step 5 of the tutorial

<meteor-include>

You can include Meteor's native templates with the meteor-include directive.

<template name="todoList">
    A couple of todos
</template>

<meteor-include src='todoList'></meteor-include>

Passing arguments to meteor-include

To pass parameters to a meteor-include directive, create a Blaze template that includes the template you want to include with parameters and include that template with meteor-include:

 <template name="quickFormWithParameters">
   {{> quickForm collection="Books" id="insertBookForm" type="insert"}}
 </template>
 
 <meteor-include src="quickFormWithParameters">

Caveat regarding <meteor-include>

Since 0.6 release, angular-meteor relies more heavily on Angular's default templating system and it is now usually recommended that you use ng-include over meteor-include. This is because you can't use Angular's template delimiters directly within Meteor templates and you would still need to use an ng-include directive to include any Angular template markup in your Meteor templates.

User Authentication

angular-meteor provides complete support for the Meteor accounts system. more details here - Documentation.

Meteor methods with promises

$meteor.call calls a Meteor method and returns a promise.

$meteor.call('addUser', username).then(function (data) {
    console.log('User added', data);
});

Bind Meteor session

$meteor.session binds a scope variable to a Meteor Session variable.

$meteor.session('counter').bind($scope, 'counter');

Additional packages

The following is a non-exhaustive list of Meteor packages common Angular libraries:

Meteor packages for Angular 3rd party libraries
civilframe:angular-jade enables the usage of JADE files in place of HTML files. Files ending in *.ng.jade and will be compiled to *.html.
pbastowski:angular-babel empowers angular-meteor with Babel and ng-annotate all in the one package. Files ending in .es6 will first be transpiled by Babel and then annotated with ng-annotate.

Feel free to make more Angular packages and add them to that list as well.

Acknowledgement

This project started as ngMeteor, a pre-0.9 meteorite package. Since then a lot has changed but that was the main base.

Also, a lot of features were inspired by @superchris's angular-meteor fork of ngMeteor

thrasnic/angular-meteor