angular-meteor
The power of Meteor and the simplicity and eco-system of AngularJS
Quick start
Meteor Project
- 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 Angular
$ meteor add angular
Meteor client side - with Bower
Use Meteor as a service in your existing non Meteor angular application
- Install meteor-client-side
$ bower install meteor-client-side
- Install angular-meteor
$ bower install angular-meteor
Resources
- Getting started tutorial
- Example application (Final version of the tutorial)
- angular-meteor University
- Questions and help - stack-overflow
angular-meteor
tag - Discussions - Angular category on the Meteor Forum and
- Report issues
- Change Log, updates and breaking changes
- Roadmap - Trello board
- angular-meteor Blog
- Starters - angular-meteor Yeoman generator, Angular-Meteor-Boilerplate with TypeScript
- Meteor package - angular
- Angular-Meteor Platform - No Blaze, plain HTML
- Awesome Meteor - A curated, community driven list of awesome Meteor packages, libraries, resources and shiny thing
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 :)
If you want to contribute and need help or don't know what should you do, you can contact me directly
Contributor Developer Setup
Run local angular-meteor in your project
Create your Meteor Project
meteor create myProject cd myProject
Fork angular-meteor and clone the angular-meteor library to another directory named angular
mkdir angular git clone https://github.com/[your_username]/angular-meteor.git angular
Create a packages
directory under your project's root folder and link your forked repo
cd myProject mkdir packages cd packages ln -s ~/path_to_your_repos/angular
Now you can start using your own copy of the angular-meteor
project from myProject
.
Running tests
In the command line
. run_tests.sh
Then go to localhost:3000
in your browser
Contributing to documentation and tutorials.
Whether it's a typo, some clarification, or a whole new feature - here's how to get started:
- Follow the steps to get started as a developer for angular-meteor.
- Change into the .docs directory and then angular-meteor
cd .docs/angular-meteor
- Run the app for the documentation
meteor
- Start tweaking and updating!
Usage
Table of Contents
- App initialization
- Templating
- Binding to Meteor Collections
- Routing
- User service
- Meteor methods with promises
- Bind Meteor session
App initialization
Register angular-meteor
as a module in our application:
1angular 2 .module('myModule', ['angular-meteor']);
More in step 0 in the tutorial
Templating
Before writing any angular
templates, make sure to remove blaze-html-templates
first, so there won't be any conflicts with the templates engines:
blaze-html-templates
Please note that the names of the templates to Angular will be their URL as Meteor sees it when minifying the 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
:
1<head> 2 <title>Angular and Meteor</title> 3</head> 4 5<body ng-app="myModule"> 6 <ng-include src="'client/views/user.html'"></ng-include> 7 <ng-include src="'client/views/settings.html'"></ng-include> 8</body>
client/views/user.html
:
1<div> 2 <label>Name:</label> 3 <input type="text" ng-model="yourName" placeholder="Enter a name here"> 4 5 <h1>Hello {{yourName}}!</h1> 6</div>
More in step 0 of the tutorial
Binding to 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.
1$scope.todos = $meteor.collection(Todos);
More in step 3 of the tutorial
Subscribe
$meteor.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:
1$meteor.subscribe('Todos').then(function () { 2 $scope.todos = $meteor.collection(Todos); 3});
More in step 9 of the tutorial
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
<blaze-template>
Include Blaze templates in your angular-meteor application.
Use the urigo:angular-blaze-template package.
User Authentication
angular-meteor provides complete support for the Meteor accounts system. more details here - Documentation.
More in step 8 of the tutorial
Meteor methods with promises
$meteor.call calls a Meteor method and returns a promise.
1$meteor.call('addUser', username).then(function (data) { 2 console.log('User added', data); 3});
More in step 14 of the tutorial
Bind Meteor session
$meteor.session binds a scope variable to a Meteor Session variable.
1$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