我刚刚开始学习AngularJS。路由器使它变得很简单,用一个部分交换单个视图(dom元素)。在我的情况下,我可能有20个左右的屏幕,“全尺寸”布局取代整个屏幕减去常见的顶部标题,如下所示:
这工作正常。但是,我的应用程序需要多个布局!如果我打开一些记录,它可能有一个动态子菜单与〜20链接,点击每个链接应该只交换右面板。当然,我只想要获取这个动态子菜单一次。
也许打开别的东西可能有一个完全不同的布局(有自己的子菜单 – 可能是水平的)。
可以Angular处理这样的多个布局吗?或者我真的需要为每种类型的布局单独的应用程序构建!这种类型的东西在我使用的其他框架相当琐碎,如GWT(活动和场所绑定到URL),ExtJS等。
我发现一个类似的(虽然也许不复杂)问题张贴在这里没有答案:
Multiple layouts with Angular
你所描述的是嵌套视图,默认路由器不支持。有一个非常受欢迎的第三方模块AngularJs称为
UI-Router,它支持你要求(和更多,与真正好的文档)。
原文链接:https://www.f2er.com/angularjs/145373.html可以看到UI-Router演示你所描述的内容:
http://plnkr.co/edit/3KgB5g?p=preview
UI路由器中的路由称为状态,每个状态可以有一个父状态和子状态,允许您嵌套布局。在上面的示例中,您可以在app.js中查看此操作:
我们定义一个称为人员的状态:
.state('personnel',{ url: "/personnel",templateUrl: "personnel.html" })
然后我们定义儿童状态的人员(您可以查看的人员的列表):
.state('personnel.list',{ url: '/list',templateUrl: 'personnel.list.html',controller: 'PersonnelCtrl' })
然后,我们可以定义更多的孩子(当你点击一个名字,人的细节):
.state('personnel.list.person',{ url: '/:id',templateUrl: 'personnel.list.person.html',controller: function($scope,$stateParams){ $scope.id = $stateParams.id } });
请注意,您可以导航到不同的人,只有该部分的视图更改,而父状态保持不变。