Is there a better way to reference a route by name in a link with AngularDart?

Question

I have many named routes in my AngularDart app. I create links the old fashioned way, like this:

<a href="#/activities">Go</a>

That seems brittle. If I change the path or change the strategy away from hash change, I need to change all my links.

Can I do something like:

<a ng-link="activities">Go</a>

Where activities is the name of the route from my routes config.

Answer 1

For now you can use router to generate those URLs for you.

router.url('activities', {});

The second parameter (should probably be optional) is a map of parameter values. For example, if you have a path like /activity/:activityId then you can do:

router.url('activity', {'activityId', '12345'});

URL generator also honors current state of routes, so lets say you had an active route like foo.bar.baz, and foo was parameterized and you somehow got a hold of bar route (ex. via RouteProvider or queried router.root.getRoute('foo.bar')) then you don't need to know the values of the foo route parameters to generate the URL for baz, you can do:

Route bar = router.root.getRoute('foo.bar');
router.url('baz', {}, startingFrom: bar);

For now you will need to manually insert the generated URL into the template:

<a href="{{ctrl.generatedUrl}}">link</a>