meteor / tutorials Goto Github PK

View Code? Open in Web Editor NEW

182.0 38.0 103.0 1.35 MB

The Meteor tutorials from meteor.com

Home Page: https://www.meteor.com/tutorials

License: MIT License

JavaScript 72.90% HTML 15.57% Ruby 11.53%

tutorials's Introduction

We no longer use this repository, we have now different repos for each technology:

Official Meteor tutorials

This repository contains the content and view code for the official Meteor tutorials at meteor.com.

Feel free to submit a pull request to improve the content!

Tutorial content

Tutorial step-by-step repositories

We also maintain all of the tutorials as step-by-step git repositories here:

Tutorial viewer

If you are editing the tutorials, use this simple app to view them: https://github.com/meteor/tutorial-viewer

Tutorial workflow

Editing the prose

Just edit the markdown files in /content/.

Editing code snippets

The code snippets are generated from the step-by-step git repositories which are git submodules in /repos. Each code snippet is its own commit. Commit messages follow the following format:

Step 3.1: Add some feature

You might also want to make sure that all of your files end with a newline so that you don't get an annoying "No newline at end of file" diff.

After using git rebase -i --root to massage the repository into the desired state, run the script to update the generated files:

./scripts/process-repo.rb blaze

The commit with this message can then be included in the content with the following code snippet:

{{> DiffBox step="3.1" tutorialName="simple-todos"}}

You should replace simple-todos with the correct tutorial name (defined by calling DiffBox.registerTutorial).

You're done! Make sure to commit the changes to all of the generated files.

Repository layout

This repository is a Meteor package; it's currently not published, but you can clone it and use it as a local package in an app.

The different parts of the repository have quite different responsibilities, but they are somewhat tightly coupled so it doesn't make sense to split them into separate packages at this point.

