AngularJS - TemplateUrl बनाने में $ मार्गप्रेम का उपयोग कैसे करें?

Question

हमारे आवेदन में 2-स्तरीय नौवहन है। हम AngularJS का उपयोग $routeProviderगतिशील रूप से टेम्पलेट प्रदान करने के लिए करना चाहते हैं <ng-view />। मैं इस की तर्ज पर कुछ करने की सोच रहा था:

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:primaryNav/:secondaryNav', {
        templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
    });
}]);

मैं अभी नहीं जानता कि कैसे के भीतर भागों को आबाद करने के लिए <<>>। मुझे पता है कि PrimaryNav और SecondaryNav $ मार्गप्रेमों से बंधे हुए हैं, लेकिन मैं खाका बनाने के लिए गतिशील रूप से सेवा करने के लिए यहाँ $ मार्गप्रेम का उपयोग कैसे करूँ?

Answer 1

मुझे $routeParamsसेवा को इंजेक्ट करने और उपयोग करने का एक तरीका नहीं मिला (जो मुझे लगता है कि एक बेहतर समाधान होगा) मैंने यह सोचने की कोशिश की कि यह काम कर सकता है:

angular.module('myApp', []).
    config(function ($routeProvider, $routeParams) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
        });
    });

जिससे यह त्रुटि हुई:

अज्ञात प्रदाता: myApp से $ मार्गप्रेम

यदि ऐसा कुछ संभव नहीं है, तो आप अपनी templateUrlआंशिक HTML फ़ाइल को इंगित करने के लिए बदल सकते हैं, जो आपके पास है ng-includeऔर फिर URL का उपयोग करके अपने नियंत्रक में सेट $routeParamकरें:

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/urlRouter.html',
            controller: 'RouteController'
        });
    });

function RouteController($scope, $routeParams) {
        $scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
    }

इसके साथ ही आपकी urlRouter.html

<div ng-include src="templateUrl"></div>

Comments

पूर्व क्यों काम नहीं करता है, इस समस्या का दस्तावेजीकरण किए गए समूह हैं । www.forum/?fromgroups=# .topic/angular/qNi5lqm-Ps8 । जैसा कि config()केवल प्रदाताओं को इंजेक्शन लक्ष्य दिया जाता है, न कि वास्तविक सेवा उदाहरण जैसे $routePrams।

— एनआर

आपको वास्तव में "वन-लाइन एचटीएमएल फ़ाइल" बनाने की ज़रूरत नहीं है - बस "टेम्प्लेट

— यूआरएल

क्या आप templateइसके बजाय सिर्फ उपयोग नहीं कर सकते templateUrl?

— कैसर

यह वास्तव में काम करेगा, लेकिन चयनित प्रत्येक टेम्पलेट के लिए एक नियंत्रक लागू करने के बारे में क्या? इस पद्धति का उपयोग करने से आप केवल एक "मास्टर" नियंत्रक के साथ छोड़ देंगे: "रूटकंट्रोलर"

— एफ़्रैम

यदि आप templateकिसी फ़ंक्शन पर सेट हैं , तो आप $routeParamsउस फ़ंक्शन में पास कर सकते हैं $routeProvider.when('/:pNav/:sNav', { template: fn($routeParams) { return $routeParams.pNav + '/' + $routeParams.sNav + '.html' } });:। हालाँकि, आप डायनेमिक रूप से किसी कंट्रोलर को इस तरह से परिभाषित नहीं कर सकते हैं :(

— जैकब

Answer 2

यह बहुत ही उपयोगी सुविधा अब AngularJS के संस्करण 1.1.2 पर शुरू हो रही है। यह अस्थिर माना जाता है लेकिन मैंने इसका इस्तेमाल किया है (1.1.3) और यह ठीक काम करता है।

मूल रूप से आप एक टेम्पलेट का उपयोग करने के लिए फंक्शन का उपयोग कर सकते हैं। फ़ंक्शन को रूट पैरामीटर पारित किया जाता है जिसे आप टेम्पलेट यूआरएल स्ट्रिंग बनाने और वापस करने के लिए उपयोग कर सकते हैं।

var app = angular.module('app',[]);

app.config(
    function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl:'/home'}).
            when('/users/:user_id', 
                {   
                    controller:UserView, 
                    templateUrl: function(params){ return '/users/view/' + params.user_id; }
                }
            ).
            otherwise({redirectTo:'/'});
    }
);

पुल अनुरोध के लिए https://github.com/lrlopez को बहुत धन्यवाद ।

https://github.com/angular/angular.js/pull/1524

Comments

यह अब 1.2 में पूरी तरह से समर्थित है और यह संभवतः सबसे अच्छा तरीका है: docs.angularjs.org/api/ngRoute/provider/$routeProvider

— Stu

