एकाधिक नियंत्रकों के लिए angularjs में रूटिंग?

मैं एक दृश्य बनाने की कोशिश कर रहा हूं - मैंने अभ्यास करने के लिए दो नियंत्रक स्थापित किए हैं, किसी के हैडरक्रिटर, इसमें कुछ डेटा (साइट शीर्षक, हेडर पृष्ठभूमि, आदि) के साथ, दूसरे के पास पृष्ठ की मुख्य सामग्री होनी चाहिए - MainCtrl।एकाधिक नियंत्रकों के लिए angularjs में रूटिंग?

जब मार्ग को परिभाषित करने, मैं इतना की तरह कर रहा हूँ:

mainApp.config(function ($routeProvider) { 
$routeProvider 
    .when('/', 
    { 
     controller: 'MainCtrl', 
     templateUrl: 'modules/dashboard.html' 
    }) 
})

यह पूरी तरह से ठीक काम करता है, लेकिन मैं क्या चाहते हो जाएगा, कुछ इस तरह यह करने के लिए एक से अधिक पैरामीटर निर्दिष्ट करने के लिए है:

mainApp.config(function ($routeProvider) { 
$routeProvider 
    .when('/', 
    { 
     controller: 'HeaderCtrl', 
     templateUrl: 'modules/header.html' 
    }, 
    { 
     controller: 'MainCtrl', 
     templateUrl: 'modules/dashboard.html' 
    }) 
})

यह काम नहीं करता है इसलिए मुझे लगता है कि यह करने का तरीका नहीं है। मैं वास्तव में क्या पूछ रहा हूं - क्या आप $ रूटप्रोवाइडर में एकाधिक नियंत्रक निर्दिष्ट कर सकते हैं? या इस दृष्टिकोण को बनाने का सही तरीका क्या होगा?

स्रोत

2013-06-27 greedz

इस समस्या के लिए मेरा दृष्टिकोण दो निर्देश होना चाहिए - हेडर और मुख्य जो संबंधित टेम्पलेट का संदर्भ देता है।

उदाहरण के लिए:

app.directive('header', function() { 
    return { 
    restrict: 'A', 
    replace: true, 
    templateUrl:'templates/header.html' 
    } 
})

तो फिर तुम एक पेज है कि निर्देशों में शामिल हो सकते हैं - index.html।

<div header></div> 
<div main></div>

फिर एक नियंत्रक कि आपका index.html

के लिए मार्गों तुम भी शीर्षक और अलग शीर्षक और मुख्य नियंत्रक में मुख्य संपुटित कर सकते हैं आप अलग से उन लोगों के साथ सौदा करना चाहते हैं तो कर सकते है।

उदा।

<div ng-controller="HeaderCtrl"> 
    <div header></div> 
</div> 
<div ng-controller="MainCtrl"> 
    <div main></div> 
</div>

या टेम्पलेट्स के साथ खुद को

स्रोत

2013-06-28 01:03:45 jeh

मुझे इस विधि को काम करने के लिए 'transclude: true' का उपयोग करना पड़ा – ZimSystem

मुझे नहीं लगता कि आप एकाधिक नियंत्रक निर्दिष्ट कर सकते हैं। मुझे लगता है कि आप जो खोज रहे हैं एक 'index.html' टेम्पलेट की तरह कुछ है कि आपके शीर्षक और डैशबोर्ड के लिए संदर्भित करता है:

<div id='header' ng:controller='HeaderCtrl' /> 
<div id='main' ng:controller='MainCtrl' />

वास्तव में सही टेम्प्लेट के साथ में भरने के लिए, मैं एक निर्देश का प्रयोग करेंगे। मुझे लगता है कि यह कोणीय के सबसे शक्तिशाली भागों में से एक है। आप एक हेडर निर्देश बना सकते हैं जिसे आप अपने सभी पृष्ठों पर पुन: उपयोग कर सकते हैं।

स्रोत

2013-06-27 23:15:19

आप जो करना चाहते हैं वह HeaderCtrlng-view के बाहर रखें और उसके बाद MainCtrl आपके इंडेक्स रूट (यानी '/') पर मैप किया गया है। यदि आपको अपने इंडेक्स रूट पर मैप किए गए मल्टीप्ल नियंत्रक की आवश्यकता होती है, तो आप उन्हें उस टेम्पलेट के भीतर असाइन कर सकते हैं जिसे आपने उस मार्ग पर मैप किया है। यहाँ कि कैसा दिखेगा क्या है:

index.html

<html> 
<body ng-app='yourApp'> 
    <div id="header" ng-controller="HeaderCtrl"></div> 
    <div ng-view></div> 
</body> 
</html>

app.js

angular.module('mainApp', []). 
config(function ($routeProvider) { 
    $routeProvider.when('/', { 
     controller: 'MainCtrl', 
     templateUrl: 'modules/dashboard.html' 
    }) 
});

dashboard.html

<div ng-controller="SomeCtrl"></div> 
<div ng-controller="SomeOtherCtrl"></div>

... या, यदि आप वास्तव में रचनात्मक बनना चाहते हैं, तो आप AngularUI लोगों https://github.com/angular-ui/ui-router से ui-router शामिल कर सकते हैं यह आपको कई "दृश्य" रखने और उन्हें अपने मार्गों पर मैप करने की अनुमति देगा।

स्रोत

2013-06-27 23:48:29

-1

यह काम करना चाहिए

mainApp.config(function ($routeProvider) { 
$routeProvider 
    .when('/', 
    { 
     controller: 'HeaderCtrl', 
     templateUrl: 'modules/header.html' 
    }).when('', //route here in the empty quotes 
    { 
     controller: 'MainCtrl', 
     templateUrl: 'modules/dashboard.html' 
    }); 
});

स्रोत

2013-09-20 10:56:21 rohit

आप के कोणीय यूआई-रूटर का उपयोग करना चाहिए इस प्रयास करें: https://github.com/angular-ui/ui-router, आप प्रत्येक "तत्व" के लिए एक नियंत्रक और टेम्पलेट निर्दिष्ट कर सकते हैं आपके पृष्ठ का:

myApp.config(function($stateProvider) { 
 
    $stateProvider 
 
    .state('index', { 
 
     url: "", 
 
     views: { 
 
     "viewA": { template: "index.viewA" }, 
 
     "viewB": { template: "index.viewB" } 
 
     } 
 
    }) 
 
    .state('route1', { 
 
     url: "/route1", 
 
     views: { 
 
     "viewA": { template: "route1.viewA" }, 
 
     "viewB": { template: "route1.viewB" } 
 
     } 
 
    }) 
 
    .state('route2', { 
 
     url: "/route2", 
 
     views: { 
 
     "viewA": { template: "route2.viewA" }, 
 
     "viewB": { template: "route2.viewB" } 
 
     } 
 
    }) 
 
});

स्रोत

2015-08-28 18:33:15

एकाधिक नियंत्रकों के लिए angularjs में रूटिंग?

उत्तर

संबंधित मुद्दे