दिलचस्प पोस्ट
MediaPlayer का उपयोग कर Android में एक यूआरएल से ऑडियो स्ट्रीमिंग? विंडोज सेवा के रूप में नेट कंसोल एप्लीकेशन पेजिंग UIScrollView फ़्रेम आकार से छोटा वेतन वृद्धि में CentOS 6.x / 7.x पर git के नवीनतम संस्करण को कैसे स्थापित करें एंड्रॉइड Geocoder getFromLocationName हमेशा शून्य प्रदान करता है CakePHP 3.0 -> खोज हालत के बीच लिनक्स आधारित (साझा होस्टिंग) वेब सर्वर पर wkhtmltopdf को कैसे स्थापित करें बाश: क्या स्ट्रिंग एक पूर्णांक के रूप में मान्य है? कम.जेएस क्रोम में काम नहीं कर रहा है std :: सेट उपयोगकर्ता परिभाषित प्रकार के साथ, कोई डुप्लिकेट सुनिश्चित करने के लिए कैसे पायथन स्लाइस असाइनमेंट मेमोरी उपयोग ड्रॉपडाउन सूची के संपादक संपादक मेरी C # gzip Fiddler या PHP की तुलना में एक बड़ी फ़ाइल क्यों बनाती है? सी # में ऑब्जेक्ट की एक प्रति बनाना मैं जावास्क्रिप्ट में स्ट्रिंग ऑब्जेक्ट में गुण क्यों नहीं जोड़ सकता / सकती हूं?

AngularJS गतिशील रूटिंग

मेरे पास वर्तमान में अंगूठी के साथ एक अंगुलोज़ अनुप्रयोग है, इसमें काम करता है और सब कुछ ठीक है।

मेरी app.js फ़ाइल इस तरह दिखती है:

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']). config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController }); $routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController }); $routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController }); $routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController }); $routeProvider.otherwise({ redirectTo: '/' }); }]); 

मेरे ऐप में एक सीएमएस बनाया गया है जहां आप प्रतिलिपि बना सकते हैं और / html / html / html /

मैं अभी भी रूटिंग प्रदाता के माध्यम से जाना चाहता हूं, हालांकि नए गतिशील रूप से जोड़े गए फ़ाइलों के लिए भी।

एक आदर्श दुनिया में रूटिंग पैटर्न होगा:

$ routeProvider.when ('/ pagename ', {templateUrl: '/ pages / pagename .html', नियंत्रक: CMSController});

इसलिए यदि मेरा नया पेज नाम "contact.html" था, तो मैं "/ संपर्क" लेने और "/pages/contact.html" पर रीडायरेक्ट करने के लिए कोणीय चाहता हूं।

क्या ये भी संभव है ?! और यदि हां तो कैसे ?!

अद्यतन करें

अब मुझे यह रूटिंग कॉन्फ़िग में है:

 $routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController }) 

और मेरे सीएमएससींट्रोलर में:

 function CMSController($scope, $route, $routeParams) { $route.current.templateUrl = '/pages/' + $routeParams.name + ".html"; alert($route.current.templateUrl); } CMSController.$inject = ['$scope', '$route', '$routeParams']; 

यह वर्तमान templateUrl को सही मूल्य पर सेट करता है।

हालांकि मैं अब एनजी-दृश्य को नए templateUrl मान के साथ बदलना चाहूंगा। यह कैसे निपुण है?

Solutions Collecting From Web of "AngularJS गतिशील रूटिंग"

 angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']). config(['$routeProvider', function($routeProvider) { $routeProvider.when('/page/:name*', { templateUrl: function(urlattr){ return '/pages/' + urlattr.name + '.html'; }, controller: 'CMSController' }); } ]); 
  • जोड़ना * आप गतिशील रूप से निर्देशिका के कई स्तरों के साथ काम करते हैं उदाहरण: / पृष्ठ / कार / बिक्री / सूची इस प्रदाता पर पकड़ होगी

डॉक्स (1.3.0) से:

