Meteor Todo App with Angular


#1

Two problems thus far:

  1. Clicking on the Remove button shows the following stack-trace in Chrome console:

ReferenceError: check is not defined
at Array.angularMeteorCollection.factory.AngularMeteorCollection.remove (http://localhost:3000/packages/angular.js?2214699c9abb7ebfd3b86fbded3d47d8e097cbf5:687:7)
at fn (eval at (http://localhost:3000/packages/angular_angular.js?feeaf4750c9fd3ceafa9f712f99a21ee6fef9b41:13306:15), :4:358)
at ngEventDirectives.(anonymous function).$rootScope.compile.element.on.callback (http://localhost:3000/packages/angular_angular.js?

2.‘Hide Completed Tasks’ button is not reactive, i.e., clicking on it hides the task in the current browser. But the other browser does not reactively hide it.

Is this working for anyone? I am using Meteor 1.2 and the new angular package to run the tutorial.


#2

I’m having the same problem with remove. Haven’t gotten to the Hide Completed Tasks part yet.


#3

For the hide Completed tasks part, I don’t believe that is intended to happen reactively. the only data that is getting synchronized between the client and server is that inside the mongo collections. Since this is just a scope variable, it only exists inside the browser.


#4

I ran into the same issue. It looks like the angularMeteorCollection is using the check function.
Add these packages and you should be able to continue.

meteor add check
meteor add ejson

Hope this helps

Link to issue on Github and fix


#5

Sorry about that, just released a new version with the required dependency:
angular@1.0.0-rc.7

Please let me know if that helped


#6

@koushi, I manually added the packages and remove worked. Thanks.
@Urigo, suppose I wanted to make the ‘Hide Completed Tasks’ functionality Reactive? How will I do that? The meteor way? Just create a session variable to hold the state of hide check box and handle it that way?
Please let us know.
Thanks.


#7

@bruparel I think you mean a specific kind of reactive.
You want reactivity between the client and the server.
For that a session variable or $scope data are not enough as they are on the client side and in the step you are using Hide Completed you already use publications.

So I think the short answer is that you should learn more about Meteor’s publish/subscribe mechanism.
The long answer is that I think you should do this chapter in the advanced tutorial: http://angular-meteor.com/tutorials/angular1/privacy-and-publish-subscribe-functions
Read the reference chapters at the end of the chapter, and then do this chapter: http://angular-meteor.com/tutorials/angular1/search-sort-pagination-and-reactive-vars

Those should give you a good grasp on that mechanism.


#8

Thanks Uri. I will go through the chapters that you list above and get back to you. On to the advanced tutorial :smile:

One more question: I went through the Todos tutorial with React. That worked flawlessly. I really like the ES6 (oops! I mean Ecmascript2015) usage. It is really great. Do you have plans on upgrading the angular tutorials, both Todos and Advanced, to ES6? That would be great. Are there any new Meteor/ES6 tutorials available?


#9

Yes I definitely planning to do that, most likely using the Angular2.0Now package:

More updates soon…


#10

Hello Uri,
I think your advanced tutorial is still broken. I can’t get past the Step 0 - Bootstrapping.

After you hit 0.6 Include the angular main file inside the index.html file

and restart meteor

You wil get the following error in console:

=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:

While processing files with templating (for target web.browser):
index.html:2: Expected space
…ude="‘index.ng.html’"
^
index.ng.html:1: Expected one of: , ,

=> Your application has errors. Waiting for file change.

What is wrong?

Bharat


#11

Look at the first line right after the code snippet:
“But if you load this in your browser, you won’t see anything. That’s because we still need to create the actual Angular app, which we’ll do next.”


#12

There is definitely something wrong with your current version of meteor out there. I ‘git cloned’ your repository and checked out the commit bbfd83570475010601c86f8f66d22d683cab310e
This commit corresponds to Step 0 - step 9.
that works fine. So the only difference that I see is the
meteor add angular
command. I hope this helps you isolate the problem.
Bharat


#13

Can you please upload your version?
Because like you said, it is working in the tutorial… (the updated tutorial uses angular, not urigo:angular)


#14

Hey Uri,It is working now. I do not understand what happened.I had deleted (rm -rf socially/) directory. Recreated it and it works now.I had downloaded and installed your angular package last night, so between last night and now if a new version of package was uploaded then that will explain it.Anyway, I am moving again.Thanks.Bharat


#15

Hello Uri,
I am on the Step 9 - Privacy and Public and Subscribe Functions - part of your tutorial. Everything is working fine. And I now understand your answer to my question above. Thank you.

Are you going to update your Angular tutorials to work with ES6?

Regards,

Bharat


#16

It’s great to hear that, please keep the feedback coming.

About ES2015, definitely.
I’m working now to add Meteor’s the new build process to the angular-meteor package and then add a chapter with best practices using ES2015.
Most likely it will be based on the Angular2.0Now library and will be very similar to the examples there.