Permalink
Fetching contributors…
Cannot retrieve contributors at this time
265 lines (203 sloc) 8.44 KB
title description
Get Started
A guide to get you quickly writing web apps in Dart.

{% assign channel = site.data.pkg-vers.SDK.channel -%} {% if channel == 'stable' -%} {% assign isStable = true -%} {% else -%} {% assign isDev = true -%} {% endif -%}

Follow these steps to start using Dart to develop web apps. First you'll play with Dart in your browser, no download required. Then you'll install Dart and build a small app that uses the AngularDart framework and AngularDart Components.

1. Play with a web app in DartPad

With DartPad you can experiment with the Dart language and APIs, no download necessary.

For example, here's an embedded DartPad that lets you play with the code for a todo-list generator. Click run {% asset red-run.png alt="" %} to run the app; the console output appears beneath the code. Try editing the source code—perhaps you'd like to add "horses" to the list of pets. To get the full DartPad experience, which includes the web UI that the app produces, open the example at dartpad.dartlang.org.

<iframe src="{{site.custom.dartpad.embed-inline-prefix}}?id=2a24f3f042f1c86cf91621c30adce771&verticalRatio=70" width="100%" height="450px" style="border: 1px solid #ccc;"> </iframe>

More information:

2. Install Dart {%-if isDev%} 2 dev channel release {%-endif%}

Once you're ready to move beyond DartPad and develop real apps, you need the Dart SDK.

As you install, note the path to the SDK. You'll need it in step 4.

  • Windows
  • Linux
  • Mac
Use [Chocolatey](https://chocolatey.org) to install a {{channel}} release of the Dart SDK: ```terminal C:\> choco install dart-sdk {%-if isDev%} --pre {%-endif%} ```
You can use Aptitude to install the Dart SDK on Linux.
  1. Perform the following one-time setup:
    > sudo apt-get update
    > sudo apt-get install apt-transport-https
    > sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
    {% if isStable -%}
    > sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'
    {% else -%}
    
    Set up Dart {{site.data.pkg-vers.SDK.channel}} channel:
    > sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_unstable.list > /etc/apt/sources.list.d/dart_unstable.list'
    {% endif -%}
    
  2. Install the Dart SDK:
    > sudo apt-get update
    > sudo apt-get install dart
    
With [Homebrew](http://brew.sh/), installing Dart is easy.
> brew tap dart-lang/dart
{% if isStable -%}
> brew install dart
{% else -%}

Get {{site.data.pkg-vers.SDK.channel}} channel release:

> brew install dart --devel
{% endif -%}

More information: Install the SDK

3. Get CLI tools or WebStorm (or both)

If you like to use the command line, install webdev and stagehand:

> pub global activate webdev
> pub global activate stagehand

web Although using an IDE is optional, we highly recommend that you download and install WebStorm. WebStorm comes with Dart support, making it easy to write correct Dart code and to run it in a browser.

{% include webstorm-status.md %}

More information: Dart tools for the web

4. Create a web app

To create a web app from the command line, use these commands:

> mkdir quickstart
> cd quickstart
> stagehand web-angular
> pub get

web Here's how to use WebStorm to create the same web app:

  1. Choose Create New Project from WebStorm's welcome screen, or File > New > Project... from the menu. A dialog appears.
  2. Choose Dart from the list on the left.
  3. If the Dart SDK path field doesn't have a value, enter it.
  4. Edit the Location field to set the app location and name.
  5. Select Generate sample content to show the list of templates.
  6. Choose the AngularDart Web App template.
  7. Click Create.
    ![WebStorm new project dialog][]

More information:

5. Run the app

To run the app from the command line, use webdev to build and serve the app:

> webdev serve

Then, to view your app, use the Chrome browser to visit localhost:8080. (Details about Dart's browser support are in the FAQ.) Webdev is slowest when it builds and serves your app for the first time. After that, assets are cached on disk and incremental builds are much faster.

web To run the app from WebStorm, do the following:

  1. Right-click the app's web/index.html file in the project view.
  2. Choose Run 'index.html' in the pop up menu.

![Running the app from WebStorm]({% asset webstorm-run-index-html.png @path %})

{% include pub-get-workaround.html %}

You should see a simple todo list manager. Try it out!

![Launched To-do app]({% asset my-first-angular-app.png @path %}){:width="500"}

6. Add custom code to the app

Let's customize the app you just created.

  1. Copy the thingsTodo() function from the DartPad above to the bottom of the lib/src/todo_list/todo_list_service.dart file.

  2. Still in todo_list_service.dart, initialize the mockTodoList field using thingsTodo():

    {% prettify dart %} class TodoListService { [!List mockTodoList = thingsTodo().toList();!] ... } [!Iterable thingsTodo() sync* { ... }!] {% endprettify %}

  3. Save your changes.

  4. WebStorm and webdev automatically rebuild your app. Refresh the app's browser window. Now the initial todo list has things to do! After you feed the cats, your todo list should look something like this:
    ![Running the To-do app]({% asset my-first-angular-app-at-work.png @path %}){:width="500"}

7. Use DevTools to inspect the app

Use Chrome DevTools to set breakpoints, view values and types, and step through your app's Dart code. For setup details and a walkthrough, see Debugging Dart Web Apps.

**Feeling lost? Don't worry!** This was a whirlwind introduction to Dart and Angular that left out many details. For a gentler approach, try the [AngularDart tutorial](/angular/tutorial) or one of the [codelabs](/codelabs).

What next?

Learn more about AngularDart.

Or check out these resources:

If you get stuck, find help at Community and Support.

[WebStorm new project dialog]: {% asset webstorm-new-project.png @path %}