Javascript 动态菜单的角度JS建议

我是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\u 2/

我认为要实现这一点，我需要使用ui路由器？但是我如何组织主菜单的视图呢？不知何故，菜单和子菜单必须占用相同的空间，并且随着时间的推移，必须支持动画过渡

任何有棱角的大师都能投2美分吗？或者最好给出一个示例，说明如何实现这一点以及视图/路线应如何配置