firdausramlan/angular-meteor

Combining the simplicity and power of AngularJS and Meteor

angular-meteor

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

Please support our ng-conf 2015 talk proposal by commenting on it here:

ng-conf/submissions-2015#172

Quick start

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

Getting started tutorial

http://angularjs.meteor.com/tutorial

Package

urigo:angular

Roadmap

https://trello.com/b/Wj9U0ulk/angular-meteor

Mailing list

https://groups.google.com/forum/#!forum/angular-meteor

Usage

Table of Contents

• App initialization
• New Data-Binding to avoid conflict
• Using Meteor Collections
• Adding controllers, directives, filters and services
• Creating and inserting template views
• Routing
• User service
• Meteor methods with promises
• Bind Meteor session

App initialization

If you have a module called myModule, for example:

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

More in step 0 in the tutorial

New Data-Binding to avoid conflict

To prevent conflicts with Meteor's Blaze live templating engine, angular-meteor has changed the default AngularJS data bindings from {{...}} to [[...]]. For example:

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

More in step 2 of the tutorial

Using Meteor Collections

$collection

$collection.bind

$collection.bindOne

AngularMeteorCollection

More in step 6 of the tutorial

Subscribe

$subscribe.subscribe

Adding controllers, directives, filters and services

To prevent errors when minifying and obfuscating the controllers, directives, filters or services, you need to use Dependency Injection. For example:

app.controller('TodoCtrl', ['$scope', '$collection',
  function($scope, $collection) {
    $collection("todos", $scope);
   
    $scope.addTodo = function() {
      $scope.todos.add({text:$scope.todoText, done:false});
      $scope.todoText = '';
    };

    $scope.saveTodo = function(){
      $scope.todos.add($scope.todos);
    }
   
    $scope.remaining = function() {
      var count = 0;
      angular.forEach($scope.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };
   
    $scope.archive = function() {
      angular.forEach($scope.todos, function(todo) {
        if (todo.done) $scope.todos.delete(todo);
      });
    };
  }
]);

Creating and inserting template views

A template is defined using the template tags (this could be in a standalone file or included in another file).

<template name="foo">
  <h1>Hello, World!</h1>
</template>

You can render this template using handlebars as you would for any other Meteor app:

{{> foo}}

Templates will also be added to the $templateCache of the angular-meteor module. To invoke the template in AngularJS you could use ng-view and specify the template in the $templateCache when defining your routes using the $routeProvider or you could use the ng-template directive to render your template like this:

<ANY ng-template="foo"></ANY>

<!--Add the ng-controller attribute if you want to load a controller at the same time.-->    
<ANY ng-template="foo" ng-controller="fooCtrl"></ANY>

Templates with names starting with an underscore, for example "_foo", will not be put into the $templateCache, so you will not be able to access those templates using ng-template, ng-include or ng-view.

meteor-include

You can include Meteor native templates.

meteor-include

Routing

It would be wise to consider using the urigo:angular-ui-router Meteor package for angular-meteor, which exposes the popular ui-router module to angular-meteor. For those of you that have grown accustomed to the Meteor methods of routing, angular-meteor is compatible with Iron Router.

More in step 5 of the tutorial

User

angular-meteor User

More in step 8 of the tutorial

Meteor methods with promises

$methods

Bind Meteor session

$session

Additional packages

Using this method, additional functionality has been provided to urigo:angular-meteor in the form of separate Meteor packages that expose and inject angular modules into angular-meteor. These packages have been developed by either the angular-meteor Team and/or by third parties. The following is a non-exhaustive list of these packages:

• urigo:angular-ui-router empowers angular-meteor with the ui-router module.
• urigo:ionic Ionic Framework on top of Meteor.
• netanelgilad:angular-file-upload empowers angular-meteor with angular-file-upload module.
• davidyaha:smart-table empowers angular-meteor with smart-table module.
• netanelgilad:angular-sortable-view empowers angular-meteor with angular-sortable-view module.
• netanelgilad:text-angular empowers angular-meteor with textAngular module.
• tonekk:angular-moment empowers angular-meteor with angularMoment module.

Feel free to make angular-meteor module smart packages, and please contact urigo if you would like your package to be listed here as well. Be sure to be compatible with Meteor 0.9.0 and above and it's packaging system!

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