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!

App initialization

angular
  .module('myModule', ['angular-meteor']);

Templating

You need to write your Angular template markup in .ng.html files, since Meteor won't look at those files as Spacebars templates. Tying HTML and .ng.html 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 '.ng.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:

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

<body ng-app="myModule">
    <ng-include src="'client/views/user.ng.html'"></ng-include>
    <ng-include src="'client/views/settings.ng.html'"></ng-include>
</body>

client/views/user.ng.html:

<div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">

    <h1>Hello {{yourName}}!</h1>
</div>

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.

$scope.todos = $meteor.collection(Todos);

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.

Meteor methods with promises

$meteor.call calls a Meteor method and returns a promise.

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

Bind Meteor session

$meteor.session binds a scope variable to a Meteor Session variable.

$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

jlsuarezs / angular-meteor Goto Github PK

angular-meteor's Introduction