AngularJS中的部分視圖

Question

我是Angular的新手，非常感謝任何建議。 基本上，我有一對多的關系 - 一個Category有幾個Product ，我有布局頁面，我在其中呈現不同的部分視圖：

<div class="mainContent">
     <ng-view></ng-view>
</div>

我的第一個視圖顯示了類別列表，當單擊其中一個時，我會顯示第二個視圖，它分為兩部分：類別列表和特定類別的產品列表，示意圖如下所示：

我的問題是我無法弄清楚如何使用另一個部分產品列表，因為想要將它們保存在單獨的.html中。

我配置了路線：

app.config(function($routeProvider, $locationProvider) {
$routeProvider
    .when('/category', {
        templateUrl: 'category.html',
        controller: 'categoryController as catCtrl'
    })
    .when('/category/:id', {
        templateUrl: 'categoryDetail.html',
        controller: 'categoryDetailController as catDetailCtrl'
    })       
    .when('/product/:category_id', {
        templateUrl: 'product.html',
        controller: 'productController as productCtrl'
    })
    .otherwise({
        redirectTo: "/category"
    });
});

和控制器：

app.controller("categoryController", function($http)
{
    var vm = this;
    vm.categories = somedata;
});
app.controller("categoryDetailController", function($http, $routeParams)
{
   var vm = this;
   vm.category = somedata;//current category from REST api, using $routeParams.id
});
app.controller("productController", function($http, $routeParams)
{
   var vm = this;
   vm.products = somedata;//product list of current category using $routeParams.category_id
});

所以在我的第一個視圖 - category.html ，我有hrefs的類別列表：

<a href="#/category/{{category.id}}">

在第二個 categoryDetail.html ，我再次列出類別，但使用另一個hrefs：

<a href="#/product/{{category.id}}">

在最后一個視圖 - product.html我列出了產品。

直到現在，當我點擊categoryDe​​tail.html中的categoryDetail.html我的product.html在布局的mainContent div中呈現，而不是 - 我需要它在categoryDetail.html呈現為內部部分。 我試圖再次使用<ng-view> ，但這似乎不正確。

Answer 1

AngularJS中有幾種部分方法。

NG-包括

如果沒有邏輯，或者它將從父作用域提供，您可以在視圖中包含一個html文件。

例：

<div ng-include="'/path/to/your/file.html'"></div>

新指令

如果你的部分中有一點邏輯，並且你想在你的應用程序中將它作為一個單獨的模塊使用 - 我強烈建議你建立一個新的指令。

例。

PS。 如果您是Angular的新手， 這可能很有用:-)