AngularDart

# pubspec.yaml - Original (archived)
dependencies:
  angular: ^7.0.2
  angular_components: ^1.0.4
  angular_forms: ^4.0.1
  angular_router: ^3.0.1
dev_dependencies:
  angular_test: ^4.0.1
  build_runner: ^2.0.0
  build_web_compilers: ^3.0.0

Original Google packages (archived).

# pubspec.yaml - Community (active)
dependencies:
  ngdart: ^7.1.1
  ngforms: ^4.1.2
  ngrouter: ^3.1.1
dev_dependencies:
  ngtest: ^4.1.0
  build_runner: ^2.0.0
  build_web_compilers: ^4.0.0

Active community-maintained packages.

# Development
webdev serve
webdev serve --auto restart

# Production build
webdev build
webdev build --output web:build

# Alternative (build_runner)
dart run build_runner serve
dart run build_runner build

import 'package:angular/angular.dart';

@Component(
  selector: 'my-app',
  template: '''
    <h1>{{title}}</h1>
    <p>Welcome to AngularDart!</p>
  ''',
  styles: ['h1 { color: blue; }'],
  directives: [coreDirectives],
)
class AppComponent {
  String title = 'My App';
}

Must import coreDirectives explicitly.

class HeroComponent {
  @Input()
  Hero hero;

  final _deleted = StreamController<Hero>();
  @Output()
  Stream<Hero> get deleted => _deleted.stream;

  void onDelete() => _deleted.add(hero);
}

Uses Dart Streams, not EventEmitter.

class HeroComponent implements OnInit, OnDestroy {
  @override
  void ngOnInit() {
    // Initialize component
  }

  @override
  void ngOnDestroy() {
    // Cleanup
  }
}

Identical to Angular TypeScript.

<!-- Conditional rendering -->
<div *ngIf="hero != null">{{hero.name}}</div>

<!-- Loop -->
<li *ngFor="let hero of heroes">
  {{hero.name}}
</li>

<!-- Switch -->
<div [ngSwitch]="hero.emotion">
  <div *ngSwitchCase="'happy'">:)</div>
  <div *ngSwitchCase="'sad'">:(</div>
  <div *ngSwitchDefault>:|</div>
</div>

<input #heroInput type="text">
<button (click)="onSave(heroInput.value)">
  Save
</button>

Use #var for template refs.

import 'package:angular/angular.dart';

@Injectable()
class HeroService {
  final Client _http;
  HeroService(this._http);

  Future<List<Hero>> getHeroes() async {
    final response = await _http.get('/api/heroes');
    return _parseHeroes(response.body);
  }
}

@Component(
  providers: [
    ClassProvider(HeroService),
    ValueProvider(apiUrl, 'https://api.example.com'),
    FactoryProvider(HeroService, heroServiceFactory),
    ExistingProvider(HeroService, SuperHeroService),
  ],
)

import 'package:angular_router/angular_router.dart';

class Routes {
  static final heroes = RouteDefinition(
    path: 'heroes',
    component: ng.HeroListComponentNgFactory,
  );

  static final hero = RouteDefinition(
    path: 'hero/:id',
    component: ng.HeroDetailComponentNgFactory,
  );

  static final all = [heroes, hero];
}

class AppComponent {
  final Router _router;
  AppComponent(this._router);

  void goToHero(int id) {
    _router.navigate(
      Routes.hero.toUrl(parameters: {'id': '$id'})
    );
  }
}

@Component(
  directives: [routerDirectives],
  template: '''
    <nav>
      <a [routerLink]="Routes.heroes.toUrl()">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  ''',
)

import 'package:angular_forms/angular_forms.dart';

@Component(
  directives: [formDirectives],
  template: '''
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="model.name"
             ngControl="name"
             required>
      <button type="submit">Submit</button>
    </form>
  ''',
)
class HeroFormComponent {
  Hero model = Hero();

  void onSubmit() {
    // Handle submission
  }
}

Must import formDirectives.

import 'package:http/http.dart';
import 'dart:convert';

class HeroService {
  final Client _http;
  HeroService(this._http);

  Future<List<Hero>> getAll() async {
    final response = await _http.get(
      Uri.parse('/api/heroes')
    );
    final data = jsonDecode(response.body) as List;
    return data.map((json) => Hero.fromJson(json)).toList();
  }

  Future<Hero> create(Hero hero) async {
    final response = await _http.post(
      Uri.parse('/api/heroes'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode(hero.toJson()),
    );
    return Hero.fromJson(jsonDecode(response.body));
  }
}

Uses Dart's http package.

@Pipe('truncate')
class TruncatePipe implements PipeTransform {
  String transform(String value, [int length = 10]) {
    return value.length > length
        ? '${value.substring(0, length)}...'
        : value;
  }
}

Usage: {{ longText | truncate:20 }}