/content/ The actual tutorial prose content, in Markdown format.
/generated/ (don't edit manually) This directory contains Git patch files generated from the step-by-step repos.
/repos/ This directory contains git submodules of all three step-by-step tutorial repositories.
/scripts/ This contains a script that is used to update /generated/ from the repositories in /repos/.

Updating Sub Modules

git submodule update --init --recursive
meteor

tutorials's People

Contributors

Stargazers

Watchers

Forkers

jbaxleyiii lzl edwardpark scamianbas jookwang-park postalservice14 buddyli hellios78 botched135 ayushpacheriwala geoxm pkdevbox danielnkf jemmy655 akaliza eluck quki abhaykumar1415 lcnbala nivir privatemousse e2eit vscholz samudranb ekwivagg do2mi4so rljusticio yaliceme mdorn theoptips gadicc calvinfu1128 nicholaspsmith jacobvarner nlhuykhang white-ubuntu sabrirh adriane26 ashfaqrafi h1net meteorhub lporras wtcoin lucfranken lucasisasmendi akdev123 cassiomendiate marktinsley orenfromberg maangie abernix raghucse2010 m3rryqold timtech4u aowongster kurapikats catchabhisek aftoledo leahelisabeth danilopaez radhikari54 doubledherin moberhuber pugna23 hwillson loudowl ofir-petrushka alexandesigner mahdiyeh utoo1973 cur33 willhayslett coagmano davidelliottfmp chitrank-dixit heoa phocks adiian michaeljcole jazeee crushford hobo71 somarribasaul dr4co m1xm dipakyadav benlachman miramax68 sumit4613 daynin chris-tse designemail chris-visser mfr78 mphschmitt diegocba9210 monaeslah

tutorials's Issues

Viewing the 1.2.1 based tutorials

Is there still a way to view the 1.2.1 based tutorials? The reason I ask is that I'm currently mid-way through teaching a class on Meteor and a number of the students (whom are on Windows machines) have had issues upgrade to 1.3.

Many thanks in advance 👍

What's the Purpose of hideCompleted() in Simple-Todos?

The Simple-Todos tutorial features Session in Step 8. On that page, there's a function called hideCompleted() - its purpose is not entirely clear.

hideCompleted: function () {
  return Session.get("hideCompleted");
}

Which is used in the template:

<input type="checkbox" checked="{{hideCompleted}}" />

There doesn't seem to be any need in it. A checkbox becomes checked when a user presses on it. And if you refresh the page, the contents of the Session object will be gone anyway.

Having that function and using it in the template makes it a confusing tutorial, as it has things which are not necessary.

Tasks DB items not displaying in web app

Mongo shell displays the 'Tasks' DB items, but the web app http://localhost:3000/ does not show any of the db items; http://localhost:3000/ still shows an empty list like before I create the Tasks DB.

Angular Tutorial Step 2: blaze-html-templates and ecmascript packages are not in project

The commands in step 2 of the Angular tutorial:

meteor remove blaze-html-templates
meteor remove ecmascript

both return "blaze-html-templates/ecmascript is not in this project." So it's perhaps little surprise that when Angular is added none of the Angular directives seem to work. I tried removing meteor-platform as suggested at this stackoverflow answer but that causes everything to break.

These are the packages in my packages file:

meteor-platform
autopublish
insecure
angular

That matches the output when I run meteor list

List bullets different color - React Tutorial

In step 2, my result looked different enough from what it's supposed to look like that I examined each line of code to see if any thing was missing. I don't think any thing is missing. Still not sure whether I did something wrong, but don't think I did. If different results may vary in color, may be helpful to say that.
Mine:

What it said it was supposed to look like:

ReactDOM.render vs React.render

As of React version 0.14, DOM stuff like React.render is moved into ReactDOM

If possible the tutorial should reflect this

(STDERR) Error: Cannot find module './body.html'

This happens after the second step of the general tutorial (i.e. using Blaze). Note that I am running this on a Mac.

I have everything set up as the tutorial asks.

body.js gets imported fine from main.js
client/main.js

import { Meteor } from 'meteor/meteor';

// Import Local Modules
import '../imports/ui/body.js';

Meteor.startup(() => {
  // code to run on server at startup
});

imports/ui/body.js

import { Template } from 'meteor/templating';

import './body.html';

Template.body.helpers({
  tasks: [
    { text: 'This is task 1' },
    { text: 'This is task 2' },
    { text: 'This is task 3' },
  ],
});

imports/ui/body.html

<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>

<template name="task">
  <li>{{text}}</li>
</template>

Showing a count of incomplete tasks not rendering on angular tutorial

Todo List ( {{ incompleteCount() }} )

The above on Fig 8.6 on step 8 of the Todo app with Angular does not render the count. Error "}} expected"

Should be:

Todo List ( {{ incompleteCount }} )

Blaze tutorial 02, css file name

In the templates tutorial for Blaze, you are instructed to copy a blob of CSS into the simple-todos.css file, however this file isn't included in the automatically generated project. Putting the css into main.css seems to have done the intended thing.

Perhaps the filename in the tutorial should be changed?

Cannot find module './_baseClone'

Following the first few steps from https://www.meteor.com/tutorials/angular/creating-an-app and face error.. module.js:338:15: Cannot find module './_baseClone'

C:\Users\Administrator\Desktop>meteor create simple-todos
Created a new Meteor app in 'simple-todos'.

To run your new app:
cd simple-todos
meteor

If you are new to Meteor, try some of the learning resources here:
https://www.meteor.com/learn

C:\Users\Administrator\Desktop>cd simple-todos

C:\Users\Administrator\Desktop\simple-todos>meteor
[[[[[ C:\Users\Administrator\Desktop\simple-todos ]]]]]

=> Started proxy.
=> Started MongoDB.
Errors prevented isopacket load:

While loading isopacket ddp:
module.js:338:15: Cannot find module './_baseClone'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-os.w
indows.x86_32\isopackets\ddp\npm\node_modules\meteor\babel-compiler\node_modules
\babel-plugin-transform-es2015-modules-commonjs\node_modules\babel-types\node_mo
dules\lodash\clone.js:1:17)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-os.w
indows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-os.w
indows.x86_32\isopackets\ddp\npm\node_modules\meteor\babel-compiler\node_modules
\babel-plugin-transform-es2015-modules-commonjs\node_modules\babel-types\lib\ind
ex.js:314:38)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-os.w
indows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-os.w
indows.x86_32\isopackets\ddp\npm\node_modules\meteor\babel-compiler\node_modules
\babel-plugin-transform-es2015-modules-commonjs\node_modules\babel-template\lib
index.js:84:43)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-os.w
indows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-os.w
indows.x86_32\isopackets\ddp\npm\node_modules\meteor\babel-compiler\node_modules
\babel-plugin-transform-es2015-modules-commonjs\lib\index.js:525:46)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-os.w
indows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module.load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object..extend.Npm.require (C:\tools\isobuild\bundler.js:1570:22)
at Object.require (C:\tools\isobuild\bundler.js:1547:11)
at Package (packages/babel-compiler/babel-compiler.js:17:1)
at packages/babel-compiler/babel-compiler.js:356:1
at packages/babel-compiler/babel-compiler.js:356:1

