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

问题描述

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



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

我的第一视图显示类别列表，当其中一个是点击后，我将显示第二个视图，该视图分为两个部分：类别列表和特定类别的产品列表，其示意图如下所示：

我的问题是我不知道如何使用另一个部分的产品列表，因为想要将它们保存在单独的.html中。

我配置了路线：

  app.config（函数（$ routeProvider，$ locationProvider）{
 $ routeProvider 
 .when（'/ category'，{
 templateUrl：'category.html'，
 controller ：'categoryController as catCtrl'
}）
 .when（'/ category /：id'，{
 templateUrl：'categoryDe​​tail.html' ，
 controller：'categoryDe​​tailController as catDetailCtrl'
}）
 .when（'/ product /：category_id'，{
 templateUrl：'product.html'，
控制器：'productController as productCtrl'
}）
 .otherwise（{
 redirectTo：/ category
}）; 
}）; 
  

和控制器：

  app.controller（categoryController，function（$ http）
 {
 var vm = this; 
 vm.categories = somedata; 
}）; 
 app.controller（categoryDe​​tailController，function（$ http，$ routeParams）
 {
 var vm = this; 
 vm.category = somedata; // REST的当前类别api，使用$ routeParams.id 
}）; 
 app.controller（productController，function（$ http，$ routeParams）
 {
 var vm = this; 
 vm.products = somedata; //产品列表current类别使用$ routeParams.category_id 
}）; 
  

所以在我的第一视图 - 类别中。 html ，我有hrefs的类别列表：

 < a href =＃/ html>类别/ {{category.id}}> 
  

在秒 - categoryDe​​tail.html ，我再次列出类别，但与另一个hrefs：

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

并在最后视图 - 产品中显示。

直到现在，当我点击 categoryDe​​tail.html my product.html 在 mainContent div中渲染布局，而不是 - 我需要它渲染为内部部分在 categoryDe​​tail.html 中。我尝试再次使用< ng-view> ，但这似乎不正确。 解决方案

在AngularJS中有部分偏好的方法。

ng-include

如果没有逻辑，或者它将从父范围提供，那么您可以在您的视图中添加一个html文件。

示例：

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

新指令

如果您的部分内容有点逻辑，并且您希望将其作为应用中的单独模块使用，那么我强烈建议您构建一个新指令。

示例。

PS。如果您是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屋！