The power of Meteor and the simplicity and eco-system of AngularJS
We just released angular-meteor version 0.6-alpha with a lot of exciting new features.
It has a completely new API for collections, templates and routing.
It also has breaking changes. Please read more and get ready here: 0.6.0-alpha release
We will support the old API only until the end of the beta version so please update your applications.
To try out the alpha version and see that you are ready:
meteor add urigo:[email protected]
- 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
http://angularjs.meteor.com/tutorial
https://trello.com/b/Wj9U0ulk/angular-meteor
https://groups.google.com/forum/#!forum/angular-meteor
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 compansation for contributers, more as a tribute then a profit for now.
- 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
If you have a module called myModule, for example:
myModule = angular.module('myModule',['angular-meteor']);
More in step 0 in the tutorial
From angulr-meteor version 0.6 you can use AngularJS's default delimiters and there is no need to change them.
All you need to do is change your AngularJS HTML template files to end with .tpl extension like - myFile.tpl
Then you can use it regularly, 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
More in step 3 of the tutorial
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', '$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);
};
$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.remove(todo);
});
};
}
]);
There is no need anymore to use the urigo:angular-ui-router pacage. You can just include ui-router with the meteor bower package and in templateUrl insert the path to the tpl files.
More in step 5 of the tutorial
You can include Meteor's native templates.
More in step 8 of the tutorial
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: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