=> Errors prevented startup:

While loading plugin compile-ecmascript from package ecmascript:
module.js:338:15: Cannot find module './_baseClone'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\ecmascript\0.4.4\plugi
n.compile-ecmascript.os\npm\node_modules\meteor\babel-compiler\node_modules\babe
l-plugin-transform-es2015-modules-commonjs\node_modules\babel-types\node_modules
\lodash\clone.js:1:17)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-o
s.windows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\ecmascript\0.4.4\plugi
n.compile-ecmascript.os\npm\node_modules\meteor\babel-compiler\node_modules\babe
l-plugin-transform-es2015-modules-commonjs\node_modules\babel-types\lib\index.js
:314:38)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-o
s.windows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\ecmascript\0.4.4\plugi
n.compile-ecmascript.os\npm\node_modules\meteor\babel-compiler\node_modules\babe
l-plugin-transform-es2015-modules-commonjs\node_modules\babel-template\lib\index
.js:84:43)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-o
s.windows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\ecmascript\0.4.4\plugi
n.compile-ecmascript.os\npm\node_modules\meteor\babel-compiler\node_modules\babe
l-plugin-transform-es2015-modules-commonjs\lib\index.js:525:46)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-o
s.windows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module.load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object..extend.Npm.require (C:\tools\isobuild\bundler.js:1570:22)
at Object.require (C:\tools\isobuild\bundler.js:1547:11)
at Package (packages/babel-compiler/babel-compiler.js:17:1)
at packages/babel-compiler/babel-compiler.js:356:1
at packages/babel-compiler/babel-compiler.js:356:1

While loading plugin compileTemplatesBatch from package templating:
module.js:338:15: Cannot find module './_baseClone'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\templating\1.1.10\plug
in.compileTemplatesBatch.os\npm\node_modules\meteor\babel-compiler\node_modules
babel-plugin-transform-es2015-modules-commonjs\node_modules\babel-types\node_mod
ules\lodash\clone.js:1:17)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-o
s.windows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\templating\1.1.10\plug
in.compileTemplatesBatch.os\npm\node_modules\meteor\babel-compiler\node_modules
babel-plugin-transform-es2015-modules-commonjs\node_modules\babel-types\lib\inde
x.js:314:38)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-o
s.windows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\templating\1.1.10\plug
in.compileTemplatesBatch.os\npm\node_modules\meteor\babel-compiler\node_modules
babel-plugin-transform-es2015-modules-commonjs\node_modules\babel-template\lib\i
ndex.js:84:43)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-o
s.windows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.
(C:\Users\Administrator\AppData\Local.meteor\packages\templating\1.1.10\plug
in.compileTemplatesBatch.os\npm\node_modules\meteor\babel-compiler\node_modules
babel-plugin-transform-es2015-modules-commonjs\lib\index.js:525:46)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Module.Mp.load
(C:\Users\Administrator\AppData\Local.meteor\packages\meteor-tool\1.3.3\mt-o
s.windows.x86_32\dev_bundle\lib\node_modules\reify\node\runtime.js:16:23)
at Function.Module.load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object..extend.Npm.require (C:\tools\isobuild\bundler.js:1570:22)
at Object.require (C:\tools\isobuild\bundler.js:1547:11)
at Package (packages/babel-compiler/babel-compiler.js:17:1)
at packages/babel-compiler/babel-compiler.js:356:1
at packages/babel-compiler/babel-compiler.js:356:1

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

.jshintrc to use when following along?

Hi!
Thanks for a great tutorial. I'm following along and it's clear what's what.

My editor keeps marking JSHint errors pretty much everywhere since this is a new combo. Do you have a decent .jshintrc to share?

A few minor issues.

