sanfordredlich / angular2-dart-gnome-example-app

Sleepy gnome teaches Angular2 Dart

Angular2 Dart Gnome Example App

My Angular2 API cheatsheet

Angular2 Dart cheatsheet (google doc)

What this app demonstrates in Angular2

• nested components (search for #NestedComponents)
• passing data to a nested component (#PassingDataToSubComponents)
• receiving DOM events from a nested component (#ReactingToComponentDomEvents)
• receiving custom events from a nested component (#ReactingToComponentEvents)
• displaying variables in HTML (#DisplayingVarsInHtml)
• showing/hiding DOM elements based on state (#ShowHideDomBasedOnState)
• testing asynchronous behavior using
  • expectAsync (#TestAsyncWithExpectAsync)
  • async/await (#TestAsyncWithAsyncAwait)
• working with a JSON REST API (#JsonRestApi)
• from Alpha 26
  • Elvis operator (#ElvisOperator)
• from Alpha 27
  • events: ['rate', 'myEmmitterName: myevent'], // emits 'rate' and 'myevent' (#EmitterNaming)

How to run the app with Dartium or any browser

• cd to the application directory
• pub get
• pub serve
• go to the url specified in the output

How to run the tests

• pub run test # runs the non-browser tests
• pub run test -p dartium # runs all the tests using Dartium (assuming it's configured)

Roadmap, stuff to add

• testing a component with a custom HTML testbed
• add examples of using features added in alpha 26
• using pipes in List of properties (no longer a map)); new syntax
• testing a component using TestComponentBuilder, like this
• for Forms,
  • add a Form example using status classes: ["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]
  • use ".touched" property
  • use [(ng-model)]="foo"
  • use nested find in the form '.find("nested/two").value' and '.find(["nested"], ["two"]).value'
• per-component CSS
• testing elements in the shadow dom
• router integration
• service tests