AngularJS 中的部分视图 [英] Partial views in AngularJS

问题描述

我是 Angular 的新手，希望得到任何建议.基本上，我有一对多的关系——一个 Category 有几个 Product，我有我呈现不同部分视图的布局页面:

<ng-view></ng-view>

我的第一个视图显示类别列表，当单击其中一个时，我显示第二个视图，该视图分为两部分:类别列表、和特定类别的产品列表，示意图如下:

我的问题是我无法弄清楚如何使用另一个部分的产品列表，因为想将它们保存在单独的 .html 中.

我配置了路由:

app.config(function($routeProvider, $locationProvider) {$routeProvider.when('/类别', {templateUrl: 'category.html',控制器:'categoryController as catCtrl'}).when('/category/:id', {templateUrl: 'categoryDe​​tail.html',控制器:'categoryDe​​tailController as catDetailCtrl'}).when('/product/:category_id', {templateUrl: 'product.html',控制器:'productController 作为 productCtrl'}).除此以外({重定向到:/类别"});});

和控制器:

app.controller("categoryController", function($http){var vm = 这个；vm.categories = somedata;});app.controller("categoryDe​​tailController", function($http, $routeParams){var vm = 这个；vm.category = somedata;//来自REST api的当前类别，使用$routeParams.id});app.controller("productController", function($http, $routeParams){var vm = 这个；vm.products = somedata;//使用$routeParams.category_id的当前类别的产品列表});

所以在我的第一次视图 - category.html 中，我有带有 href 的类别列表:

在第二个 - categoryDe​​tail.html 上，我再次列出类别，但使用另一个 hrefs:

在最后视图 - product.html 我列出了产品.

直到现在，当我点击 categoryDe​​tail.html 中的类别时，我的 product.html 呈现在布局的 mainContent div 中，而不是 -我需要它在 categoryDe​​tail.html 中呈现为内部部分.我尝试再次使用 ，但这似乎不正确.

解决方案

在 AngularJS 中有几种方法可以处理部分.

ng-include

如果没有逻辑，或者它将从父范围提供，您可以将一个 html 文件包含到您的视图中.

示例:

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

新指令

如果您的部分中有一些逻辑，并且您希望将其用作应用程序中的单独模块 - 我强烈建议您构建一个新指令.

示例.

附注.如果您是 Angular 的新手，这个 可能有用:-)

I'm new to Angular and would appreciate any advice. Basically, I have one-to-many relationship- one Category has several Product, I have the layout page where I render different partial views:

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

My first view shows the list of categories, when one of them is clicked, I show the second view, which is separated to two parts: list of categories, and list of products of particular category, schematically it looks like:

My problem is that I cannot figure out how to use another partial for the list of products because want to keep them in separate .html.

I configured routes:

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"
    });
});

And controllers:

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
});

So on my first view - category.html, I have the list of categories with hrefs:

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

On the second - categoryDetail.html, I list categories again but with another hrefs:

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

And on the last view - product.html I list the products.

Till now, when I click on category inside categoryDetail.html my product.html renders in mainContent div of the layout, instead - I need it to render as inner partial inside categoryDetail.html. I tried to use <ng-view> again, but this does not seem to be correct.

解决方案

there are couple ways for partials in AngularJS.

ng-include

If theres no logic, or it will be provided from parent scope you can just include a html file into your view.

Example:

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

new directive

If you'll have a bit logic in your partial, and you'd like to use it as a separate module in your app - I'll strongly advice to built a new directive.

Example.

PS. If you're new to Angular, this may be useful :-)

这篇关于AngularJS 中的部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！