Simple Todos React Tutorial, Step 8
Text:
One more feature: Showing a count of incomplete tasks
... Since we already have the data in the client-side Minimongo collection
Comment:
Minimongo is mentioned but never presented in earlier tutorial's steps.
Tutorial may be first React's user reading.
Simple Todos React Tutorial, Step 10
Text:
... we will discuss this a bit later in the section titled Latency compensation.
Comment:
Section name is Optimistic UI.
Simple Todos React Tutorial, Step 10
Text:

We can add extra validation logic to setChecked and deleteTask in later steps when users can make tasks private
Comment:
deleteTask is, actually, named as removeTask.

imports/ui/body.js line 3 import '/body.html';

had to use import '/body.html';
import './body.html'; produced a screenshot below
file tree attached as well

React: securing delete/check methods for tasks you can't see

Minor issue with the logic of the React tutorial: in the Publish and Subscribe "Extra method security" section, it's adding "checks to our deleteTask and setChecked methods to make sure only the task owner can delete or check off a private task" - but surely this doesn't make sense as, by this stage, a user who isn't the owner of a private task can't see it, so couldn't delete/check it anyway?

Thanks

Wrong css filename in Todo app with Angular

In the section Adding CSS a wrong filename is being used simple-todos.css instead of simple-todos-angular.css

I did a PR, hope that works for you. If you want I can also fix the blaze and react tutorials.

Wonderful. I wish, it could be 6 months ago.

Error: EPERM, mkdir

i'm getting this error every time I try to create the app.
i'm competley new to this and don't know what to do.
please help.

[react tutorial] Missing return statement on renderTasks()

line number 12 should have 'return' else renderTasks return [undefined, undefined, undefined]

Latest todo app with angular giving some issue with ng-include

SyntaxError: missing ) after argument list
document.body.setAttribute('ng-include', ''todos-list.ng.html'');

Angular Tutorial Step 9 Runtime Error

I'm just going through the Angular tutorial and encountered an error after completing step 9, switching to methods for security. The error is as follows:

Exception while invoking method 'tasks.setChecked' Error: Match error: Expected string, got object

The following code was added in step 9:

