基於路由參數的AngularJS頁面內容（相同視圖）

Question

我有我的主視圖，主頁，鏈接到另一個視圖，下載。 我的家庭觀點上有兩個按鈕，「免費試用」和「下載」，它們都指向下載視圖，但我希望下載視圖的第一段由區分兩個按鈕的參數決定。

我該如何去做到這一點？我想也許使用兩個控制器，但我是AngularJS的新手，並想知道是否有更好的方法。

Answer 1

假設我理解正確的話，你...

有可能在理論上具有由同一個控制器管理兩個頁面，但不是最好的做法，如果他們有2個獨立的觀點，在任何情況下，控制器被認爲是短暫的。在控制器之間傳遞數據的「角度方式」是服務。所以，你會做這樣的事情：

app.factory('DownloadType',function() { 
    return { 
     type:"free" 
    }; 
    // just used "free" as a default 
}) 
.controller('Home',function($scope,DownloadType) { 
    $scope.setType = function(type) { 
     DownloadType.type = type; 
    }; 
}) 
.controller('Download',function($scope,DownloadType) { 
    $scope.type = DownloadType.type; 
}) 
; 

然後你家的模板可能看起來像：

<button ng-click="setType('free')">Free</button> 
<button ng-click="setType('paid')">Paid</button> 

和你下載的模板

<div ng-show="type === 'free'">This is a free download</div> 
<div ng-show="type === 'paid'">You are paying us! We love you!</div> 

有有些更清潔的方式，例如如果你想要一個點擊進入該頁面，並設置它：

.controller('Home',function($scope,$location,DownloadType) { 
    $scope.setType = function(type) { 
     DownloadType.type = type; 
     $location.path('/download'); 
    }; 
}) 

最後，如果你想讓他們在一個單一的視圖，那麼你並不需要的服務在所有的，因爲你有一個單一視圖只有一個控制器。

Answer 2

您的需求可以通過使用ui-router使用嵌套視圖來完成。示例代碼，

$stateProvider 
.state('home', { 
    url: "/", 
    templateUrl: "templates/home.html" 
}) 
    .state('product', { 
     url: "/product", 
    templateUrl: "templates/product.html" 
    }) 
.state('product.trial', { 
    url: "/product/trial", 
    templateUrl: "templates/product.trial.html" 
}) 
.state('product.download', { 
    url: "/product/download", 
    templateUrl: "templates/product.download.html" 
}) 

現在product.trial.html & product.download.html裏面，把你的第一款只&在product.html，將此代碼::::

//the code snippet that is common for all views.... 
<div ui-view>