Dart One page app: routing without AngularDart

Question

I want to try create a singular page app. On Dart website explain only routing with AngularDart. Honestly if use Dart with AngularDart, it's better use simply Angular without dart.

So I try to create this one page app with

HttpRequest Class

button.onClick.listen((e){
    HttpRequest.getString("test.html").then((html){
      querySelector(".container").innerHtml = html;
    });
  });

In my test.html I write only <h1>test page</h1> That's work!!! But how do modify url? I try with History class (like javascript) and work fine: my website from www.mysite.com, become www.mysite.com/test

But if I insert www.mysite.com/test in url input of browser give me 404 Error.

Route package for dart it's discontinued since 5 years. (https://github.com/justinfagnani/route)

This looks like it could help you: pub.dartlang.org/packages/m4d_router — rinukkusu

Ted Sander Ted Sander · Accepted Answer · 2018-08-09T06:32:26

If you want to have routing that replaces the path of URLs then you need to use location.pushState, location.popState, location.replaceState APIs. This will let you modify a URL without navigating, and listen to those modifications.

You can see how the angular router does it here: https://github.com/dart-lang/angular/blob/master/angular_router/lib/src/location/path_location_strategy.dart

With that strategy though your server needs to be configured so that all of those paths will be served by the same html page. Or when you navigate to the page without using your app you will get a 404.

Another strategy is to use a # at the end of your URL for routing. That will change the URL without navigating to somewhere new, and let your app listen for the data after the # instead of changing the path. This would work without modifying your server.

You can see that strategy used in angular_router here: https://github.com/dart-lang/angular/blob/master/angular_router/lib/src/location/hash_location_strategy.dart

Lastly you may want to reconsider AngularDart it is what many of the teams at Google use, and the only Dart web framework currently in use at Google. Our teams really like it. It isn't quite the same as Angular they are actually developed by different teams and have some different strengths and weaknesses. It is also why you are seeing more active development there rather than something like route which we don't use internally.

Dart One page app: routing without AngularDart

1 Answers