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

Question

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

主应用程序显示 google 地图等等。 URL: /#
用户单击某个菜单项，它会显示一个选项对话框。 URL: /#options
用户进入子选项菜单。 URL: /#options/advanced
用户关闭主选项对话框，返回主应用程序。 URL: /#
用户在URL中输入了一些坐标，地图找到了它。 URL:/#coords/100/100

这里的主要想法是在使用 URL 显示对话框、表单甚至控制 google 地图本身 - 但是如果用户在第一次加载时转到 /#options，应用程序应该加载所有内容然后显示选项对话框，好吗？

基本上，我想要一个 "main state" 页面，其中包含我的应用程序最重要的部分，但我想使用 url-routing 来显示对话框和执行操作，用户可以在将来添加书签和分享等等。我不知道这个 idea/concept 是怎么叫的，所以这就是我问的原因。

另外，我可以用什么来完成这样的事情？我知道这是一个悬而未决的问题，但我的目标是基于 JavaScript 的 app/framework（TypeScript 也可以）。我不知道 Angular2 + ui-router 是否可以做到这一点，甚至我应该如何 google 这个？...

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

Answer 1

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

您的逻辑可以相应地监视 URI 参数和 show/hide 选项的更改。由于这些参数并不总是存在，您可以使用 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
     });
}

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

JS main app which uses routing to show dialogs and such?

javascript

google-maps

url-routing

typescript

angular