AngularJS

Question

我想到的布局包括两个部分，每个部分占页面的一半。

左半部分最初会有一个用于过滤查询的表单，返回的 JSON 将用于在 Google 地图上创建标记，然后填充左半部分。

右半部分最初会有文字来指导用户。单击左半部分的标记后，右半部分将被另一个 JSON.

中与该标记关联的详细信息所取代

我对使用 Angular 非常缺乏经验，所以我可能会有一些误解。我已经运行解决了这个问题：左侧需要 URL 中的查询，右侧需要 URL 中的标记 ID。我不清楚如何实现这个布局，所以我不知道 URL 结构会是什么样子。

www.website.com/mapview/ID/query 似乎不符合逻辑；这将是最后的手段，我不知道它可能会产生什么影响。我也考虑过发布过滤器选项，但这不允许用户为他们的搜索添加书签，而且表单重新提交警告对用户来说是非常意外的。

如果可以构建，最干净的解决方案是什么？

Answer 1

可能您需要两条不同的路线。

使用Ui.Router:

请记住，每个子路由都可以从其父路由继承视图、解析、参数、ecc。

angular
  .module('test', ['ui.router'])
  .config(function($stateProvider) {
    
    var index = {
      name: 'mapview',
      url: '/mapview/:query/',
      abstract: true,
      views: {
        "left": {},
        "right": {}
      }
    };
    
    var one = {
      name: 'mapview.marker',
      url: ':markerId/',
      views: {
        "left@": {},
        "right@": {}
      }
    };
    var two = {
      name: 'mapview.nomarker',
      url: '',
      views: {
        "left@": {},
        "right@": {}
      }};

  
    $stateProvider.state(index).state(one).state(two);
  })

AngularJS - 多个控制器有 GET 请求，如何处理 URL？

AngularJS - Multiple controllers with GET requests, how to handle URL?

url-routing

angular-ui-router