meteor / simple-todos-angular

The Meteor Tutorial "simple-todos" app, the angular-meteor version, with one commit per tutorial step so that you can follow along.

---

Meteor is an ultra-simple environment for building modern web applications.

---

• Official Website
• Installation
• Documentation

---

📚 Create your applications using modern JavaScript

Benefit from the latest technology updates to rapidly prototype and develop your applications.

---

✨ Integrate technologies you already use

Use popular frameworks and tools right out-of-the-box. Focus on building features instead of configuring disparate components yourself.

---

💻 Build apps for any device

Use the same code whether you’re developing for web, iOS, Android, or desktop for a seamless update experience for your users.

---

🔥 Getting Started

How about trying a tutorial to get started with your favorite technology?

React
Blaze
Vue
Svelte

Next, read the documentation and get some examples.

🚀 Quick Start

On your platform, use this line:

> npm install -g meteor

🚀 To create a project:

> meteor create my-app

☄️ Run it:

cd my-app
meteor

🧱 Developer Resources

Building an application with Meteor?

• Deploy on Meteor Cloud
• Discuss on Forums
• Join the Meteor community Slack by clicking this invite link.
• Announcement list. Subscribe in the footer.

Interested in helping or contributing to Meteor? These resources will help:

• Core development guide
• Contribution guidelines
• Feature requests
• Issue tracker

To uninstall Meteor:

• If installed via npm, run:

  meteor-installer uninstall

• If installed via curl, run:

  rm -rf ~/.meteor 
  sudo rm /usr/local/bin/meteor

To find more information about installation, read here.

simple-todos-angular's Issues

2. Templates | Replace simple-todos.css with this code

"Replace simple-todos.css with this code"
should be:
"Replace simple-todos-angular.css with this code"

follow the tutorial todolist ,why Error: Cannot find module 'angular'

as subject.
please help!

The test is failed

The test it('can delete owned tasks') is failed with the following output:
Error: Meteor.userId can only be invoked in method calls. Use this.userId in publish functions. at AccountsServer.userId (packages/accounts-base/accounts_server.js:82:13) at Object.Meteor.userId (packages/accounts-base/accounts_common.js:237:19) at Object.tasksRemove (imports/api/tasks.js:41:31) at Test.<anonymous> (imports/api/tasks.test.js:27:20) at run (packages/practicalmeteor:mocha-core/server.js:32:29) at Context.wrappedFunction (packages/practicalmeteor:mocha-core/server.js:61:33)

So when i go to tasks.js and replace Meteor.userId() by this.userId the test pass.
Any explanation please!

.

.

TypeError

TypeError: Cannot read property 'Push' of undefined

Delete/Remove Task Enabled For All Users

I noticed that my project allows anyone (including people who are not logged in) to remove a list item.
I have double checked the logic in my JS file and it appears to be exactly the same.
Here's my code: https://github.com/taky2/social-group-list

Also, on the last steps of the tutorial I ran into some issues with bcrypt.
I posted my solution here: meteor/meteor#5009

ReferenceError: Template is not defined

Hello there, while following the tutorial, in step 9 after include the blaze template, this is not rendered in the browser, so inspecting I found that ReferenceError: Template is not defined with the blaze template, what am I missing??

Routes

I'm failing miserably trying to add routes to this tutorial but using the approach shown in Angular-Meteor - Socially, which seems to have factored the entire code in a bit different manner.

What is the correct way of adding routes to this app?

PS: sorry, I know this isn't a bug, but there's limited resources for angular-meteor so there's not much choice I have

"$scope.viewModel(this)" is not documented

Step 3.3 at [1] uses following code which doesn't seem to be explained or documented anywhere:

$scope.viewModel(this);

There is also a related StackOverflow question[2] which no-one has been able to answer yet.

[1] https://www.meteor.com/tutorials/angular/collections
[2] http://stackoverflow.com/questions/37831978/difference-between-reactivethis-attachscope-and-scope-viewmodelthis

Error in Angular Simple-Todos tutorial docs

I think there may be an error with this code in the Angular-Meteor tutorial on Meteor.com. When you you come to the part of the tutorial that has you rebuild the template, the code reads:

<!-- replace the existing task template with this code -->
<li ng-class="{'checked': task.checked}">
  <button class="delete" ng-click="tasks.remove(task)">&times;</button>

  <input type="checkbox" ng-model="task.checked" class="toggle-checked" />

  <span class="text"></span>
</li>

So if the code is copied exactly you won't be templating any values into the span, and the app breaks!

Step 8.7: Helper currentUser does not return Mongo.Cursor

