What's the proper way to set a Router & RouterLink in Angular2 Dart
AngularAngular Ui-RouterDartAngular Problem Overview
Question: What's the proper way to set a Router
& RouterLink
in the Angular2 Dart
.
main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/router.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
@Component(
selector: 'home'
)
@View(
template: '<h1>I am Home</h1><a router-link="child">Go Child</a>',
directives: const [RouterOutlet, RouterLink]
)
class Home {}
//
//
//
@Component(
selector: 'child'
)
@View(
template: '<h1>I am Child</h1><a router-link="home">Go Home</a>',
directives: const [RouterOutlet, RouterLink]
)
class Child {}
//
//
//
@Component(
selector: 'index'
)
@View(
template: '''
<router-outlet></router-outlet>
''',
directives: const [RouterOutlet, RouterLink]
)
class Index {
Router router;
Index(Router this.router) {
router.config({ 'path': '/child', 'component': Child, 'alias': 'child'});
router.config({ 'path': '/', 'component': Home, 'alias': 'home'});
}
}
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(Index, routerInjectables);
}
Here's my approach:
In router_link.dart
I see newHref
coming back as null
onAllChangesDone() {
if (isPresent(this._route) && isPresent(this._params)) {
var newHref = this._router.generate(this._route, this._params);
this._href = newHref;
// Keeping the link on the element to support contextual menu `copy link`
// and other in-browser affordances.
print('newHref');
print(newHref);
DOM.setAttribute(this._domEl, "href", newHref);
}
This results in an error and kills the navigation request.
> String expected > STACKTRACE: > 0 BlinkElement.setAttribute_Callback_2 (dart:blink:7565) > > 1 BlinkElement.setAttribute_Callback_2 (dart:_blink:7566) > > 2 Element.setAttribute (dart:html:13673) > > 3 BrowserDomAdapter.setAttribute(package:angular2/src/dom/browser_adapter.dart:258:25) > > 4 RouterLink.onAllChangesDone(package:angular2/src/router/router_link.dart:66:23)
Angular Solutions
Solution 1 - Angular
As of Angular Dart 2.0.0 (release candidate), the correct syntax for a router link is:
<a [router-link]="['./Home']">Go Home</a>
The value is a list of arguments that are passed to Router.navigate()
.
The correct syntax for configuring routes is:
@Component(
selector: 'my-app',
template: ...,
directives: const [ROUTER_DIRECTIVES],
providers: const [HeroService, ROUTER_PROVIDERS])
@RouteConfig(const [
const Route(
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true),
const Route(
path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
])
class AppComponent {
String title = 'Tour of Heroes';
}
Solution 2 - Angular
app/partials/phone-list.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
Solution 3 - Angular
check out @ngrx/router it's an simpler router implementation for Angular 2 https://github.com/ngrx/router
you can see how simple it is to declare routes
import { Routes } from '@ngrx/router';
const routes: Routes = [
{
path: '/',
component: HomePage
},
{
path: '/blog',
component: BlogPage,
children: [
{
path: ':id',
component: PostPage
}
]
}
]
and here is a demo plunker http://plnkr.co/edit/7J6RrA?p=preview
Solution 4 - Angular
Note: Starting with AngularJS version 1.2, ngRoute is in its own module and must be loaded by loading the additional angular-route.js file, which we download via Bower above. app/index.html:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>