AngularJS

Question

में आंशिक विचार मैं कोणीय के लिए नया हूं और किसी भी सलाह की सराहना करता हूं। मूल रूप से, मेरे पास है एक-से-कई रिश्ते एक Category कई Product, मैं लेआउट पृष्ठ जहाँ मैं अलग आंशिक दृश्य प्रस्तुत करना है है:

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

मेरे पहले दृश्य श्रेणियों की सूची से पता चलता है, जब उनमें से एक क्लिक किया जाता है, मैं दूसरा जो दो भागों को अलग किया जाता है देखने के लिए, दिखाने: विशेष श्रेणी के उत्पादों की श्रेणियों की सूची, और सूची, रेखाचित्र के रूप में यह दिखाई देता है:

मेरी समस्या यह है कि मैं यह नहीं समझ सकता कि उत्पादों की सूची के लिए किसी अन्य आंशिक का उपयोग कैसे करें क्योंकि उन्हें अलग-अलग रखना है। एचटीएमएल।

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

और नियंत्रकों:

मैं मार्गों कॉन्फ़िगर किया गया -:

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

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 साथ श्रेणियों की सूची है

पर दूसरा - categoryDetail.html, मैं श्रेणियों फिर से लेकिन सूची एक और hrefs साथ:

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

और पिछले दृश्य पर - product.html मैं उत्पादों की सूची।

अब तक, जब मैं categoryDetail.html अंदर श्रेणी पर क्लिक मेरी product.html लेआउट के mainContent div में प्रस्तुत हुई है, बजाय - मैं इसे जरूरत के रूप में आंतरिक आंशिक अंदर categoryDetail.html रेंडर करने के लिए। मैंने फिर से <ng-view> का उपयोग करने की कोशिश की, लेकिन यह सही नहीं लगता है।

Answer 1

AngularJS में आंशिक के लिए कुछ तरीके हैं।

एनजी-शामिल

थेरेस तो कोई तर्क है, या यह माता पिता के दायरे से उपलब्ध कराया जाएगा तो आप बस अपने दृश्य में एक html फ़ाइल शामिल कर सकते हैं।

उदाहरण:

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

नए निर्देश

आप अपनी आंशिक में एक सा तर्क होगा, और आप अपने अनुप्रयोग में एक अलग मॉड्यूल के रूप में उपयोग करना चाहते हैं तो - मैं एक नया निर्देश बनाने के लिए दृढ़ता से सलाह देंगे।

Example.

पी एस।यदि आप कोणीय के लिए नए हैं, this उपयोगी हो सकता है :-)