Приложение Dart One page: маршрутизация без AngularDart

Я хочу попробовать создать приложение с одной страницей. На сайте Dart объясняется только маршрутизация с помощью AngularDart. Честно говоря, если вы используете Dart с AngularDart, лучше использовать просто Angular без dart.

Поэтому я пытаюсь создать это одностраничное приложение с

Класс HttpRequest

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

В моем test.html пишу только <h1>test page</h1> Это работа !!! Но как изменить URL-адрес? Я пытаюсь использовать класс History (например, javascript) и работаю нормально: мой сайт из www.mysite.com становится www.mysite.com/test

Но если я вставлю www.mysite.com/test во ввод URL-адреса браузера, я получу ошибку 404.

Пакет Route для дротика снят с производства 5 лет назад. (https://github.com/justinfagnani/route)

Похоже, это может вам помочь: pub.dartlang.org/packages/m4d_router

rinukkusu 08.08.2018 16:38

Я пробую это, но не очень хорошо

Sum_Pie 08.08.2018 16:50
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
2
679
1

Ответы 1

Если вы хотите иметь маршрутизацию, которая заменяет путь URL-адресов, вам необходимо использовать API-интерфейсы location.pushState, location.popState, location.replaceState. Это позволит вам изменять URL без навигации и прослушивать эти изменения.

Вы можете увидеть, как это делает угловой маршрутизатор здесь: https://github.com/dart-lang/angular/blob/master/angular_router/lib/src/location/path_location_strategy.dart

Однако с этой стратегией ваш сервер должен быть настроен так, чтобы все эти пути обслуживались одной и той же html-страницей. Или, когда вы переходите на страницу без использования приложения, вы получите ошибку 404.

Другая стратегия - использовать # в конце вашего URL для маршрутизации. Это изменит URL-адрес без перехода к чему-то новому и позволит вашему приложению прослушивать данные после # вместо изменения пути. Это будет работать без изменения вашего сервера.

Вы можете увидеть эту стратегию, используемую в angular_router здесь: https://github.com/dart-lang/angular/blob/master/angular_router/lib/src/location/hash_location_strategy.dart

Наконец, вы можете пересмотреть AngularDart, это то, что используют многие команды в Google, и единственная веб-платформа Dart, которая в настоящее время используется в Google. Нашим командам это очень нравится. Это не совсем то же самое, что Angular, они на самом деле разрабатываются разными командами и имеют разные сильные и слабые стороны. Именно поэтому вы наблюдаете более активную разработку там, чем что-то вроде маршрута, который мы не используем внутри компании.

Я не знаю Angular, пробую только 1 неделю: изучаю основы использования, такие как ng-model и подобные псевдоклассы, по этой причине он похож на чистый Angular. В любом случае мне очень нравится Дарт, чистый Дарт. Я провел все обучающие программы Tour of Heroes на веб-сайте: он использует только AngulaDart, но нет никакого взаимодействия с Dom с использованием AngularDart вместе с Dart: html. Как реализовать это в другом классе или компоненте. AngularDart полезен для управления компонентами: в компоненте вы можете легко объяснить свой тег, свой HTML и CSS. Так можно ли использовать dart: html в классе AngularDart?

Sum_Pie 09.08.2018 10:49

AngularDart вы всегда можете внедрить элемент в конструктор или директиву, чтобы у вас всегда был дескриптор DOM. Тем не менее, большую часть времени он вам не нужен. Мы используем его для управления фокусом и некоторых других продвинутых вещей, но в основном мы не касаемся элементов слишком часто.

Ted Sander 16.08.2018 08:06

Я пришел из Java и Android, поэтому моя логика уважает концепцию дротика, например: ButtonElement buttonLogin = querySelector ("# buttonLogin") ;. Ангулардарт работают немного иначе. Мне нужно лучше изучить ангулардарт

Sum_Pie 17.08.2018 10:14

Другие вопросы по теме