"यदि templateUrl फ़ंक्शन है, तो इसे निम्न मानकों के साथ बुलाया जाएगा:

{अर्रे} – वर्तमान मार्ग को लागू करके वर्तमान $ location.path () से निकाले गए मार्ग पैरामीटर "

भी

जब (पथ, मार्ग): विधि

  • पथ नाम वाले समूहों को एक बृहदान्त्र से शुरू कर सकते हैं और एक स्टार के साथ समाप्त हो सकता है: उदा: नाम *। सभी पात्रों को उत्सुकता से $ रूट पैरामीटर में दिए गए नाम के तहत संग्रहीत किया जाता है, जब मार्ग मिलान

ठीक है इसे हल।

GitHub का समाधान जोड़ा गयाhttp://gregorypratt.github.com/AngularDynamicRouting

मेरे app.js रूटिंग कॉन्फ़िग में:

 $routeProvider.when('/pages/:name', { templateUrl: '/pages/home.html', controller: CMSController }); 

फिर मेरे सीएमएस नियंत्रक में:

 function CMSController($scope, $route, $routeParams) { $route.current.templateUrl = '/pages/' + $routeParams.name + ".html"; $.get($route.current.templateUrl, function (data) { $scope.$apply(function () { $('#views').html($compile(data)($scope)); }); }); ... } CMSController.$inject = ['$scope', '$route', '$routeParams']; 

#views मेरे <div id="views" ng-view></div>

तो अब यह मानक रूटिंग और गतिशील रूटिंग के साथ काम करता है।

इसका परीक्षण करने के लिए मैंने इसके बारे में.html को कॉपी किया है, जिसे पोर्टफोलियो 1 9 कहते हैं, इसमें से कुछ की सामग्री को बदल दिया है और मेरे ब्राउजर में एंट्री /#/pages/portfolio बदल गया है और हे क्रिस्टो पोर्टफोलियो html प्रदर्शित किया गया था ….

नवीनीकृत जोड़ा गया $ आवेदन और $ एचटीएमएल के लिए संकलित करें ताकि गतिशील सामग्री को इंजेक्ट किया जा सके।

