AngularDart Guide

Welcome to the AngularDart documentation! AngularDart is a web framework that separates cleanly into a template language and a component model, making it easy to build complex, maintainable web applications.

What is AngularDart?

AngularDart is a component-based web framework originally built by Google for building web applications. It uses Dart as its programming language, providing:

• Type safety - Catch errors at compile time
• Performance - Build-time compilation for optimal runtime performance
• Null safety - Full Dart 3 null safety support
• Developer productivity - Powerful templates, dependency injection, and two-way data binding

Core Concepts

Components

Components are the fundamental building blocks of AngularDart applications. Each component consists of:

• A Dart class with business logic
• A template (HTML) that defines the view
• Optional styles (CSS) for component-specific styling

import 'package:angulardart/angular.dart';

@Component(
  selector: 'my-app',
  template: '<h1>Hello {{name}}!</h1>',
)
class AppComponent {
  String name = 'World';
}

Templates

Templates use a familiar HTML syntax with AngularDart-specific extensions:

• Interpolation: {{ expression }} - Display dynamic values
• Property binding: [property]="expression" - Bind element properties
• Event binding: (event)="handler()" - Handle user events
• Directives: Extend HTML with custom behavior

Dependency Injection

AngularDart has a powerful dependency injection system that helps you manage services and their dependencies:

@Injectable()
class DataService {
  Future<List<Item>> getItems() async {
    // Fetch data from API
  }
}

@Component(
  selector: 'item-list',
  template: '<ul><li *ngFor="let item of items">{{item.name}}</li></ul>',
  providers: [ClassProvider(DataService)],
)
class ItemListComponent {
  List<Item> items = [];
  final DataService _dataService;
  
  ItemListComponent(this._dataService) {
    _dataService.getItems().then((data) => items = data);
  }
}

Getting Started

The fastest way to get started is with the AngularDart CLI:

# Install the CLI
dart pub global activate angulardart_cli

# Create a new project
ngdart new my_app
cd my_app

# Install dependencies and run
dart pub get
dart run build_runner serve

Open your browser at http://localhost:8080 and you're done!

Next Steps

• Template Syntax - Learn about interpolation, bindings, and directives
• Attribute Directives - Change the appearance or behavior of elements
• Structural Directives - Change the DOM layout
• Lifecycle Hooks - Tap into key moments in a component's life