Question

我是Angular的新手，我对将模板或URL发送到ng-view有一点疑问。但是我打算这样做，我可能不得不在我的基本模板中进行ng-view。

当我的模板库是这样的时候：

<body>
   <div ng-view></div>
</body>

我的JS看起来像：

var app = angular.module('myApp',[])
.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: '/contato'
    })
(...)

当我只有一个ng视图的情况时，在ng-view中工作正常加载URL，如何我需要加载多个ng-view？（如：ng-view =“area1”和ng-view =“area2”）

我已尝试过每个$ routeProvider，但无效：

    $routeProvider
    .when('/home', {
        area1: {templateUrl: '/path1'},
        area2: {templateUrl: '/path2'}
})

如何分别设置每个ng-view的正确方法？

感谢任何帮助！感谢。

Answer 1

不幸的是，正如您现在所知，您的页面上不能有多个ng-view。您应该看一下AngularUI中的UI-Router，它完全符合您的要求（https://github.com/angular-ui/ui-router）。

他们的文档（https://github.com/angular-ui/ui-router#multiple--named-views）中的示例：

<强>设置

var myApp = angular.module('myApp', ['ui.router']);

<强> HTML

<body>
    <div ui-view="viewA"></div>
    <div ui-view="viewB"></div>
    <!-- Also a way to navigate -->
    <a ui-sref="route1">Route 1</a>
    <a ui-sref="route2">Route 2</a>
</body>

模板1

<h1>State 1</h1>

模板2

<h1>State 2</h1>

<强> JS

myApp.config(function($stateProvider, $routeProvider) {

  $stateProvider
    .state('index', {
      url: "",
      views: {
        "viewA": { template: "index.viewA" },
        "viewB": { template: "index.viewB" }
      }
    })
    .state('route1', {
      url: "/route1",
      views: {
        "viewA": { templateUrl: "route1.viewA.html" },
        "viewB": { templateUrl: "route1.viewB.html" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "viewA": { templateUrl: "route2.viewA.html" },
        "viewB": { templateUrl: "route2.viewB.html" }
      }
    });
});

您可以在此处指定状态级别的控制器，该控制器对两个视图或视图级别都有效，以便设置两个不同的控制器。

编辑：来自ui-router docs的现场演示（http://plnkr.co/edit/SDOcGS?p=preview）

Answer 2

基本上你不能有两个ng-view。看看this问题：

你只能有一个ng视图。

您可以通过多种方式更改其内容：ng-include，ng-switch或通过routeProvider映射不同的控制器和模板。

从RouteProvider定义ng-view =“NAME”

2 个答案: