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

Question

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

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

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

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

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

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

Answer 1

Angular 2 可以实现这一点。一种方法是只有一个组件。该组件显示您的 map 。

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

当您的应用程序运行时，您可以向应更改 View 状态的按钮和链接添加事件监听器。当用户单击“选择城市”按钮时，事件监听器可以将他定向到带有适当参数的 URI:;view=dialog;target=city(Angular 2 使用矩阵默认 uri 表示法)

该组件将监听参数的变化并做出相应的 react 。

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
     });
}