大规模AngularJS应用程序 – 多个UI布局

发布时间：2020-12-17 08:30:55 所属栏目：安全来源：网络整理

导读：我刚刚开始学习AngularJS。路由器使它变得很简单，用一个部分交换单个视图(dom元素)。在我的情况下，我可能有20个左右的屏幕，“全尺寸”布局取代整个屏幕减去常见的顶部标题，如下所示：这工作正常。但是，我的应用程序需要多个布局！如果我打开一些记录，

我刚刚开始学习AngularJS。路由器使它变得很简单，用一个部分交换单个视图(dom元素)。在我的情况下，我可能有20个左右的屏幕，“全尺寸”布局取代整个屏幕减去常见的顶部标题，如下所示：

这工作正常。但是，我的应用程序需要多个布局！如果我打开一些记录，它可能有一个动态子菜单与?20链接，点击每个链接应该只交换右面板。当然，我只想要获取这个动态子菜单一次。

也许打开别的东西可能有一个完全不同的布局(有自己的子菜单 – 可能是水平的)。

可以Angular处理这样的多个布局吗？或者我真的需要为每种类型的布局单独的应用程序构建！这种类型的东西在我使用的其他框架相当琐碎，如GWT(活动和场所绑定到URL)，ExtJS等。

我发现一个类似的(虽然也许不复杂)问题张贴在这里没有答案：
Multiple layouts with Angular

你所描述的是嵌套视图，默认路由器不支持。有一个非常受欢迎的第三方模块AngularJs称为 UI-Router，它支持你要求(和更多，与真正好的文档)。

可以看到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
      }
    });

请注意，您可以导航到不同的人，只有该部分的视图更改，而父状态保持不变。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!