The power of Meteor and the simplicity and eco-system of AngularJS
- 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
- 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
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
More in step 6 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', '$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);
});
};
}
]);
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.
You can include Meteor native templates.
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
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: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!
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