Блог

Мне интересно, могу ли я иметь приложение на основе JavaScript, в котором в качестве фонового / основного приложения используется основной «шаблон», смешанный с некоторой маршрутизацией URL для отображения диалоговых окон и тому подобное? скажем, вот короткий пример:

1. Основное приложение отображает карту Google и еще много чего. URL: /#
2. Пользователь нажимает на какой-либо пункт меню, и он отображает диалоговое окно параметров. URL: /#options
3. Пользователь переходит в меню дополнительных опций. URL: /#options/advanced
4. Пользователь закрывает главное диалоговое окно параметров, возвращаясь к основному приложению. URL: /#
5. Пользователь вводит некоторые координаты в URL, и карта находит его. URL:/#coords/100/100

Основная идея здесь состоит в том, чтобы сохранить карту видимой (и другие вещи, которые я хочу показать в этом шаблоне) в фоновом режиме, используя URL-адрес для отображения диалоговых окон, форм или даже для управления самой картой Google — НО если пользователь переходит, например, /#параметры при первой загрузке приложение должно загрузить все, а затем отобразить диалоговое окно параметров, хорошо?

В принципе, я хотел бы иметь страницу «основного состояния», которая содержит наиболее важную часть моего приложения, но я хотел бы использовать url-маршрутизацию для отображения диалоговых окон и выполнения действий, которые пользователи могут добавлять в закладки в будущем и делиться и так далее. Я не знаю, как называется эта идея / концепция, поэтому я и спрашиваю.

Кроме того, что я могу использовать для архивирования чего-то подобного? Я знаю, что это своего рода открытый вопрос, но я нацелен на приложение / фреймворк на основе JavaScript (TypeScript тоже работает). Я не знаю, может ли Angular2 ui-router сделать это, или даже как мне следует это Google ?…

Если Angular2 ui-router может это сделать, тогда отлично! но как?. Если есть какие-либо другие фреймворки или комбинации, пожалуйста, приведите пример! Я читал о vue.js , react.js и так далее, но vue.js казалось слишком простым и react.js все еще заставляет меня чувствовать себя неловко, смешивая HTML внутри файлов JS, это просто кажется неестественным. Заранее спасибо за любые указания, которые вы можете предоставить! 🙂

Angular 2 может выполнить это. Одним из способов было бы иметь только один компонент. Этот компонент показывает вашу карту.

Ваша логика может отслеживать изменения параметров URI и соответственно отображать / скрывать параметры. Поскольку эти параметры присутствуют не всегда, вы должны использовать необязательные параметры.

Во время работы вашего приложения вы можете добавлять прослушиватели событий к кнопкам и ссылкам, которые должны изменять состояние просмотра. Когда пользователь нажимает Select City кнопку, прослушиватель событий может направить его к URI с соответствующим параметром: ;view=dialog;target=city (Angular 2 по умолчанию использует матричную нотацию uri)

Компонент будет прослушивать изменения в параметрах и реагировать соответствующим образом.

 ngOnInit() {

    this.route.params.forEach((params: Params) => {
        // this is executed every time new URI parameters arrive
        this.viewType = params['view'];
        this.target = params['target'];

        //todo: update the model to match new parameters
     });
}