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我列出了产品.

直到现在,当我在布局的div中单击categoryDetail.html我的product.html渲染内的类别时mainContent,我需要将其渲染为内部局部内部categoryDetail.html.我试图<ng-view>再次使用,但这似乎不正确.

Answer 1

AngularJS中有几种部分方法.

NG-包括

如果没有逻辑,或者它将从父作用域提供,您可以在视图中包含一个html文件.

例:

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

新指令

如果你的部分中有一点逻辑,并且你想在你的应用程序中将它作为一个单独的模块使用 - 我强烈建议你建立一个新的指令.

例.

PS.如果您是Angular的新手,这可能很有用:-)