कोणीय घटक आधारित दृष्टिकोण और रूटर में संकल्प के साथ काम कर रहे

Question

तो मैं कोणीय में घटक आधारित दृष्टिकोण के साथ काम कर रहा हूँ, मान लीजिए कि मैं एक निर्देश <home></home>;

import template from './home.html'; 
import controller from './home.controller.js'; 

angular.module('myApp') 
    .directive('home', homeDirective); 

let homeDirective =() => { 
    return { 
     restrict: 'E', 
     template, 
     controller, 
     controllerAs: 'vm', 
     bindToController: true 
    }; 
}; 

कहा जाता है अब मैं घटक का उपयोग करने में सक्षम हूँ है इस प्रकार मेरे मार्ग में <home></home>:

angular.module('myApp') 
    .config(($routeProvider) => { 
     $routeProvider.when('/', { 
      template: '<home></home>' 
     }) 
    }) 

मैं वास्तव में इस दृष्टिकोण की तरह है, लेकिन "पुराने" दृष्टिकोण मैं केवल घटक रेंडर करने के लिए मेरी routeconfig में "संकल्प" का उपयोग करने के लिए इस्तेमाल किया गया था के साथ जब एक वादा हल किया गया था:

angular.module('myApp') 
    .config(($routeProvider) => { 
     $routeProvider.when('/', { 
      templateUrl: './home.html', 
      controller: './home.controller.js', 
      resolve: { 
      message: function(messageService){ 
       return messageService.getMessage(); 
      } 
     }) 
    }) 

प्रश्न

मैं कोणीय में एक घटक आधारित दृष्टिकोण के साथ संकल्प का उपयोग कैसे कर सकते हैं? आज

Answer 1

उस के बारे में एक बंद मुद्दा नहीं है: support resolve option for directives।

निष्कर्ष यह है कि वे मनमाने ढंग से निर्देशों को असीमित रूप से लोड नहीं करना चाहते हैं, क्योंकि इससे बहुत अधिक झिलमिलाहट हो जाएगी।

अच्छी खबर यह है कि कोणीय 2 डी परत पर इस (और बहुत कुछ) का समर्थन करता है जो एकजुट है और अतिरिक्त जटिलता का एक टन पेश नहीं करता है।

कोणीय 1.x में आप कुछ जानकारी के साथ निर्देश प्राप्त कर सकते हैं कि संदेश कहां प्राप्त किया जाना है, और अपने नियंत्रक में एसिंक्रोनस लोडिंग को संभालें। इस तरह आप कुछ अच्छी लोडर स्क्रीन भी दिखा सकते हैं।

angular.module('myApp') 
    .config(($routeProvider) => { 
     $routeProvider.when('/', { 
      template: '<home my-datasource="feed1"></home>' 
     }).when('/other', { 
      template: '<home my-datasource="feed2"></home>' 
     }) 
    }) 
    .factory('DataSources', (messageService) => { 
     return { 
      feed1: messageService.getMessage, 
      feed2: messageService.getError 
     }; 
    }); 

या, यदि आप message चाहते हमेशा एक ही स्रोत से हो सकता है, आप अपने नियंत्रक में messageService.getMessage().then(...) जला सकता है।

app.controller('HomeController', ($scope, messageService) => { 
    $scope.loaded = false; 
    messageService.getMessage().then(message => { 
     ... 
     $scope.loaded = true; 
    }); 
    ... 
}); 

:

आप के निर्देश दिखाई वादों को हल सब से पहले कम से होने के लिए नहीं करना चाहते हैं, तो आप एक गुंजाइश चर शुरू में गलत पर सेट और फिर सही करने के लिए यह संकल्प पर निर्धारित करते हैं, उदाहरण के लिए लागू कर सकते हैं और रूट तत्व पर ng-if="loaded" के साथ लोड होने तक निर्देश छुपाएं। हां, यह थोड़ा अधिक उपयोगकर्ता कोड है, लेकिन कम से कम सब कुछ पर आपका नियंत्रण है।

Answer 2

जैसा कि यह पता चला है, कोणीय $ रूटप्रोवाइडर हल किए गए स्थानीय लोगों को $ रूटChangeSuccess ईवेंट (nextRoute.locals) पर भेजता है।

angular.module('myApp', ['ngRoute']) 
.factory('$routeLocals', function($rootScope) { 
    var locals = {}; 
    $rootScope.$on('$routeChangeSuccess', function(_, newRoute) { 
    angular.copy(newRoute.locals, locals); 
    }); 
    return locals; 
}) 
.run(function($routeLocals) {}); 

तो फिर आप अपने निर्देश में $ routeLocals इंजेक्षन और उन्हें इस्तेमाल कर सकते हैं: तो तुम एक सेवा है कि मार्ग में परिवर्तन के लिए सुनता है और उजागर करता है स्थानीय लोगों बना सकते हैं।

उदाहरण: http://codepen.io/fbcouch/pen/eJYLBe

https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js#L614

Answer 3

कोणीय 1.x में जब कुछ डेटा मेरे निर्देश बाइंडिंग ('=') से अजाक्स से आता है और अधिक से अधिक मैं इस बाइंडिंग को निर्देश में देखता हूं, तो मैंने निर्देश सही तरीके से नहीं दिया है।मैं बहुत सारे स्टैकओवरफ्लो विषयों और ब्लॉगों की जांच करता हूं और वे डेटा बाइंडिंग और घड़ी के बारे में लिखते हैं, लेकिन यह मेरी मदद नहीं करता है, मैंने अपनी आंखों से देखा कि कुछ समय निर्देशित नहीं किया गया लेकिन डेटा आया।

निर्देशक माता-पिता नियंत्रक में केवल resolve इस स्थिति में मेरी सहायता करता है, क्योंकि अन्य मामलों में यह अपरिभाषित व्यवहार की तरह दिखता है। मैं अपने निर्देश से लॉग इन करता हूं, डेटा सेटअप ठीक है, लेकिन निर्देश प्रस्तुत नहीं किया गया है! (साधारण मामले में मैं इसे छिपाने के लिए ng-if या ng-show का उपयोग नहीं कर रहा हूं)।

आप पढ़ सकते हैं और अधिक here