1

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)

2

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

3 Comments

I don't know Angular, I try it only for 1 week: I learn basic use, like ng-model and similar pseudo-classes for this reason it's seem to be similar to pure Angular. Anyway I really like Dart, pure Dart. I did all tutorial Tour of Heroes on website: it use only AngulaDart but there's not any type of interaction with the Dom using AngularDart together with Dart:html. How to implement it in different class or component. AngularDart it's useful for component management: in component you can explain easily your tag, your html and your css. So it's possible use dart:html in AngularDart class?
AngularDart you can always inject an Element in the Constructor or Directive so you can always have a handle to the DOM. That said you don't need it most of the time. We use it for focus management, and some other advanced things, but mostly we don't touch Elements too often.
I come from java and Android, so my logic respect dart concept, for example: ButtonElement buttonLogin = querySelector("#buttonLogin");. Angulardart work little differently. I need to study better angulardart

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.