क्या एक गतिशील नियंत्रक के बारे में params पर आधारित है?

— ओक

कृपया, कृपया (कृपया!) मुझे बताएं कि ऐसा करना संभव है controllers...?

— कोडी

आप इस मामले में टेम्प्लेट से नियंत्रक तक कैसे पहुँच सकते हैं ($ मार्गप्रॉप्टर द्वारा आपूर्ति की गई है)? आम तौर पर, यदि नियंत्रक एनजी-नियंत्रक = "myController" निर्देश से बंधा है, तो आप इसे myCtrl के रूप में myController का संदर्भ दे सकते हैं। मैं इस मामले में myCtrl को कैसे परिभाषित करूं?

— फ्लेवर्डस्केप

@FlavorScape मैं अभी भी यह मुद्दा था - समाधान $ मार्गप्रोवाइडर की तरह करना है। जब ("/ foo", {नियंत्रक: "FooController", नियंत्रक: "foo", templateUrl: "foo.html"});

— एरिन ड्रमंड बाद

Answer 3

टेम्पलेट यूआरएल उत्पन्न यूआरएल के साथ फ़ंक्शन के रूप में उपयोग किया जा सकता है। हम मार्ग तर्क के साथ url में हेरफेर कर सकते हैं जो मार्गप्राम लेता है।

उदाहरण देखें।

.when('/:screenName/list',{
    templateUrl: function(params){
         return params.screenName +'/listUI'
    }
})

उममीद है कि इससे मदद मिलेगी।

Answer 4

ठीक है, लगता है कि मैं समझ गया ...

छोटी पृष्ठभूमि पहले: मुझे जिस कारण की आवश्यकता थी, वह यह था कि कोणीय एक्सप्रेस के शीर्ष पर कोणीय चिपका था और जेड ने मेरे लिए मेरे हिस्से की प्रक्रिया की थी।

तो यहाँ whatchya क्या होगा ... (बीयर पीना और पहले उस पर 20+ घंटे खर्च करना !!!) ... !!!

जब आप अपना मॉड्यूल सेट करते हैं, तो $routeProviderविश्व स्तर पर सहेजें :

// app.js:
var routeProvider
    , app = angular.module('Isomorph', ['ngResource']).config(function($routeProvider){

        routeProvider = $routeProvider;
        $routeProvider
            .when('/', {templateUrl: '/login', controller: 'AppCtrl'})
            .when('/home', {templateUrl: '/', controller: 'AppCtrl'})
            .when('/login', {templateUrl: '/login', controller: 'AppCtrl'})
            .when('/SAMPLE', {templateUrl: '/SAMPLE', controller: 'SAMPLECtrl'})
            .when('/map', {templateUrl: '/map', controller: 'MapCtrl'})
            .when('/chat', {templateUrl: '/chat', controller: 'ChatCtrl'})
            .when('/blog', {templateUrl: '/blog', controller: 'BlogCtrl'})
            .when('/files', {templateUrl: '/files', controller: 'FilesCtrl'})
            .when('/tasks', {templateUrl: '/tasks', controller: 'TasksCtrl'})
            .when('/tasks/new', {templateUrl: '/tasks/new', controller: 'NewTaskCtrl'})
            .when('/tasks/:id', {templateUrl: '/tasks', controller: 'ViewTaskCtrl'})
            .when('/tasks/:id/edit', {templateUrl: '/tasks', controller: 'EditTaskCtrl'})
            .when('/tasks/:id/delete', {templateUrl: '/tasks', controller: 'DeleteTaskCtrl'})
        .otherwise({redirectTo: '/login'});

});

// ctrls.js
...
app.controller('EditTaskCtrl', function($scope, $routeParams, $location, $http){

    var idParam = $routeParams.id;
    routeProvider.when('/tasks/:id/edit/', {templateUrl: '/tasks/' + idParam + '/edit'});
    $location.path('/tasks/' + idParam + '/edit/');

});
...

कि जरूरत से ज्यादा जानकारी हो सकती है ...

• मूल रूप से, आप अपने मॉड्यूल के $routeProviderसंस्करण को विश्व स्तर पर संग्रहीत करना चाहते हैं , उदाहरण के लिए routeProviderताकि इसे आपके नियंत्रकों द्वारा एक्सेस किया जा सके।

• तब आप बस routeProviderएक नया मार्ग बना सकते हैं और उपयोग कर सकते हैं (आप एक मार्ग को 'रीसेट नहीं कर सकते' / 'रिप्राइज़'; आपको एक नया बनाना होगा), मैंने सिर्फ अंत में एक स्लैश (/) जोड़ा ताकि यह अर्थपूर्ण हो पहले की।

• फिर (अपने नियंत्रक के अंदर), templateUrlउस दृश्य पर सेट करें जिसे आप हिट करना चाहते हैं।

