[Tips]AngularDartのルーティング

はじめに

備忘録として残しておきます。
事前にWebのプロジェクトを作っていることを前提に書いています。

前準備

例としてsigin inするための画面のコンポーネントを作成し、そのコンポーネントに対してルーティングできるようにします。

lib/src/signin/signin_component.dart

import 'package:angular/angular.dart';

@Component(
  selector: 'signin',
  templateUrl: 'signin_component.html',
  directives: [coreDirectives],
)
class SigninComponent {
}

lib/src/signin/signin_component.html

<h1>SignIn</h1>

1. pubspec.yamlにangular_routerを記述

pubspec.yaml

dependencies:
  angular: ^5.2.0
  angular_router: ^2.0.0-alpha+19 #追加

$ pub get

2. main.dartを編集

web/main.dart

import 'package:angular/angular.dart';
import 'package:personal_web/app_component.template.dart' as ng;
import 'package:angular_router/angular_router.dart';
import 'main.template.dart' as self;

const useHashLS = false;
@GenerateInjector(
  routerProvidersHash,
)
final InjectorFactory injector = self.injector$Injector;

void main() {
  runApp(ng.AppComponentNgFactory, createInjector: injector);
}

3. routes.dartを新規作成

lib/src/routes.dart

import 'package:angular_router/angular_router.dart';
import 'signin/signin_component.template.dart' as signinComponent;

class RoutePaths {
  static final signIn = RoutePath(path: 'signin');
}

class Routes {
  static final all = <RouteDefinition>[
    RouteDefinition(
      routePath: RoutePaths.signIn,
      component: signinComponent.SigninComponentNgFactory,
    ),
  ];
}

signin_component.template.dartというファイルは存在しないんですが、ビルド時に生成されるコンポーネントファクトリなるものらしいです。参考文献はこちら。

4. app_component.dartとapp_component.htmlの変更

URLが変わったらそれぞれのページを表示するように変更します。

lib/app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart'; //追加
import 'src/routes.dart'; //追加

@Component(
  selector: 'app-component',
  templateUrl: 'app_component.html',
  directives: [routerDirectives], //追加
  exports: [RoutePaths, Routes] //追加
)
class AppComponent {}

lib/app_component.html

<router-outlet [routes]="Routes.all"></router-outlet>

これであとは実行するだけ
http://localhost:8080/#/signin
でアクセスできます。