angulardart_router 5.0.2

Router for AngularDart.

AngularDart Router

Client-side routing and navigation for AngularDart applications.

Part of the AngularDart ecosystem.

Features

• Client-side routing - Navigate between views without page reloads
• Route configuration - Define routes with parameters and guards
• Route lifecycle - Hooks for route activation and deactivation
• Router directives - <router-outlet> and routerLink
• Location strategies - Hash-based or path-based URLs

Installation

Add to your pubspec.yaml:

dependencies:
  angulardart: ^8.0.0
  angulardart_router: ^4.0.0

Quick Start

1. Define routes

import 'package:angulardart/angular.dart';
import 'package:angulardart_router/router.dart';

@Component(
  selector: 'my-app',
  template: '''
    <nav>
      <a [routerLink]="['/']">Home</a>
      <a [routerLink]="['/about']">About</a>
      <a [routerLink]="['/users', '123']">User 123</a>
    </nav>
    <router-outlet></router-outlet>
  ''',
  directives: [routerDirectives],
)
@RouteConfig(const [
  Route(path: '/', component: HomeComponent, name: 'Home'),
  Route(path: '/about', component: AboutComponent, name: 'About'),
  Route(path: '/users/:id', component: UserComponent, name: 'User'),
])
class AppComponent {}

2. Create route components

@Component(
  selector: 'home',
  template: '<h1>Home</h1>',
)
class HomeComponent {}

@Component(
  selector: 'about',
  template: '<h1>About</h1>',
)
class AboutComponent {}

@Component(
  selector: 'user',
  template: '<h1>User {{userId}}</h1>',
)
class UserComponent implements OnActivate {
  String? userId;
  
  @override
  void onActivate(RouterState? previous, RouterState current) {
    userId = current.parameters['id'];
  }
}

Route Parameters

Access route parameters in your components:

@Component(selector: 'user', template: '<h1>User {{userId}}</h1>')
class UserComponent implements OnActivate {
  String? userId;
  
  @override
  void onActivate(RouterState? previous, RouterState current) {
    userId = current.parameters['id'];
  }
}

Navigation

Navigate programmatically:

@Component(selector: 'my-comp', template: '...')
class MyComponent {
  final Router _router;
  
  MyComponent(this._router);
  
  void goToUser(String id) {
    _router.navigate('/users/$id');
  }
}

Route Guards

Control access to routes:

@Injectable()
class AuthGuard implements CanActivate {
  final AuthService _auth;
  
  AuthGuard(this._auth);
  
  @override
  bool canActivate(RouterState? from, RouterState to) {
    return _auth.isLoggedIn;
  }
}

@RouteConfig(const [
  Route(
    path: '/admin',
    component: AdminComponent,
    name: 'Admin',
    canActivate: [AuthGuard],
  ),
])

Location Strategies

Hash-based URLs (default)

http://example.com/#/users/123

Path-based URLs

http://example.com/users/123

Configure in your main.dart:

void main() {
  runApp(AppComponent, 'my-app');
}

Documentation

• API Reference
• AngularDart main package

Requirements

• Dart SDK >= 3.0.0
• AngularDart >= 8.0.0

License

MIT License

---

Disclaimer

AngularDart Reborn is a community-maintained fork of Google's original AngularDart framework. This project is not affiliated with, endorsed by, or sponsored by Google LLC. Angular and AngularDart are trademarks of Google LLC.

This is an independent, 100% community-driven project. For the original Angular framework (TypeScript/JavaScript), visit angular.io.