Meteor+AngularJs example

Question

I am new to Meteor and AngularJs. I am trying to follow the example app on https://github.com/lvbreda/Meteor_angularjs but I have not been able to get it working so far.

I am getting an error 'app is not defined' in this piece of code:

app.controller('MeteorCtrl', ['$scope', '$meteor', function ($scope, $meteor) {
Uncaught ReferenceError: app is not defined
    $scope.todos = $meteor("todos").find({});
    $meteor("todos").insert({
        name: "Do something",
        done: false
    });

I tried to re-write the above as:

var MeteorCtrl = function ($scope, $meteor) {
    $scope.todos = $meteor("todos").find({});
    $meteor("todos").insert({
        name: "Do something",
        done: false
    })
};

which is still throwing an error 'Error: Unknown provider: $meteorProvider <- $meteor'

The only other example of meter+angularjs at https://github.com/bevanhunt/meteor-angular-leaderboard appears to be dated.

Can someone please post a simple, but fully working, downloadable example of meteor+angularjs using the package at https://github.com/lvbreda/Meteor_angularjs?

Babar

Got same problem with my own app, fixed by basing my app on code from github.com/Urigo/meteor-angular-socially. I had files with .tpl extension instead of .ng.html, slightly different folder structure and have used some npm modules, so not sure what really fixed it for me. – Guiltless

Answer 1

I'm obviously biased but our team wrote and maintain this library - angular-meteor and we've also released a tutorial for combining the two - angular-meteor tutorial

Jacquetta

Answer 2

While I'm not using lvbreda's Angular package, I have been able to integrate Angular with Meteor + Blade as the HTML templating language, in a relatively simple way. I started off with Daniel Olano's Ng-Meteor package, and ended up with my own implementation of a Meteor/Angular bridge. I'm new to both Meteor and Angular, but it appears to work well and I like that the code is very transparent so that I understand pretty well how it works.

I've written the following CoffeeScript module, named client/ngMeteor.coffee, which defines the bridge between Meteor and Angular:

define("ngMeteor", [], ->
  angular.module('ngMeteor.directives', [])

  angular.module('ngMeteor.services', [])

  angular.module('ngMeteor.blade', []).run(['$templateCache', '$rootScope', '$compile',
    ($templateCache, $rootScope, $compile) ->
      bodyTemplate = Template.body
      if !bodyTemplate
        throw new Error("A body template must be defined ('body.blade')")

      # Render each template and place in Angular's template cache
      $templateCache.put "#{key}.blade", render() for own key, render of Template

      # Render the body template and have Angular compile it, then inject it into the DOM's body element
      Meteor.startup(()->
        # Necessary?
        Spark.finalize(document.body)
        $('html').attr('data-ng-app', '')
        $('body').html($compile(bodyTemplate())($rootScope))
        $rootScope.$apply()
      )
  ])
  angular.module 'ngMeteor', ['ngMeteor.blade', 'ngMeteor.services', 'ngMeteor.directives']
)

For a full working example see this example project of mine. Feedback is appreciated.

Rooftop

Nice to see it's useful to somebody, I started it for a personal project but then I had to work in something else. I think I'll resume this project soon so it can have more features. – Enallage

Answer 3

I just created a simple example which shows how to create a simple angular-meteor application.

The app displays some items from a mongo collection and can update the collection through the browser-console in realtime. (just default meteor features with angular-js)

It can be found on github: https://github.com/tom-muhm/angular-meteor-example.

Bryce

Answer 4

You can find some examples in a different fork https://github.com/alex-okrushko/Meteor_angularjs

I build an app in https://github.com/linepos/linepos but now it's not working because lvbreda changed the code

There is a different approach you can use https://github.com/kievechua/flame-on

Joinery

Yes, most of the examples out there are very old. It would be nice if there was a current, working example. Are you able to fix your linepos example? – Babar

Answer 5

Just had the same problem. Solved by adding meteor dependency

angular.module('meteorapp', ["meteor"]) # <------------------- Here
.config ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
  $locationProvider.html5Mode(true)
  $routeProvider.when '/',
   controller: 'home'
]

Anyway

Answer 6

I am also new to Meteor and Angular - and I also had a hard time to make this work. But I think I managed to get the basic Angular functionality running.

What I found out I put onto github: https://github.com/dirkk0/angularjs-meets-meteorjs

I hope this works for you, too.

Fuge

Answer 7

I've been going at this problem myself and made a package for angural. example code is at: https://github.com/bramtervoort/meteor-angular-stack/tree/example example at: http://bramtervoort-todo.meteor.com

Its very simple just install meteor and run: mrt add angular-stack

Eniwetok

Answer 8

My answer will be simple: don't mix meteor and angular!

Why should you? For the data binding capabilities? Meteor does it for you much simpler than angular with helpers and the publish/subscribe mechanism.

To build you own directives? Meteor templates and Blaze do that for you too.

After having used angular for quite a while, I've used meteor recently and find it so much simpler: much less code to achieve the same, cleaner declaration of directives, a whole lot is done for you in the background, especially for pulling subsets of data.

There is no need to use angular with meteor, just use meteor. I haven't yet found a case where I needed angular with it.

The hardest concept to grasp in meteor is the publish subscribe model but once you get it, it is very powerful as you can define what data is pushed to the client with parameters. Then all you need is a template to render it.

Lookup this article for more details https://www.discovermeteor.com/blog/understanding-meteor-publications-and-subscriptions/

EDIT: Jan 2016

Looking at benchmarks of Angular 2 in Meteor, I now can see a reason maybe to use it. That was definitely not the case with prior versions:

See the article: http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor

Angular 1.x was way way slower than Blaze and React just 6 months ago. Angular 2 seem way better, yet I'm still not a fan of the over-complexity.

For simplicity AND speed, also look up Aurelia.io built by former Angular lead and designed to last and move with the Javascript framework itself.

Joceline

In my case? Because of Ionic. – Chlamydate