Angular JS建议动态菜单

Question

我是AngularJS的新手，正在寻找有关使用动态菜单和子菜单构建SPA网站的一些建议，您可以在其中拥有任意数量的嵌套子菜单。理想情况下，我希望从json API响应中指定菜单结构的定义，例如：

{
"root": [
        {
            "Id": "menu1",
            "Name": "Main Menu",
            "submenus": [
                {
                    "Id": "submenu1",
                    "Name": "Sub Menu 1",
                    "submenus": [
                        {
                            "Id": "submenu1_1",
                            "Name": "Sub Menu 1.1"
                        },
                        {
                            "Id": "submenu1_2",
                            "Name": "Sub Menu 1.2"
                        }
                    ]
                },
                {
                    "Id": "submenu2",
                    "Name": "Sub Menu 2",
                    "submenus": [
                        {
                            "Id": "submenu2_1",
                            "Name": "Sub Menu 2.1"
                        },
                        {
                            "Id": "submenu2_2",
                            "Name": "Sub Menu 2.2"
                        }
                    ]
                }
            ]
        }
    ]
}

看起来像：

当您单击菜单项（例如“子菜单1”）时，您将进入子菜单并更新主页面内容。此外，当点击子菜单项时，一些路径需要如何保留在URL中，所以如果我在子菜单1.2中，URL可能会看起来像/＃/ submenu1 / submenu1_2 /.

我认为要完成这个我需要使用ui-router？但是我如何组织主菜单的视图呢？不知何故，菜单（和子菜单）必须占用相同的空间（并且时间必须支持动画过渡）。

任何Angular大师都可以投入2美分吗？或者更好地展示如何实现这一目标以及如何配置视图/路由的示例？