davideast/ng2do

Angular 2 Todo App

Angular 2 is not packaged or ready for production... but this is a todo app with it.

Installation

npm install -g gulp # Not required if you already have gulp installed globally
npm install
gulp
gulp serve

How the installation works

The installation clones the Angular 2 quickstart which contains Angular and all of the dependencies to transpile from AtScript/TypeScript. The local .git folder for the quickstart is removed automatically.

AngularFire?

The AngularFire included in this project is not a final or working version of AngularFire for Angular 2.

I want more Angular 2 info

Check out the official Angular 2 website.

Apache 2.0 License

ng2do's Issues

Build from the Angular2 npm module

The current build process is based off of the Angular2 source, which does not provide a stable build for this project.

The solution is to use the npm module for Angular2. This should fix all of the PRs that update the installation instructions.

The current npm module is not fully packaged. There will be some work needed to make the clone/install process turn-key.
#4, #3, #2

Firebase.js and zone.js

Hi @davideast
I have just saw "An Angular2 Todo App: First look at App Development in Angular2" on youtube
I have a question: "I don't know why we use firebase.js in this demo?" Beside, I see in structure have zone.js. If I don't use zone.js It still work, right?
Sorry because I raise issue about video on youtube at here ( I can't comment on youtube )
Thanks

Trying to run the firebase version of the app as shown in youtube demo, but failed.

David,
Really just trying to use your Youtube version, so I did the copy and change some lines of code here, but failed to run, would you be able to give some hints of what happened. Really appreciated!

---

import {Component, TemplateConfig, bootstrap, Foreach} from 'angular2/angular2';
import {bind} from 'angular2/di';
import {AngularFire, FirebaseArray} from 'firebase/AngularFire';

@component({
selector: 'todo-app',
componentServices: [
AngularFire, bind(Firebase).toValue(new Firebase('https://webapi.firebaseio-demo.com/test'))
],
template: new TemplateConfig({
url: 'todo.html',
directives: [Foreach]
})
})

class TodoApp {
todoService: FirebaseArray;
todoEdit: any;

constructor(sync: AngularFire) {
this.todoService = sync.asArray();
this.todoEdit = null;

---

Believe the rest of the code shall be exactly same as the Github version. Here is the console error logs:

Error during instantiation of Token(AppComponentAnnotatedType)!. ORIGINAL ERROR: TypeError: undefined is not a function

application.js:107 Uncaught (in promise) InstantiationError {keys: Array[3], constructResolvingMessage: function, message: "Error during instantiation of Token(AppComponentAn…NAL ERROR: TypeError: undefined is not a function", addKey: function, toString: function}
VM3745:323
3308lang.js:64 RangeError: Maximum call stack size exceeded

TodoMVC is not accessible

After watching the video, I can tell that this application contains all of the accessibility issues that the 1.x Angular.js TodoMVC application has.

http://unobfuscated.blogspot.com/2015/02/angularjs-accessibility-woeful-todomvc.html

I would like to help you fix these as I have already done for the 1.x version

http://unobfuscated.blogspot.com/2015/02/angularjs-accessibility-knocking-off-my.html

This will give us better insight into what we need to do to allow Angular.js 2.0 to fulfill on its promise of "never having to give you the DOM" while at the same time being accessible.

As it currently stands, I anticipate that some of the issues fixed in the above-mentioned blog series will break this. In particular, the focus management issues will be hairy but I have some ideas for how zones and the router can be leveraged to solve some of these problems in a declarative way.

I will be able to submit some PRs once the installation issues mentioned in other issues have been fixed

Hooking up AngularFire 2

Is there any documentation for how/where to wire-in a firebase ref?

Error running npm start and gulp play not starting a localhost

I'm not sure if my node install is broken or if it's my env, but everytime I try to run gulp play I get this response:

and npm start shows this:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: start
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:142:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:58:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:345:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:309:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:343:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:113:5)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:300:12
4 verbose stack at evalmachine.:334:14
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:102:5
4 verbose stack at FSReqWrap.oncomplete (evalmachine.:95:15)
5 verbose cwd Z:\coding\ng2do
6 error Windows_NT 6.1.7601
7 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
8 error node v0.12.7
9 error npm v2.11.3
10 error missing script: start
11 error If you need help, you may report this error at:
11 error https://github.com/npm/npm/issues
12 verbose exit [ 1, true ]

Please let me know what am I doing wrong.

when ng2do will inegrate with new router?

when ng2do will inegrate with new router?

Tried this out, but I am getting fatal errors...

I know this is Alpha, but I can't really get close enough to even see anything. Should I start elsewhere to check this out?

[Error] SyntaxError: Cannot use initialiser syntax in a strict mode enumeration.
    (anonymous function) (es6-shim.js, line 4941)
[Error] ReferenceError: Can't find variable: System
    global code (localhost, line 14)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (favicon.ico, line 0)

Example not working anymore

I do not know if this is maintained any more but after running the installation instructions,

it opens a browser tab but stays there,

console looks like this

Uncaught SyntaxError: for-in loop variable declaration may not have an initializer.
localhost/:14 Uncaught ReferenceError: System is not defined
http://localhost:3456/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

Add the footer routers

I revisited the talk and I could not get if the footer [All, Active, Completed] is working or not. I presume that it's not working because the router is not ready yet for angular 2.0 (https://github.com/angular/router)... Am I right?

If so, we need to add the router to this example as soon as possible (or at least make it explicit that is not working by now).

Thanks and congrats for the great work at firebase/angular !

Installation Problems

I believe I have the Angular2 repo built correctly (the karma tests pass and everything), but this project is not working against it. I'm on OS X using http-server from npm to serve the files, and viewing them with Canary.

As currently written, the installation instructions to symlink the angular build result in a ton of 404s. I took a loot at bkad's pending pull request and tried to symlink in the ES5 directory. That got rid of the 404s, but now I see the following error logged to the console when I try to load the page:

Error during instantiation of Token(AppComponentAnnotatedType)!. ORIGINAL ERROR: TypeError: undefined is not a function

-----async gap-----
Error
    at _AsyncInjectorStrategy.execute._AsyncInjectorStrategy.instantiate (http://localhost:8080/ng/angular2/src/di/injector.js:306:17)
    at Injector.execute.$__export._getByKey (http://localhost:8080/ng/angular2/src/di/injector.js:140:33)
    at execute.$__export._resolveDependencies.getDependency (http://localhost:8080/ng/angular2/src/di/injector.js:152:29)
    at Array.map (native)
    at Function.execute.$__export.map (http://localhost:8080/ng/angular2/src/facade/collection.js:166:26)

-----async gap-----
Error
    at _createVmZone (http://localhost:8080/ng/angular2/src/core/application.js:86:16)
    at bootstrap (http://localhost:8080/ng/angular2/src/core/application.js:95:16)
    at y.main (http://localhost:8080/todo.js!eval:13:5)
    at http://localhost:8080/:48:14

I presume this error is to blame for the error that actually gets raised:

es6-module-loader.src.js:139
    Potentially unhandled rejection [6] Error during instantiation of Token(AppComponentAnnotatedType)! (Token(AppView) -> Token(AppElement) -> Token(AppComponentAnnotatedType)). ORIGINAL ERROR: TypeError: undefined is not a function

    @ es6-module-loader.src.js:139
        (anonymous function)
    @ es6-module-loader.src.js:166
        f
    @ es6-module-loader.src.js:188
        i
    @ zone.js:138
        fnNames.map.forEach.zone.(anonymous function).arguments.(anonymous function)
    @ zone.js:71
        (anonymous function)
    @ zone.js:87
        run
    @ zone.js:64
        zoneBoundFn

What IDE is used in presentation?

Uncaught ReferenceError: System is not defined

TypeError: Cannot read property 'annotations' of undefined

I am not sure if I did something wrong. Error log below.

TypeError: Cannot read property 'annotations' of undefined

TypeError: Cannot read property 'annotations' of undefined
    at ReflectionCapabilities.$**export.annotations (http://localhost:3456/quickstart/angular2/src/reflection/reflection_capabilities.js:81:40)
    at Reflector.$__export.annotations (http://localhost:3456/quickstart/angular2/src/reflection/reflector.js:81:50)
    at DirectiveMetadataReader.$__export.read (http://localhost:3456/quickstart/angular2/src/core/compiler/directive_metadata_reader.js:31:41)
    at http://localhost:3456/quickstart/angular2/src/core/compiler/compiler.js:127:35
    at Array.map (native)
    at Function.$__export.map (http://localhost:3456/quickstart/angular2/src/facade/collection.js:172:26)
    at Compiler.$__export.createSteps (http://localhost:3456/quickstart/angular2/src/core/compiler/compiler.js:126:43)
    at Compiler.$__export._compileTemplate (http://localhost:3456/quickstart/angular2/src/core/compiler/compiler.js:164:53)
    at http://localhost:3456/quickstart/angular2/src/core/compiler/compiler.js:154:29
    at Zone.run (http://localhost:3456/quickstart/dist/es6-shim.js:29889:19)
:3456/quickstart/angular2/src/core/application.js:119 Uncaught (in promise) TypeError: Cannot read property 'annotations' of undefinedmessage: "Cannot read property 'annotations' of undefined"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto**: Error

TodoApp broken since quickstart was upgraded to alpha 14

Here is the trace:
TypeError: Cannot read property 'annotations' of undefined

TypeError: Cannot read property 'annotations' of undefined
at ReflectionCapabilities.execute.$__export.annotations (http://localhost:3456/quickstart/angular2/src/reflection/reflection_capabilities.js:81:40)
at Reflector.execute.$__export.annotations (http://localhost:3456/quickstart/angular2/src/reflection/reflector.js:81:50)
at DirectiveMetadataReader.execute.$__export.read (http://localhost:3456/quickstart/angular2/src/core/compiler/directive_metadata_reader.js:31:41)
at http://localhost:3456/quickstart/angular2/src/core/compiler/compiler.js:127:35
at Array.map (native)
at Function.execute.$__export.map (http://localhost:3456/quickstart/angular2/src/facade/collection.js:172:26)
at Compiler.execute.$__export.createSteps (http://localhost:3456/quickstart/angular2/src/core/compiler/compiler.js:126:43)
at Compiler.execute.$__export._compileTemplate (http://localhost:3456/quickstart/angular2/src/core/compiler/compiler.js:164:53)
at http://localhost:3456/quickstart/angular2/src/core/compiler/compiler.js:154:29
at Zone.run (http://localhost:3456/quickstart/dist/es6-shim.js:29889:19)
application.js:255 Uncaught (in promise) TypeError: Cannot read property 'annotations' of undefined {stack: (...), message: "Cannot read property 'annotations' of undefined"}

Back syncing "quickstart" just before it was updated to alpha 14 fixes TodoApp.