'tasks.setChecked' (taskId, setChecked) {
    check(taskId, String);
    check(setChecked, Boolean);

    Tasks.update(taskId, {
      $set: {
        checked: setChecked
      }
    });

Basically, it considers taskId (passed in as task._id) to be an object instead of a String so the check fails.
Commenting out the check eliminates the error.

So
(1) something might need to be changed in the tutorial and
(2) why does it fail on the setChecked method, but not on the remove method?

Isn't Template.body confusing?

I did the Blaze version of the tutorial recently, and I found it a little bit confusing that it uses Template.body when there is no actual template named body. I realize this is a special case for the body tag, but I wonder if it's a good idea to introduce special cases at such an early stage? Or am I the only one who found that confusing?

Grammar (Missing Word)

Add a word to make this sentence make sense.

This is 'because' Meteor ships by default with support for many features of ES2015...

Process-repo script not updating new changes

Hey there!

I left out naming a step in my code repo and when I came back to run the script, the generated log doesn't have the updated info, so it's not showing that step in the viewer.

The changes were pushed to git and show up on my git log. Is there some sort of cache that I need to clear to regenerate the updated data?

Angular tutorial step 2.4 missing clarification

Thanks for being part of such a great software product and taking the time to create the tutorials for it. My query was regarding step 2.4 of the angular tutorial, in the code snippet following the text "Let's create a template for todosList component.". It doesn't say exactly how to "create a template".... and the filename mentioned doesn't give any clues as to how it gets there: "imports/components/todosList/todosList.html" These directories were not listed in the first section ("all of the files that a Meteor app needs"). I have no problem creating the directories (and file), but it would be nice to be told that I have to do this, and why the directory structure needs to be this way. I thought there might be a command to automatically create all these files, but my lack of this specific knowledge was why I attempted the tutorials in the first place.

I browsed the change history of this tutorial page and noticed that this verbiage has changed several times - the last change of it was from "Now let's create a simple Angular list repeater", which doesn't make a lot of sense either. Maybe this tutorial is for users more advanced than myself?

Nice to add 'copy to clipboard' button on tutorial code

Nice to add 'copy to clipboard' button on tutorial code. Right now select copy and paste you get blank lines between each line of code.

Followed the angular guide all the way, but fails to get security running (Mac)

After I have added the login system (blaze-template) I get the dropdown but nothing happens when I click it.
I followed the guide step by step..

Using the following packages:
accounts-password 1.1.4 Password support for accounts
accounts-ui 1.1.6 Simple templates to add login widgets to...
angular 1.0.4 Everything you need to use AngularJS in ...
autopublish 1.0.4 (For prototyping only) Publish the entir...
blaze-html-templates 1.0.1 Compile HTML templates into reactive UI ...
ecmascript 0.1.6 Compiler plugin that supports ES2015+ in...
es5-shim 4.1.14 Shims and polyfills to improve ECMAScri...
jquery 1.11.4 Manipulate the DOM using CSS selectors
meteor-base 1.0.1 Packages that every Meteor app needs
mobile-experience 1.0.1 Packages for a great mobile user experience
mongo 1.1.3 Adaptor for using MongoDB and Minimongo ...
session 1.1.1 Session variable
standard-minifiers 1.0.2 Standard minifiers used with Meteor apps...
tracker 1.0.9 Dependency tracker to allow reactive cal...
urigo:angular-blaze-template 0.1.0 Include Blaze templates in your angular-...

Files:
app.js

Tasks = new Mongo.Collection('tasks');

if (Meteor.isClient) {

  Accounts.ui.config({
    passwordSignupFields: "USERNAME_ONLY"
  });

  // This code only runs on the client
  angular.module('simple-todos',['angular-meteor']);

  function onReady() {
    angular.bootstrap(document, ['simple-todos']);
  }

  if (Meteor.isCordova)
    angular.element(document).on('deviceready', onReady);
  else
    angular.element(document).ready(onReady);

  angular.module('simple-todos').controller('TodosListCtrl', ['$scope', '$meteor',
    function ($scope, $meteor) {

      $scope.tasks = $meteor.collection(function() {
        return Tasks.find($scope.getReactively('query'), {sort: {createdAt: -1}})
      });

      $scope.addTask = function(newTask) {
        $scope.tasks.push( {
            text: newTask,
            createdAt: new Date(),             // current time
            owner: Meteor.userId(),            // _id of logged in user
            username: Meteor.user().username }  // username of logged in user
        );
      };

      $scope.$watch('hideCompleted', function() {
        if ($scope.hideCompleted)
          $scope.query = {checked: {$ne: true}};
        else
          $scope.query = {};
      });

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

    }]);
}

todos-list.ng.html:

<div class="container">
  <header>
    <h1>Todo List ( {{ incompleteCount() }} )</h1>

    <label class="hide-completed">
      <input type="checkbox" ng-model="$parent.hideCompleted"/>
      Hide Completed Tasks
    </label>

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

    <!-- add a form below the h1 -->
    <form class="new-task"
          ng-submit="addTask(newTask); newTask='';"
          ng-show="$root.currentUser">
      <input ng-model="newTask" type="text"
             name="text" placeholder="Type to add new tasks" />
    </form>
  </header>

  <ul>
    <li ng-repeat="task in tasks" 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">
        <strong>{{task.username}}</strong> - {{task.text}}
      </span>
    </li>
  </ul>
</div>

Step 11.4 - avoids invoking Meteor.userId()

This test case passes, but only because the task is not private, thus preventing the evaluation of the second part of the condition (imports/api/tasks.js, line 40) in which Meteor.userId() would be invoked causing an error. Remove the "task.private &&" or add a taskId.private = true, and you'll see the error:

"Meteor.userId can only be invoked in method calls. Use this.userId in publish functions."

It would be great to have an example that can be extended for inserting tasks, etc. Otherwise, this is an excellent introduction!

Hi, the meteor create simple-todos not work fine

Hi, the command 'meteor create simple-todos' not work fine, it´s not building all directories and files that tutorial teaches.
Create only three files, simple-todos.css, simple-todos.js, simple-todos.html
Thank.

<deleted>

<sorry, misread the tutorial>

use ReactDOM.render() and findDOMNode() instead of deprecated React.render() and findDOMNode throughout the tutorial

Using react developer tools, I see issues like the following:

Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead

Confusion at React Tutorial Step 4.1

React Tutorial Step 4.1 is very confusing.

Is this modification supposed to take place in main.html or imports/ui/App.jsx?
a. If main.html, does the modification replace everything else (including div id="render-target">)?
b. If imports/ui/App.jsx, then where should this be placed (e.g., after all of the other code)?
The first line shown (line 18) is "div className="container">", does not reflect a "diff" blue highlighting, and yet this line has not been previously disclosed.
a. Where should the div className="container"> begin and where should it end (i.e., what are the proper boundaries of the container)?
b. Should div id="render-target"> (in main.html) be inside the container, outside it, or does in not matter?
At line 31, there is a ul> outside of the header and not within a body> tag. What is that? Is it an error? This line also has not been previously disclosed.

Thanks!

a mistake

In "Checking off and deleting tasks"
5.3，line 5
import './task.html'; should be 'import ./body.html';

Update and Delete from tutorial doesn't display my data, nor are the new functionalities there

It seems when I add in this code along with what I already have, my todo-list goes blank and it doesn't function properly. Please look into this issue!

EDIT: I got it, it's required to first remove the code from the body.html portion in templates. It's fine for actual developers who are experienced, but probably better to add in a couple more lines about that for actual beginners.

Simple-todos-angular doesn't build

I'm new so could be overlooking something. I ran the first one, simple todos, without a problem. Then I tried the second one:

meteor simple-todos-angular

Nothing got created. All I got was a screen describing meteor syntax.

What did I do wrong?

Thanks,
Arthur

'Select All' button for CSS does not work

https://www.meteor.com/tutorials/blaze/templates

The 'Select All' button in the top right of the code for box the CSS does not work. It would be nice if all of the code boxes had select all functionality

simple-todos Tutorial: css didn't deploy properly

The css loads properly locally, but when i deployed this is the css that loaded:

body {
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;
position: absolute;
top: 0;
bottom: 0
}

li.checked > span {
text-decoration: line-through
}

See local vs server below:

React tutorial step 3 db is undefined

Following through the react tutorial I found that db was not defined

db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
// ReferenceError: db is not defined

Tasks.insert({ text: "Hello world!", createdAt: new Date() });
// Works just fine

Step 2: Adding CSS

There is no 'simple-todos.css' by default. Perhaps it is meant to be 'client/main.css'?

autopublish has to be installed for tutorial to work

Hi,

I have tried the tutorial up to https://www.meteor.com/tutorials/blaze/collections

with a fresh Windows installation of meteor (v1.2.1). I had no output here after the database insert statement because publish/subscribe is introduced somewhat later in the tutorial and autopublish does not seem to be installed per default in the Windows installer.

(I did not do a system restart because I got my environment variable to work anyways, if that's the issue.)

meteor add autopublish

enables the output. Also, if I add subscribe/publish to the example code, it will work, as well. Just following the tutorial without autopublish does not work, though, so I get no list.

All the best, Michael

Angular Tutorial Step 11.6 - 11.10 Errors

On Mac OS X I'm running into the following error when trying to do the tutorial testing steps (11.6 & 11.7) that involve angular mocks

ReferenceError: window is not defined
     at Object.<anonymous> (/Users/theuser/simple-todos/node_modules/angular-mocks/angular-mocks.js:3006:4)
     at Module._compile (module.js:456:26)
     at Object.Module._extensions..js (module.js:474:10)
     at Module.load (module.js:356:32)
     at Function.Module._load (module.js:312:12)
     at Module.require (module.js:364:17)
     at require (module.js:380:17)
     at npmRequire (/private/var/folders/bk/vc02hq9x7_b5sksrdkjj4t240000gn/T/meteor-test-run1c7hepa/.meteor/local/build/programs/server/npm-require.js:121:10)
     at Module.useNode (packages/modules-runtime.js:453:20)
     at fileEvaluate (packages/modules-runtime.js:157:20)

If I comment out the angular-mocks import, I get the following error:

Error: Cannot find module '../todosList'
     at require (packages/modules-runtime.js:95:19)
     at meteorInstall.imports.components.todosList.todosList.tests.js (imports/components/todosList/todosList.tests.js:7:1)
     at fileEvaluate (packages/modules-runtime.js:158:9)
     at require (packages/modules-runtime.js:92:16)
     at /private/var/folders/bk/vc02hq9x7_b5sksrdkjj4t240000gn/T/meteor-test-run1c7hepa/.meteor/local/build/programs/server/app/app.js:210:1
    at /private/var/folders/bk/vc02hq9x7_b5sksrdkjj4t240000gn/T/meteor-test-run1c7hepa/.meteor/local/build/programs/server/boot.js:283:10
     at Array.forEach (native)
     at Function._.each._.forEach (/Users/theuser/.meteor/packages/meteor-tool/.1.3.1.nwdv3u++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
     at /private/var/folders/bk/vc02hq9x7_b5sksrdkjj4t240000gn/T/meteor-test-run1c7hepa/.meteor/local/build/programs/server/boot.js:133:5

And, of course, commenting out the todosList import as well at least lets the testrunner proceed, but the tests error since the component it's testing isn't available.

Don't know enough about meteor/angular/mocha yet to have any idea why this is failing

Would like more explanation on mysterious update of non-existant field

For someone new to Mongo & Meteor this make no sense:

Tasks.update(this._id, {
      $set: { checked: ! this.checked },
    });

Tasks has been defined with text and created fields, so how can we update the 'checked' field?

Update: OK, so I ran db.tasks.find() on the console and noticed a checked field has indeed been added magically to the DB. This cost me quit a bit of time before I realised this is just what you can do.

A bit of explanation would be very handy here :-)

Facebook suggested example requires a tweak to work

In step 9, in the "Automatic accounts UI" section, the guide suggests that you try out Facebook but it doesn't work out of the box, since the example provided uses Meteor.user().username which is not available once logged in with Facebook (instead, you must use Meteor.user().profile.name).

Creating an App - errors prevented startup...

Hi,

I've just started using meteor with Angular and I'm trying to figure out the basic concepts.

I started with this tutorial https://www.meteor.com/tutorials/angular/creating-an-app. And when I entered "meteor" into command line I get the error below:

Started MongoDB.
Errors prevented startup:

While loading plugin compileTemplatesBatch from package templating:
module.js:338:15: Cannot find module '../modules/es6.object.get-own-property-descriptor'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\Users\Andraz\AppData\Local.meteor\packages\templating\1.1.7\plugin.compileTemplatesBatch.os\npm\node_modules\meteor\ecmascript-runtime\node_modules\meteor\ecmascript-runtime\node_modules\meteor-ecmascript-runtime\node_modules\core-js\es6\object.js:12:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\Users\Andraz\AppData\Local.meteor\packages\templating\1.1.7\plugin.compileTemplatesBatch.os\npm\node_modules\meteor\ecmascript-runtime\node_modules\meteor\ecmascript-runtime\node_modules\meteor-ecmascript-runtime\server.js:1:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at npmRequire (C:\tools\isobuild\bundler.js:1665:14)
at Module.useNode (packages/modules-runtime.js:453:20)
at fileEvaluate (packages/modules-runtime.js:157:20)
at require (packages/modules-runtime.js:92:16)
at meteorInstall.node_modules.meteor.ecmascript-runtime.runtime.js (packages/ecmascript-runtime.js:24:18)
at fileEvaluate (packages/modules-runtime.js:158:9)
at require (packages/modules-runtime.js:92:16)
at packages/ecmascript-runtime.js:2832:15
at packages/ecmascript-runtime.js:2845:3

Your application has errors. Waiting for file change.

I am using Win 8.1 OS. Do you have an advice for me?

Cheers, andre.

couldnt run the meteor todos, an error popped up and im running on windows

[[[[[ C:\Users\matth\simple-todos ]]]]]

=> Started proxy.
Unexpected mongo exit code 48. Restarting.
Unexpected mongo exit code 48. Restarting.
Unexpected mongo exit code 48. Restarting.
Can't start Mongo server.
MongoDB exited because its port was closed, or was already
taken by a previous instance of MongoDB

Check for other processes listening on port 3001
or other Meteor instances running in the same project.

C:\Users\matth\simple-todos>cd simple-todos
The system cannot find the path specified.

C:\Users\matth\simple-todos>meteor
[[[[[ C:\Users\matth\simple-todos ]]]]]

Check for other processes listening on port 3001
or other Meteor instances running in the same project.

C:\Users\matth\simple-todos>

Minor issues

Todos App > 1. Creating your first app > ES2015 JavaScript features > first paragraph:
"This is <missing "why"?> Meteor ships by default with support..."

Todos App > Figure 7.1 Add hide-completed checkbox to HTML:
I think the closing tag on the head section is missing. (~line 5)

Conflict with angular-templates and pbastowski:angular-babel

On step 2 of the Angular tutorial (https://www.meteor.com/tutorials/angular/templates), immediately after adding the 'angular' package, my app crashed with the error:

=> Errors prevented startup:

While determining active plugins:
error: conflict: two packages included in the app (angular-templates and
templating) are both trying to handle *.html
error: conflict: two packages included in the app (pbastowski:angular-babel
and ecmascript) are both trying to handle *.js

It was necessary for me to remove 'blaze-html-templates' and 'ecmascript' packages to continue with the tutorial.

Let me know if you want me to do a PR and add a step to remove these packages in coordination with 'meteor add angular'

cordova error while trying to run simple-todos at android

Hi,

I've followed the instructions of the simple-todos tutorial and wasn't able to run the App on my android device.
I've got the following error message:

meteorProjectFolderPath/Meteor/simple-todos$ meteor run android
[[[[[ meteorProjectFolderPath/Meteor/simple-todos ]]]]]

=> Started proxy.
=> Started MongoDB.
% Failed to install 'cordova-plugin-whitelist':Error: meteorProjectFolderPath/Meteor/simple-todos/.meteor/local/cordova-build/platforms/android/cordova/version:
Command failed with exit code EACCES
at ChildProcess.whenDone (homeFolder/.meteor/packages/meteor-tool/.1.3.0_3.fc5itk++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/cordova-lib/node_modules/cordova-common/src/superspawn.js:139:23)
at ChildProcess.emit (events.js:95:17)
at Process.ChildProcess._handle.onexit (child_process.js:818:12)
=> Errors executing Cordova commands:

While adding plugin [email protected] to Cordova project:
Error:
meteorProjectFolderPath/Meteor/simple-todos/.meteor/local/cordova-build/platforms/android/cordova/version:
Command failed with exit code EACCES
at ChildProcess.whenDone
(homeFolder/.meteor/packages/meteor-tool/.1.3.0_3.fc5itk++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/cordova-lib/node_modules/cordova-common/src/superspawn.js:139:23)
at ChildProcess.emit (events.js:95:17)
at Process.ChildProcess._handle.onexit (child_process.js:818:12)

homeFolder/.meteor/packages/less/.2.5.6.120kpft++os+web.browser+web.cordova/plugin.compileLessBatch.os/npm/node_modules/meteor/promise/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:116
throw error;
^
ExitWithCode:1

When I try to run it again, this message occurs:

homeFolder/.meteor/packages/meteor-tool/.1.3.0_3.fc5itk++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/meteor-promise/promise_server.js:116
throw error;
^
Error: spawn EACCES
at errnoException (child_process.js:1011:11)
at Process.ChildProcess._handle.onexit (child_process.js:802:34)

There seems to be something wrong with cordova.
What could be the problem?

Do you have any advice?

Thanks in Advance.

What is wrong with this code?

imports folder missing from tutorial

Following the https://www.meteor.com/tutorials/blaze/creating-an-app tutorial.

In the first section you run meteor create and you have a folder structure of

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
server/main.js        # a JavaScript entry point loaded on the server
package.json          # a control file for installing NPM packages
.meteor               # internal Meteor files
.gitignore            # a control file for git

However, in the second section of the tutorial https://www.meteor.com/tutorials/blaze/templates we are told to add some files within an import folder.

Namely "Then we create some new files in the imports/ directory:"

This doesn't exist.

I see from http://guide.meteor.com/structure.html that this import folder should wrap everything. Is this something we should be told to wrap things within? At this second, the guide just assumes we have an import directory, which we don't have.

App not running on localhost:3000

Hey guys and gals,

I installed Meteor in Unix with curl https://install.meteor.com/ | sh. I tried to view the simple-todos app on port 3000, but nothing came up. On Lubuntu (Linux), it didn't create the simple-todos folder.

It could be me being a rookie-jabroni to Meteor, but just thought I would mention it! Have a good one.