angular-meteor

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

New v0.6 - the biggest changes so far!

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 update

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

Quick start

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 urigo:angular $ meteor add urigo:angular

Resources

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.
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.

Contributor Developer Setup

Create your Meteor Project

meteor create myProject
cd myProject

Create a packages directory and clone from your forked repo

mkdir packages
cd packages
git clone https://github.com/[your_username]/angular-meteor.git my-package

Add your local package

cd ..
meteor add my-package

Now you can start using your own copy of the angular-meteor project from myProject.

Usage

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

App initialization

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>).

Data binding

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.

It's worth noting that Meteor will resolve the URL's you give ng-include from the root of your project, not relative to the file you're viewing in your browser.

client/index.html:

<head>
    <title>Angular and Meteor</title>
</head>

<body>
    <div ng-app>
        <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>

Using 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 $meteorCollection.

$scope.todos = $meteorCollection(Todos);

Adding controllers, directives, filters and services

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);
    };
}
]);

Routing

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

<meteor-include>

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>

Caveat regarding <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.

User

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 progress

Meteor methods with promises

$meteorMethods calls a Meteor method and returns a promise.

$meteorMethods.call('addUser', username).then(function (data) {
    console.log('User added', data);
});

Bind Meteor session

$meteorSession binds a scope variable to a Meteor Session variable.

$meteorSession('counter').bind($scope, 'counter');

Additional packages

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!

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

richardlitt / angular-meteor Goto Github PK

angular-meteor's Introduction