• ऑब्जेक्ट की controllerसंपत्ति को बाहर .when()निकालें, ऐसा न हो कि आपको एक अनंत अनुरोध लूप मिले।

• और अंत में (अभी भी नियंत्रक के अंदर), $location.path()उस रूट पर पुनर्निर्देशित करें जो अभी बनाया गया था।

यदि आप एक्सप्रेस ऐप पर एक कोणीय एप्लिकेशन को थप्पड़ मारने के तरीके में रुचि रखते हैं, तो आप यहां मेरे रेपो को कांटा कर सकते हैं: https://github.com/cScarlson/isomorph ।

और यह विधि आपके लिए AngularJS Bidirectional Data-Bindings रखने की भी अनुमति देती है, यदि आप अपने HTML को WebSockets का उपयोग करके अपने डेटाबेस में बाँधना चाहते हैं: अन्यथा इस विधि के बिना, आपका Angular data-bindings सिर्फ आउटपुट देगा {{model.param}}।

यदि आप इस समय इसे क्लोन करते हैं, तो आपको इसे चलाने के लिए अपनी मशीन पर mongoDB की आवश्यकता होगी।

आशा है कि यह इस मुद्दे को हल करता है!

कोड़ी

अपने स्नान के पानी को मत पीजिए।

Answer 5

रूटर: -

...
.when('/enquiry/:page', {
    template: '<div ng-include src="templateUrl" onload="onLoad()"></div>',
    controller: 'enquiryCtrl'
})
...

नियंत्रक: -

...
// template onload event
$scope.onLoad = function() {
    console.log('onLoad()');
    f_tcalInit();  // or other onload stuff
}

// initialize
$scope.templateUrl = 'ci_index.php/adminctrl/enquiry/'+$routeParams.page;
...

मेरा मानना ​​है कि यह एंगुलरज में कमजोरी है कि राउटर के अंदर $ मार्गप्रैम दिखाई नहीं देते हैं। एक छोटी सी वृद्धि कार्यान्वयन के दौरान अंतर की दुनिया बना देगी।

Answer 6

मैंने कोणीय के अपने कांटे में इसके लिए समर्थन जोड़ा है। यह आपको निर्दिष्ट करने की अनुमति देता है

$routeProvider
    .when('/:some/:param/:filled/:url', {
          templateUrl:'/:some/:param/:filled/template.ng.html'
     });

https://github.com/jamie-pate/angular.js/commit/dc9be174af2f6e8d55b798209dfb9235f390b934

सुनिश्चित नहीं है कि यह उठाया जाएगा क्योंकि यह कोणीय के लिए अनाज के खिलाफ है, लेकिन यह मेरे लिए उपयोगी है

Comments

सही पर! हेवेंट ने इसका उपयोग अभी तक किया है, लेकिन वास्तव में इसकी आवश्यकता है। क्या कोई अन्य कैवेट है जिसे मुझे देखना चाहिए? इसके अलावा, कोणीय को लागू करने पर कोई भी शब्द? - मुझे CDN का उपयोग करना पसंद है।

— कोड़ी

कोई विचार नहीं है, मुझे कभी भी कागजी कार्रवाई पर हस्ताक्षर नहीं मिला, इसलिए यह एक मृत अंत है, लेकिन आप बदलाव ले सकते हैं और इसे अपने आप में खींचने की कोशिश कर सकते हैं (मैं अब उस कंपनी में काम नहीं करता, जो मैं ऐसा करने के साथ था, और वे नहीं करते थे आगे किसी भी प्रकार के कोणीयज का पीछा करें)

— जेमी पटे

ठीक है, इस जानकारी के लिए धन्यवाद और इस मुद्दे पर आपके योगदान - मैं इसे खींच रहा हूं और एक मिनट में इसके साथ खेल रहा हूं।

— कोडी

Answer 7

//module dependent on ngRoute  
 var app=angular.module("myApp",['ngRoute']);
    //spa-Route Config file
    app.config(function($routeProvider,$locationProvider){
          $locationProvider.hashPrefix('');
          $routeProvider
            .when('/',{template:'HOME'})
            .when('/about/:paramOne/:paramTwo',{template:'ABOUT',controller:'aboutCtrl'})
            .otherwise({template:'Not Found'});
    }
   //aboutUs controller 
    app.controller('aboutCtrl',function($routeParams){
          $scope.paramOnePrint=$routeParams.paramOne;
          $scope.paramTwoPrint=$routeParams.paramTwo;
    });

index.html में

<a ng-href="#/about/firstParam/secondParam">About</a>

FirstParam और secondParam अपनी जरूरत के अनुसार कुछ भी हो सकता है।

Answer 8

मैं एक समान मुद्दा था और के $stateParamsबजाय इस्तेमाल कियाrouteParam