使用路由显示对话框等的 JS 主应用程序？

Question

我想知道我是否可以拥有一个基于 JavaScript 的应用程序，它有一个主“模板”作为某种背景/主应用程序，并与一些 URL 路由混合以显示对话框等？比如说，这是一个简短的例子：

1. 主应用程序显示谷歌地图等。网址：/#
2. 用户单击某个菜单项并显示一个选项对话框。网址：/#options
3. 用户进入子选项菜单。网址：/#options/advanced
4. 用户关闭主选项对话框，返回主应用程序。网址：/#
5. 用户在 URL 中输入一些坐标，然后地图会定位它。网址：/#coords/100/100

这里的主要想法是在使用 URL 显示对话框、表单甚至控制谷歌地图本身时，在后台保持地图可见（以及我想在该模板中显示的其他内容） -但是，例如，如果用户在第一次加载时转到 /#options，应用程序应该加载所有内容，然后显示选项对话框，好吗？

基本上，我想要一个“主状态”页面，其中包含我的应用程序最重要的部分，但我想使用 url-routing 来显示对话框和执行操作，用户可以在未来和分享等等。我不知道这个想法/概念是怎么称呼的，所以这就是我问的原因。

另外，我可以用什么来归档这样的东西？我知道这是一个悬而未决的问题，但我的目标是基于 JavaScript 的应用程序/框架（TypeScript 也可以）。我不知道 Angular2 + ui-router 是否可以做到这一点，甚至我应该如何谷歌这个？...

如果Angular2+ui-router可以做到，那就太好了！但如何？如果有任何其他框架或组合，请提供示例！我读过vue.js、react.js 等等，但是vue.js 看起来太简单了，react.js 仍然让我觉得在JS 文件中混入HTML 感到不安，感觉很不自然。提前感谢您提供的任何指示！ :)

Answer 1

Angular 2 可以做到这一点。一种方法是只有一个组件。该组件显示您的地图。

您的逻辑可以监视 URI 参数的更改并相应地显示/隐藏选项。由于这些参数并不总是存在，您可以使用optional parameters.

当您的应用正在运行时，您可以将事件侦听器添加到应该更改视图状态的按钮和链接。当用户单击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
     });
}