theosis / ng-darrrt-codelab

Learn how to build a web app with AngularDart in one hour.

Code Lab: AngularDart

AngularDart is the Dart version of Angular, a client-side structural framework for creating dynamic web applications. With Angular, you can concentrate on your application’s logic, and not on DOM manipulation. HTML is the template language, which you can extend with custom elements and attributes.

In this one-hour code lab, you'll create an AngularDart web app that generates a pirate badge. If you've already completed the first Dart code lab, this app should be familiar, but the code is completely different.

Important: AngularDart is in beta, and its API is subject to change. Before AngularDart's 1.0 release, we expect to fix these bugs (and more). This code lab uses AngularDart version 0.9.8. If you use a more recent version, you'll need to make some changes.

Steps

This code lab has the following sections:

• Step 0: Set up
• Step 1: Run the app, and view its code
• Step 2: Add an input field
• Step 3: Add a button and controller
• Step 4: Create a custom component
• Step 5: Use a class as a model
• Step 6: Read from a JSON-encoded file
• Step 7: Use a service to get data
• Step 8: Use a filter to modify data
• Step 9: Run the app as JavaScript

Useful links

• A Tour of the Dart Language
• Dart API Reference
• AngularJs
• AngularDart tutorial

Credits

This code lab is based on the Dart code lab Avast, Ye Pirates: Write a Web App.

The creators of the AngularDart code lab include:

• +Alexandre Ardhuin
• +Guillaume Girou, Dart Evangelist @Sfeir
• +Mathieu Breton, @Xebia
• +Nicolas Francois, Dart Evangelist @Sfeir

Thanks to the +DartlangFr team.

Next >