मुझे लगता है कि ऐसा करने का सबसे आसान तरीका बाद में मार्गों को हल करना है, उदाहरण के लिए, आप जेएसओ के माध्यम से मार्ग पूछ सकते हैं। जाँच करें कि मैं $ मार्ग प्रदाता के माध्यम से कॉन्फ़िगरेशन चरण के दौरान $ $ के माध्यम से एक कारखाना बना देता हूं, इसलिए मैं रन चरण में $ मार्ग प्रदाता वस्तु का उपयोग कर रख सकता हूं, और यहां तक ​​कि नियंत्रकों में भी।

 'use strict'; angular.module('myapp', []).config(function($provide, $routeProvider) { $provide.factory('$routeProvider', function () { return $routeProvider; }); }).run(function($routeProvider, $http) { $routeProvider.when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/' }); $http.get('/dynamic-routes.json').success(function(data) { $routeProvider.when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }); // you might need to call $route.reload() if the route changed $route.reload(); }); }); 

$ मार्ग प्रदाता URI पैटर में, आप चर पैरामीटर निर्दिष्ट कर सकते हैं, जैसे: $routeProvider.when('/page/:pageNumber' ... , और $ नियंत्रक के माध्यम से अपने नियंत्रक में इसे एक्सेस करें।

$ मार्ग पृष्ठ के अंत में एक अच्छा उदाहरण है: http://docs.angularjs.org/api/ng.$route

संपादित करें (संपादित प्रश्न के लिए):

रूटिंग सिस्टम दुर्भाग्यवश बहुत ही सीमित है – इस विषय पर बहुत सी चर्चाएं हैं, और कुछ समाधान प्रस्तावित किए गए हैं, अर्थात् एकाधिक नामित दृश्य आदि के माध्यम से। लेकिन अभी, ngView डायरेक्टिव केवल प्रत्येक मार्ग के लिए एक दृश्य दिखाता है एक-एक-एक आधार आप इसके बारे में कई तरीकों से जा सकते हैं – सरल एक दृश्य के टेम्पलेट को एक लोडर के रूप में इस्तेमाल करना होगा, इसमें <ng-include src="myTemplateUrl"></ng-include> टैग ($ scope.myTemplateUrl नियंत्रक में बनाया जा सकता है)

मैं अधिक जटिल (लेकिन बड़ी और अधिक जटिल समस्याओं के लिए क्लीनर) समाधान का उपयोग करता हूं, मूल रूप से $ मार्ग सेवा को पूरी तरह से छोड़ना, जो यहां विस्तृत है:

http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

यह सुनिश्चित क्यों नहीं है कि यह काम करता है, लेकिन गतिशील (या वाइल्डकार्ड यदि आप पसंद करते हैं) मार्ग 1.2.0-आरसी 2 को कोणीय में संभव है …

 http://code.angularjs.org/1.2.0-rc.2/angular.min.js http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js angular.module('yadda', [ 'ngRoute' ]). config(function ($routeProvider, $locationProvider) { $routeProvider. when('/:a', { template: '<div ng-include="templateUrl">Loading...</div>', controller: 'DynamicController' }). controller('DynamicController', function ($scope, $routeParams) { console.log($routeParams); $scope.templateUrl = 'partials/' + $routeParams.a; }). 

example.com/foo -> भार "foo" आंशिक

example.com/bar-> भार "बार" आंशिक

एनजी-व्यू में किसी भी समायोजन की आवश्यकता नहीं है '/: A' मामला एकमात्र चर है जो मैंने पाया है कि इसे प्राप्त होगा .. '/: foo' काम नहीं करता जब तक कि आपके आंशिक रूप से सभी foo1, foo2, आदि … '/:' किसी भी आंशिक रूप से काम करता है नाम।

सभी मान गतिशील नियंत्रक को आग लगाते हैं – इसलिए कोई अन्यथा नहीं है, लेकिन मुझे लगता है कि आप एक डायनामिक या वाइल्डकार्ड रूटिंग परिदृश्य में देख रहे हैं।

AngularJS 1.1.3 के रूप में, अब आप ठीक कर सकते हैं कि आप नए कैच-सभी पैरामीटर का उपयोग करना चाहते हैं।

https://github.com/angular/angular.js/commit/7eafbb98c64c0dc079d7d3ec589f1270b7f6fea5

प्रतिबद्ध से:

इससे मार्गप्रोवाइडर पैरामीटर स्वीकार करने की अनुमति देता है जो सबस्ट्रिंग से मेल खाती हैं, भले ही वे स्लैश होते हैं, यदि वे एक बृहदान्त्र के बजाय एक तारांकन के साथ प्रीफ़िक्स हैं। उदाहरण के लिए, edit/color/:color/largecode/*largecode जैसे edit/color/:color/largecode/*largecode इस तरह से कुछ के साथ मेल edit/color/:color/largecode/*largecode http://appdomain.com/edit/color/brown/largecode/code/with/slashs

मैंने इसे खुद का परीक्षण किया है (1.1.5 का प्रयोग करके) और यह महान काम करता है बस ध्यान रखें कि प्रत्येक नए यूआरएल आपके नियंत्रक को पुनः लोड कर देगा, ताकि किसी भी तरह की स्थिति को बनाए रखने के लिए आपको कस्टम सेवा का उपयोग करना पड़ सकता है

यहां एक और समाधान है जो अच्छे काम करता है

 (function() { 'use strict'; angular.module('cms').config(route); route.$inject = ['$routeProvider']; function route($routeProvider) { $routeProvider .when('/:section', { templateUrl: buildPath }) .when('/:section/:page', { templateUrl: buildPath }) .when('/:section/:page/:task', { templateUrl: buildPath }); } function buildPath(path) { var layout = 'layout'; angular.forEach(path, function(value) { value = value.charAt(0).toUpperCase() + value.substring(1); layout += value; }); layout += '.tpl'; return 'client/app/layouts/' + layout; } })();