Skip to content

Commit 6dfb814

Browse files
committed
Update documentations to Meteor 0.9.0
1 parent b981c18 commit 6dfb814

File tree

1 file changed

+94
-14
lines changed

1 file changed

+94
-14
lines changed

README.md

Lines changed: 94 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
ngMeteor v0.2
1+
ngMeteor
22
========
3-
> The simplest no-conflict way to use AngularJS with Meteor, Meteorite and Atmosphere Smart Packages.
3+
> The simplest no-conflict way to use AngularJS with Meteor.
44
55
> ngMeteor v0.1.22+ works with Blaze.
6+
> ngMeteor v0.2.0+ works with Meteor 0.8.2, 0.8.3, 0.9.0 and above.
67
78
## Quick start
89
1. Install [Meteor](http://docs.meteor.com/#quickstart) <code>curl https://install.meteor.com | /bin/sh</code>
9-
2. Install [Meteorite](https://github.com/oortcloud/meteorite#installing-meteorite) <code>npm install -g meteorite</code>
10-
3. Create a new meteor app using <code>meteor create myapp</code> or navigate to the root of your existing app.
11-
4. Install ngMeteor <code>mrt add ngMeteor</code>
10+
2. Create a new meteor app using <code>meteor create myapp</code> or navigate to the root of your existing app.
11+
4. Install urigo:ngmeteor <code>meteor add urigo:ngmeteor</code>
1212

1313
## Usage
1414
### Table of Contents
15-
- [New Data-Binding to avoid conflict](https://github.com/loneleeandroo/ngMeteor#new-data-binding-to-avoid-conflict)
16-
- [Using Meteor Collections](https://github.com/loneleeandroo/ngMeteor#using-meteor-collections)
17-
- [Adding controllers, directives, filters and services](https://github.com/loneleeandroo/ngMeteor#adding-controllers-directives-filters-and-services)
18-
- [Creating and inserting template views](https://github.com/loneleeandroo/ngMeteor#creating-and-inserting-template-views)
19-
- [Routing](https://github.com/loneleeandroo/ngMeteor#routing)
20-
- [Module Injection](https://github.com/loneleeandroo/ngMeteor#module-injection)
15+
- [New Data-Binding to avoid conflict](https://github.com/urigo/ngmeteor#new-data-binding-to-avoid-conflict)
16+
- [Using Meteor Collections](https://github.com/urigo/ngmeteor#using-meteor-collections)
17+
- [Adding controllers, directives, filters and services](https://github.com/urigo/ngmeteor#adding-controllers-directives-filters-and-services)
18+
- [Creating and inserting template views](https://github.com/urigo/ngmeteor#creating-and-inserting-template-views)
19+
- [Routing](https://github.com/urigo/ngmeteor#routing)
20+
- [Module Injection](https://github.com/urigo/ngmeteor#module-injection)
2121

2222
### New Data-Binding to avoid conflict
2323
To prevent conflicts with Meteor's Blaze live templating engine, ngMeteor has changed the default AngularJS data bindings from <code>{{...}}</code> to <code>[[...]]</code>. For example:
@@ -30,7 +30,6 @@ To prevent conflicts with Meteor's Blaze live templating engine, ngMeteor has ch
3030
</div>
3131

3232
### Using Meteor Collections
33-
> If you're upgrading from v0.1 please read this section for changes on using the $collection service.
3433

3534
ngMeteor provides an AngularJS service called $collection, which is a wrapper for [Meteor collections](http://docs.meteor.com/#meteor_collection) to enable reactivity within AngularJS. The $collection service no longer subscribes to a publisher function automatically, so you must explicitly subscribe to a publisher function before calling the $collection service.
3635

@@ -130,8 +129,89 @@ For example:
130129
});
131130

132131
}
132+
133+
134+
### Adding controllers, directives, filters and services
135+
It is best practice to not use globally defined controllers like they do in the AngularJS demos. Always use the exported package scope ngMeteor as your angular module to register your controller with $controllerProvider. Furthermore, to prevent errors when minifying and obfuscating the controllers, directives, filters or services, you need to use [Dependency Injection](http://docs.angularjs.org/guide/di). For example:
136+
137+
ngMeteor.controller('TodoCtrl', ['$scope', '$collection',
138+
function($scope, $collection) {
139+
$collection("todos", $scope);
140+
141+
$scope.addTodo = function() {
142+
$scope.todos.add({text:$scope.todoText, done:false});
143+
$scope.todoText = '';
144+
};
145+
146+
$scope.saveTodo = function(){
147+
$scope.todos.add($scope.todos);
148+
}
149+
150+
$scope.remaining = function() {
151+
var count = 0;
152+
angular.forEach($scope.todos, function(todo) {
153+
count += todo.done ? 0 : 1;
154+
});
155+
return count;
156+
};
157+
158+
$scope.archive = function() {
159+
angular.forEach($scope.todos, function(todo) {
160+
if (todo.done) $scope.todos.delete(todo);
161+
});
162+
};
163+
}
164+
]);
165+
166+
### Creating and inserting template views
167+
A template is defined using the template tags (this could be in a standalone file or included in another file).
168+
169+
<template name="foo">
170+
<h1>Hello, World!</h1>
171+
</template>
172+
173+
You can render this template using handlebars as you would for any other Meteor app:
174+
175+
{{> foo}}
176+
177+
Templates will also be added to the $templateCache of the ngMeteor angular 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 your could use the ng-template directive to render your template like this:
178+
179+
<ANY ng-template="foo"></ANY>
180+
181+
<!--Add the ng-controller attribute if you want to load a controller at the same time.-->
182+
<ANY ng-template="foo" ng-controller="fooCtrl"></ANY>
183+
184+
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.
185+
186+
### Routing
187+
The [ngRoute](http://docs.angularjs.org/api/ngRoute) module developed by the AngularJS team is included in ngMeteor, which will satisfy those with simple routing needs. For example, if you want to call a template called 'foo' and a controller called 'TodoCtrl' when someone lands on your home page you would define your route like this:
188+
189+
ngMeteor.config(['$routeProvider', '$locationProvider',
190+
function($routeProvider, $locationProvider) {
191+
$routeProvider.when('/',{
192+
templateUrl: 'foo',
193+
controller: 'TodoCtrl'
194+
});
195+
196+
$locationProvider.html5Mode(true);
197+
}
198+
]);
199+
200+
For larger applications with more completed routes, it would be wise to consider using the [urigo:angular-ui-router](https://github.com/Urigo/meteor-angular-ui-router) Meteor package for ngMeteor, which exposes the popular [ui-router](https://github.com/angular-ui/ui-router) module to ngMeteor. For those of you that have grown accustomed to the Meteor methods of routing, ngMeteor is compatible with [Iron Router](https://github.com/EventedMind/iron-router).
201+
202+
### Module Injection
203+
If you have a module called myModule, for example:
204+
205+
myModule = angular.module('myModule',[]);
206+
207+
it can be easily injected into ngMeteor like this:
208+
209+
ngMeteor.requires.push('myModule');
133210

134-
We've also updated the meteor-angular-ui-router to support Meteor 0.8.3:
211+
Using this method, additional functionality has been provided to urigo:ngmeteor in the form of separate Meteor packages that expose and inject angular modules into ngMeteor. These packages have been developed by either the ngMeteor Team and/or by third parties. The following is a non-exhaustive list of these packages:
212+
213+
- [urigo:angular-ui-router](https://github.com/Urigo/meteor-angular-ui-router) empowers ngMeteor with the [ui-router](https://github.com/angular-ui/ui-router) module.
135214

136-
- [angular-ui-router](https://github.com/Urigo/meteor-angular-ui-router) empowers ngMeteor with the [ui-router](https://github.com/angular-ui/ui-router) module.
215+
Feel free to make ngMeteor module smart packages, and please contact [urigo](https://github.com/urigo) if you would like your package to be listed here as well.
216+
Be sure to be compatible with Meteor 0.9.0 and above and it's packaging system!
137217

0 commit comments

Comments
 (0)