AngularJSの一部のビュー

Question

私はAngularを初めて利用しています。

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

マイ最初ビュー時に、カテゴリのリストを示しています は基本的に、私はCategory 1一対多relationship-は私が別の部分のビューをレンダリングするレイアウトページを持っているいくつかのProduct、 を持っています

：カテゴリの一覧、および特定のカテゴリの製品のリスト、概略的に、それは次のようになります。そのうちの一つは、私は2つの部分に分離されている 二ビューは、表示され、クリックされました

私の問題は、別々の.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、私はのhrefを持つカテゴリのリストを持っている：

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

オン二 - categoryDetail.htmlが、私は再びが、別のhrefとカテゴリをリスト：

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

そして最後ビュー上 - product.html私は製品を一覧表示します。私は私のcategoryDetail.htmlproduct.html内のカテゴリをクリックして今まで

は、代わりに、レイアウトのmainContentのdivにレンダリングする - 私はそれがcategoryDetail.html内部のインナー部分としてレンダリングする必要があります。私は<ng-view>を再度使用しようとしましたが、これは正しいとは思われません。

Answer 1

AngularJSには部分的な方法がいくつかあります。

theresの無ロジックの場合、またはあなたがちょうどあなたのビューにHTMLファイルを含めることができ、親スコープから提供されますngが、含まれています。

例：

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

新しいディレクティブ

あなたが部分的にビット論理があるでしょうし、アプリ内の別々のモジュールとしてそれを使用したい場合は - I新しい指令を作成することを強くアドバイスします。

Example.

PS。Angularを初めてご使用の場合は、thisが便利です:-)