According to documentation[1], Angular helpers must always return Mongo.Cursor. However step 8.7 [2] defines a currentUser helper which does not return Mongo.Cursor:

currentUser() {
  return Meteor.user();
}

[1] http://www.angular-meteor.com/api/1.3.11/helpers
[2] https://www.meteor.com/tutorials/angular/adding-user-accounts

Syntax Error

Problem in file https://github.com/meteor/simple-todos-angular/blob/master/simple-todos-angular.html
Uncaught SyntaxError: missing ) after argument list

<body ng-include="'todos-list.ng.html'" ...

Error in Step6: Cannot run on ios device

Hi,
My meteor version is 1.4.2.7 and Xcode is 7.2.1.
By meteor run ios I got an error as follows:

The following build commands failed:
  CompileSwift normal i386
  /Users/gaomengzhen/Documents/web/angularJS/meteor/angular-todos/simple-todos/.meteor/local/cordova-build/platforms/ios/simple-todos/Plugins/cordova-plugin-meteor-webapp/WebAppLocalServer.swift
  CompileSwift normal i386
  /Users/gaomengzhen/Documents/web/angularJS/meteor/angular-todos/simple-todos/.meteor/local/cordova-build/platforms/ios/simple-todos/Plugins/cordova-plugin-meteor-webapp/WebAppConfiguration.swift
  CompileSwift normal i386
  /Users/gaomengzhen/Documents/web/angularJS/meteor/angular-todos/simple-todos/.meteor/local/cordova-build/platforms/ios/simple-todos/Plugins/cordova-plugin-meteor-webapp/AssetBundleManager.swift
  CompileSwift normal i386
  /Users/gaomengzhen/Documents/web/angularJS/meteor/angular-todos/simple-todos/.meteor/local/cordova-build/platforms/ios/simple-todos/Plugins/cordova-plugin-meteor-webapp/AssetBundle.swift
  CompileSwiftSources normal i386 com.apple.xcode.tools.swift.compiler
  (5 failures)
  Error code 65 for command: xcodebuild with args:
  -xcconfig,/Users/gaomengzhen/Documents/web/angularJS/meteor/angular-todos/simple-todos/.meteor/local/cordova-build/platforms/ios/cordova/build-debug.xcconfig,-project,simple-todos.xcodeproj,-target,simple-todos,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS
  Simulator,build,CONFIGURATION_BUILD_DIR=/Users/gaomengzhen/Documents/web/angularJS/meteor/angular-todos/simple-todos/.meteor/local/cordova-build/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/gaomengzhen/Documents/web/angularJS/meteor/angular-todos/simple-todos/.meteor/local/cordova-build/platforms/ios/build/sharedpch
  at ChildProcess.exitCallback (/tools/utils/processes.js:151:23)
  at emitTwo (events.js:87:13)
  at ChildProcess.emit (events.js:172:7)
  at Process.ChildProcess._handle.onexit (internal/child_process.js:211:12)
  => awaited here:
  at Function.Promise.await
  (/Users/gaomengzhen/.meteor/packages/meteor-tool/.1.4.2_7.1lrwnre++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/isopackets/cordova-support/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:35:12)
  at CordovaProject.runCommands (/tools/cordova/project.js:715:22)
  at CordovaProject.run$ (/tools/cordova/project.js:261:10)
  at tryCatch
  (/Users/gaomengzhen/.meteor/packages/meteor-tool/.1.4.2_7.1lrwnre++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/regenerator-runtime/runtime.js:63:40)
  at GeneratorFunctionPrototype.invoke [as _invoke]
  (/Users/gaomengzhen/.meteor/packages/meteor-tool/.1.4.2_7.1lrwnre++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/regenerator-runtime/runtime.js:337:22)
  at GeneratorFunctionPrototype.prototype.(anonymous function) [as next]
  (/Users/gaomengzhen/.meteor/packages/meteor-tool/.1.4.2_7.1lrwnre++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/regenerator-runtime/runtime.js:96:21)

I tried

reinstall Xcode 
remove and add platform
rm -rf .meteor/local/cordova-build

but not work.

And I also tried meteor run ios-device and got many compile errors on WebAppLocalServer.swift, AssetBundleManager.swift and Utility.swift

Anyone could help me?
Thanks so much.

The angular content is not rendering

bugs after update to meteor 1.2.0.1

some packages seems to have been moved around. to make the angular example app work again try this:

if the login buttons do not show up install the blaze-template package

meteor add urigo:angular-blaze-template

and change the template call in todos-list.ng.html from:

<meteor-include src="loginButtons"></meteor-include>

to

<blaze-template name="loginButtons"></blaze-template>

