What is Google Dart?

Dart is an open-source general-purpose programming language originally developed by Google and later approved as a standard by Ecma (ECMA-408). Dart is used for building web, server, mobile applications and IoT devices.

Get Started
https://www.dartlang.org/guides/get-started

Tour and code examples
https://www.dartlang.org/guides/libraries/library-tour

Dart For web dev
https://webdev.dartlang.org/

Google builds many critical web apps in Dart. The next generation of Google AdWords is built in it. Google Fiber’s latest web app is built in it. So is Google’s internal CRM.
Outside Google, amazing companies like Wrike, Blossom, Workiva, and DGLogik have been building their products in Dart.

How to install Dart (Dart and Webstorm/phpstorm)

https://webdev.dartlang.org/guides/get-started#2-install-dart

Create and run a web app

We recommend using Angular for your Dart web apps. Here’s how to use WebStorm to create a web app that uses Angular:

  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 and Dartium path fields don’t have values, enter them.
  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 Angular Web Application template.
  7. Click Create.

WebStorm screenshot

To run the app from WebStorm, right-click the app’s web/index.html file and choose Run ‘index.html’.

Running the app from WebStorm

More information:

5. Add custom code to the app

Let’s customize the app you just created.

  1. Copy the buildNames() function from the DartPad above to the bottom of the lib/app_component.dart file.
  2. Still in lib/app_component.dart, add a heroes field to the AppComponent class:
    class AppComponent {
      List<String> heroes = buildNames().toList();
    }
  3. Edit the corresponding template, lib/app_component.html, adding the following code to list the heroes:
    <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
  4. Run the app. You should see the list of heroes!

    Running the customized app from WebStorm

Categorized in:

Website Development,