從RouteProvider定義ng-view =「NAME」

對於Angular來說，我真的很陌生，並且我有一個關於將模板或URL發送到ng-view的問題。但是我打算這樣做的方式可能不得不在我的基本模板中進行查看。從RouteProvider定義ng-view =「NAME」

當我的模板庫是這樣的：

<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' 
    }) 
(...)

工作正常裝載URL NG-視圖中時，我只有一個NG視圖的情況下，如何如果我需要有更多的一個ng-view加載？（如：NG-視圖= 「區域1」和NG-視圖= 「面積2」）

我試着在每$ routeProvider，但將無法正常工作：

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

怎麼會是正確的分別設置每個ng-view的方法嗎？

感謝任何幫助！謝謝。

來源

2013-10-09 Kzoty

不幸的是，如你所知，你的頁面上不能有多個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>

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路由器文檔（http://plnkr.co/edit/SDOcGS?p=preview）現場演示

來源

2013-10-09 03:33:38 jpmorin

最近我已經看到很多UI-Router了。我想我可能會嘗試一個我正在處理的項目，這可能會爲單個頁面使用一些額外的視圖。 –

我爲示例添加了plunker演示，請看一看，看看它是否適合您的需求！ – jpmorin

基本上你不能有兩個ng-view。看看this SO問題：

你可以只有一個ng-view。

您可以通過幾種方式更改其內容：ng-include，ng-switch或通過routeProvider映射不同的控制器和模板。

來源

2013-10-09 02:32:56 Julian

要具有基於路線雖然2 NG-意見，他們將需要配置了兩個應用模塊，同樣的路線，但不同的模板。 –

你正在寫。我的印象是，你可能在頁面上有一個以上的ng-app。現在我已經對它進行了測試並查看了文檔，我已經糾正過了。 –

感謝您的反饋！ – Kzoty

從RouteProvider定義ng-view =「NAME」

回答

相關問題