The power of Meteor and the simplicity and eco-system of AngularJS
We just released angular-meteor version 0.6.0 with a lot of exciting new features, including new API's for collections, templates and routing. It does have some breaking changes too. You can read more on the details in the release notes
Update to the new version by running:
$ meteor updatePlease support our ng-conf 2015 talk proposal by commenting on it here
- Install Meteor
$ curl https://install.meteor.com | /bin/sh - Create a new meteor app using
$ meteor create myappor navigate to the root of your existing app - Install urigo:angular
$ meteor add urigo:angular
- Getting started tutorial
- Meteor package - urigo:angular
- Roadmap - Trello board
- Mailing list - Google group
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.
- External issues - help us push external issues that affect our community.
- Roadmap - you can add a card about want you want to see in the library or in the tutorial.
We are also considering money compensation for contributors, more as a tribute then a profit for now.
Create your Meteor Project
meteor create myProject
cd myProjectCreate a packages directory and clone from your forked repo
mkdir packages
cd packages
git clone https://github.com/[your_username]/angular-meteor.git my-packageAdd your local package
cd ..
meteor add my-package
Now you can start using your own copy of the angular-meteor project from myProject.
- 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
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 (Meteor currently doesn't allow attributes to be set on the <body>).
More in step 0 in the tutorial
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 .tpl files, since Meteor won't look at those files as Spacebars templates. Tying HTML and .tpl 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 .tpl 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.tpl'"></ng-include>
<ng-include src="'client/views/settings.tpl'"></ng-include>
</div>
</body>client/views/user.tpl:
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
</div>More in step 2 of the tutorial
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 $meteorCollection.
$scope.todos = $meteorCollection(Todos);More in step 3 of the tutorial
$meteorSubscribe.subscribe is a wrapper for Meteor.subscribe that returns a promise.
Here's an example of how to tie a Meteor collection to a clean Angular model in the form of an array:
$meteorSubscribe.subscribe('Todos').then(function () {
$scope.todos = $meteorCollection(Todos);
});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', '$meteorCollection',
function($scope, $meteorCollection) {
$scope.todos = $meteorCollection(Todos);
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
$scope.saveTodo = function(){
$scope.todos.save($scope.newTodo);
};
}
]);You no longer need to use the special urigo:angular-ui-router package. Instead, you can include angular-ui-router either with Bower by using mquandalle:bower or manually by downloading it and injecting it with dependency injection like you would with any other Angular module.
More on how to actually use angular-ui-router in step 5 of the tutorial
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>The 0.6 release 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.
Although it is possible to combine the two systems for including templates, using one of them to the furthest extent possible helps us avoid the recipe for headaches that is unnecessarily deep template hierarchies.
angular-meteor provides two $rootScope variables to support Meteor.user when working with Meteor's accounts package. Documentation.
$rootScope.currentUser; // Currently logged in user and its data
$rootScope.loggingIn; // true if a Meteor login method is currently in progressMore in step 8 of the tutorial
$meteorMethods calls a Meteor method and returns a promise.
$meteorMethods.call('addUser', username).then(function (data) {
console.log('User added', data);
});$meteorSession binds a scope variable to a Meteor Session variable.
$meteorSession('counter').bind($scope, 'counter');To add AngularJS libraries from the community just use the meteor-bower package.
Sometimes an extra logic is needed to include the libraries to Meteor, for that you can create a Meteor package for them.
Similar 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: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!
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