in case you get the following error in the console:

ReferenceError: EJSON is not defined

you may need to add the EJSON package:

meteor add ejson

this will also fix the problem, when switching between private/public states of one item will add the same item over and over again in different opened sessions.

it also seems the current urigo:angular package does not work with meteor. therefor i updated it to the latest version:

meteor add urigo:[email protected]

just to find out, that this package is marked as deprecated. so i removed it and added the suggested one:

meteor remove urigo:angular
meteor add angular

also when creating an android app i was asked to install git - not sure if this was necessary before:
sudo zypper install git-core

hope that helps some meteor noobs like me..

Completed task checkbox drops collection at commit f11a875b

Update: After a little debugging, it seems this error was being caused by the incompleteCount function. Specifically, calling the query: return Tasks.find({ checked: {$ne: true} }); with incompleteCount() in the view.

A solution that fixes this bug is:

in simple-todos-angular.js bind the filtered meteor collection to a $scope variable with $meteor.collection

    $scope.incompleteCount = $meteor.collection(function() {
        return Tasks.find({ checked: {$ne: true} });
      });

then in todos-list.ng.html, render the length of the collection in the context of the variable

<h1>Todo List ( {{ incompleteCount.length }} )</h1>

This allows this value to react dynamically on the page, without creating a conflict!

---

I wasn't able to debug the cause entirely (working on that now), but it seems there is some sort of $scope conflict that occurs when you toggle the "Hide Completed Tasks" box on and off, then change the state of the boxes for an individual task( or create a new task), and try to hide again. The $scope.query is cycling just fine, but something is causing the hide box to subsequently drop the whole collection. This seems to resolve once the validation and CRUD methods are are implemented instead of the helpers( and after watching the console it seems to be related to class changes), but just wanted to point it out! To replicate this bug:

1. Clone and run app at commit "Add an option to hide completed tasks, and show incomplete task count" ( f11a875 )
2. Enter three tasks, check one as finished.
3. Check the hide box ( checked task will disappear )
4. Uncheck the hide box ( hidden task returns properly )
5. Uncheck the task in the list.
6. Toggle hide box again.
7. Whole collection is removed from page and dropped from db (verified in Mongo shell)

Screenshots of bug in action:

Users interface

I do not see the user interface
http://i.imgur.com/O5geN6J.jpg

Attempting to add user accounts (Step 9)

Every time I use the command:
meteor add accounts-password dotansimha:accounts-ui-angular as provided in the tutorial, I get the following response:

I tried to do the environment variables but I don't think I'm using Meteor behind a proxy... I am using Windows 7.

$root.currentUser isn't reactive

When I'm trying to login, there is no form to add new task. It will appear after page refresh. It seems it is not reactive. But if I made small change from $root.currentUser to $auth.currentUser and from $root.currentUser._id to $auth.currentUser._id in the simple-todos-angular.html file it works as it should.

erreur tutorial meteor/angular simple-todos-angular.js

line 54 : return Tasks.find({ checked: {$ne: true} }).count();
replace by : return Tasks.find({},{ checked: {$ne: true} }).count();

2. Templates | Replace simple-todos.css with this code

"Replace simple-todos.css with this code"
should be:
"Replace simple-todos-angular.css with this code"

Deprecated warnings in console

The last step in tutorial makes following deprecated warnings in console:

2016-01-12 00:11:48.193 angular-meteor-user.js:87 [angular-meteor.$rootScope.currentUser/loggingIn] Please note that this functionality has migrated to a separate package and will be deprecated in 1.4.0.  For more info: http://www.angular-meteor.com/api/1.3.2/auth
2016-01-12 00:11:48.243 angular-meteor-camera.js:9 [angular-meteor.camera] Please note that this module has moved to a separate package and is deprecated since 1.3.0 and will be removed in 1.4.0! For more info: http://www.angular-meteor.com/api/1.3.0/camera
2016-01-12 00:11:48.244 angular-meteor-subscribe.js:11 [angular-meteor.subscribe] Please note that this module is deprecated since 1.3.0 and will be removed in 1.4.0! Replace it with the new syntax described here: http://www.angular-meteor.com/api/1.3.1/subscribe
2016-01-12 00:11:48.245 angular-meteor-collection.js:15 [angular-meteor.$meteorCollection] Please note that this method is deprecated since 1.3.0 and will be removed in 1.4.0! For more info: http://www.angular-meteor.com/api/1.3.0/meteorCollection

From Example

Remove from example in step 2:
ng-app="simple-todos"

Otherwise error will appear in console:
WARNING: Tried to load angular more than once.