Angular 2.0 Todo example

304 views
Skip to first unread message

Marwijn Christiaans

unread,
Nov 4, 2014, 3:49:00 AM11/4/14
to ang...@googlegroups.com
Hello All, 

I'm trying to get the Todo example in the angular 2.0 code working.
I've tried the changes below. However it seems that App is not defined on appModule. As far as I can tell when debugging the execute function on the compiled app.js is not executed.
Could anyone help me out to get the sample working ?

Thanks,

Marwijn.

--------------

index.html:

<!doctype html>
<html>
<body>
    <input type="test">
    <ul></ul>

    <% if(type === 'dart') { %>
    <script src="main.dart" type="application/dart"></script>
    <% } else { %>
        
        <script src="../../../traceur-runtime.js" type="text/javascript"></script>
<script src="../../../es6-module-loader.src.js" type="text/javascript"></script>
<script src="../../../extension-register.js" type="text/javascript"></script>
<script type="text/javascript">
register(System);
</script>
<script src="../../../rtts_assert/lib/rtts_assert.js" type="text/javascript"></script>
        <script src="app.js" type="text/javascript"></script>
        <script src="../../../facade/lib/dom.js" type="text/javascript"></script>
        <script src="main.js" type="text/javascript"></script>
    <% } %>
</body>
</html>

--------------------

main.es5:

System.baseURL = '/';

System.import("examples/lib/todo/app")
.then(function(appModule){
console.log("import done");
app = new appModule.App(); // App is undefined on appModule;
console.log("will not get here");
});

------------------

app.js

import {DOM} from 'facade/dom';

export class App {
  constructor() {
    this.input = null;
    this.list = null;
  }
  run() {
    this.input = DOM.query('input');
    this.list = DOM.query('ul');
    DOM.on(this.input, 'change', (evt) => this.add(evt));
  }
  add(evt) {
    var html = DOM.getInnerHTML(this.list);
    html += '<li>'+this.input.value+'</li>';
    DOM.setInnerHTML(this.list, html);
    this.input.value = '';
  }
}

Tony pee

unread,
Nov 4, 2014, 11:35:09 AM11/4/14
to ang...@googlegroups.com
which repo? link? (i just want to peruse, probably cant help)

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.



--
Tony Polinelli

Marwijn Christiaans

unread,
Nov 4, 2014, 12:33:58 PM11/4/14
to ang...@googlegroups.com
Hello Tony,


Kind regards,
Marwijn.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/WeCbKuJtsC4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

Benoit Tremblay

unread,
Nov 5, 2014, 10:02:35 AM11/5/14
to ang...@googlegroups.com
Hi Marwijn

First you need to build the project. 


Prerequisites:

  1. npm install
  2. npm install -g gulp karma karma-cli
  3. Install the Dart SDK
  4. Add the Dart SDK's bin directory to your system path
  5. gulp build
  6. pub get

Marwijn Christiaans

unread,
Nov 7, 2014, 4:08:43 AM11/7/14
to ang...@googlegroups.com
Thanks Benoit,

I didn't see the change in the archive to make the example working yet.

Kind regards,
Marwijn.
Reply all
Reply to author
Forward
0 new messages