एंगुलर 2 एप्लिकेशन लोड होने पर कुछ प्रश्न क्या हैं

मैं कोणीय 2 एप्लिकेशन बनाने के लिए angular-cli का उपयोग कर रहा हूं। आवेदन ng new NEW_PROJECTNAME के साथ बनाया गया है, तो हमें index.html पृष्ठ मिलता है। इस पृष्ठ में उनके पास कुछ ऐसा है।एंगुलर 2 एप्लिकेशन लोड होने पर कुछ प्रश्न क्या हैं

... 
<body> 
<app-root>Loading...</app-root> 
... 
</body>

कहने की जरूरत नहीं है, यह लोडिंग संदेश पूरी तरह से गैर-व्यावसायिक दिखाई दे सकता है। तो मेरा सवाल यह है कि मैं प्रगति पट्टी या स्पिनर की तरह कुछ और उचित कैसे जोड़ूं?

मुझे एहसास है कि अंगुलर ढांचे के बाहर क्या हो रहा है (दाएं?)। मुझे कुछ कोणीय 2 पैकेज मिले जो उपयोग करने के लिए बहुत अच्छे होंगे (उदा। Angular 2 material या ng2-slim-loading-bar), लेकिन इन पैकेजों का मानना है कि मैंने पहले से ही कोणीय ढांचे में प्रवेश किया है; जिसका अर्थ है कि मैं कुछ कोणीय घटक के अंदर हूं।

तो मेरे प्रश्न इस प्रकार हैं।

वहाँ एक कोणीय 2 हुक है कि मैं पहले सामग्री <app-root></app-root> में रखा गया है एक लोडिंग सूचक को दिखाने के लिए उपयोग कर सकते हैं है?
अगर मुझे कोणीय ढांचे के बाहर काम करना है, तो सबसे अच्छा तरीका क्या होगा? Naively, मुझे लगता है कि मुझे bower या npm के साथ कुछ पैकेज स्थापित करना होगा, संदर्भ index.html में, और jQuery या लोडिंग सूचक दिखाने के लिए कुछ उपयोग करें। मुझे लगता है कि कोणीय लोड हो रहा है, यह <app-root></app-root> के अंदर जो कुछ भी है उसे प्रतिस्थापित करेगा। इस दृष्टिकोण के साथ मेरी चिंताओं में से एक इमारत/पैकेजिंग स्क्रिप्ट है (मुझे तब पता लगाना होगा कि मेरे निर्मित एप्लिकेशन के साथ इस बॉवर/एनपीएम पैकेज को कैसे शामिल किया जाए)।

किसी भी मदद की सराहना की जाती है।

स्रोत

2016-07-15 Jane Wayne

ऐप तैयार होने पर ऐप बूटस्ट्रैप घटक के अंदर एक सीएसएस एनीमेशन डालने का सबसे आसान तरीका सामग्री को प्रतिस्थापित किया जाएगा।

ध्यान दें कि स्क्रिप्ट के खनन के कारण ऐप एक विकास निर्माण या उत्पादन निर्माण के आधार पर अलग-अलग गति से लोड होगा और परिवर्तन का पता लगाने में तेजी से लोडिंग के समय केवल एक बार चलेंगे। आपको एनीमेशन की गति समायोजित करने की आवश्यकता हो सकती है। ऐप से एचटीपी अनुरोध भी एक भूमिका निभा सकते हैं। http://www.alessioatzeni.com/blog/css3-loading-animation/

सीएसएस और जड़ घटक में एचटीएमएल:

<app-root> 

    <style> 
    #content { 
     width: 100%; 
     /* Full Width */ 
     height: 1px; 
     margin: 1px auto; 
     background: #000; 
    } 

    .expand { 
     width: 100%; 
     height: 1px; 
     margin: 1px 0; 
     background: #2187e7; 
     position: absolute; 
     box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7); 

       /*adjust speed here */ 
     -moz-animation: fullexpand 1.5s ease-out; 
     -webkit-animation: fullexpand 1.5s ease-out; 
    } 


    /* Full Width Animation Bar */ 

    @-moz-keyframes fullexpand { 
     0% { 
     width: 0px; 
     } 
     100% { 
     width: 100%; 
     } 
    } 

    @-webkit-keyframes fullexpand { 
     0% { 
     width: 0px; 
     } 
     100% { 
     width: 100%; 
     } 
     ; 
    } 
    </style> 

    <div id="content"> 
     <span class="expand">Loading...</span> 
    </div> 


    </app-root>

दूसरा विकल्प bootstrap कार्यक्षमता गर्त system.js पहुँच सकते हैं और यह index.html में स्क्रिप्ट टैग के लिए उपलब्ध बनाने के लिए है

मैं इस से मिला है।

यहां एक ब्लॉग पोस्ट Ben Nadel नहीं है यह कैसे करें।

डेमो: Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1

(function(global) { 

    // .... code removed .... 

    System.config({ 
     // .... code removed .... 
    }); 

    // Load "./app/main.ts" (gets full path from package configuration above). 
    // -- 
    // NOTE: We are attaching the resultant promise to the global scope so that other 
    // scripts may listen for the successful loading of the application. 
    global.bootstrapping = System 
     .import("app") 
     .then(
      function handleResolve() { 

       console.info("System.js successfully bootstrapped app."); 

      }, 
      function handleReject(error) { 

       console.warn("System.js could not bootstrap the app."); 
       console.error(error); 

       return(Promise.reject(error)); 

      } 
     ) 
    ; 

})(window);

स्रोत

2016-07-15 08:21:08

बेन नेडेल ने अपने ब्लॉग में एक अद्यतन समाधान प्रकाशित किया। इसे यहां देखें - https://www.bennadel.com/blog/3147- क्रिएटिंग-an-event-driven-pre-bootstrap-loading-screen-in-angular-2-0-0.htm। हालांकि, मैं अभी भी डीओएम कार्यक्रमों और जावास्क्रिप्ट कोड के ढेर के साथ उस झगड़े को समझ नहीं पा रहा हूं, इसलिए मैं यहां प्रकाशित एक सरल समाधान के साथ जाता हूं - http://stackoverflow.com/a/35244932/968003। –

मैं FontAwesome और बूटस्ट्रैप के साथ एक सरल दृष्टिकोण के लिए चला गया:

<app-root> 
     <div class="text-center"> 
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> 
      <div>Something witty</div> 
     </div> 
    </app-root>

स्रोत

2016-11-26 01:01:51 Rodney

मैं हमारे ढेर (Webpack) के लिए किसी भी हुक नहीं मिली है।आप प्रत्येक मॉड्यूल के अंत में कुछ मनमाने ढंग से जावास्क्रिप्ट कोड जोड़ सकते हैं (यदि आप उनका उपयोग करते हैं) जो कुछ काउंटर बढ़ाएगा। वेबपैक के loaders API का उपयोग इसके लिए किया जा सकता है। (केवल तभी लागू होता है जब आप वेबपैक का उपयोग करते हैं।)

हमारी प्रोजेक्ट में, लोड करने वाले एप्लिकेशन की नकल करने के लिए @ कैस्पर समाधान का उपयोग किया जाता है, यानी दृष्टि से समान पृष्ठ, अल्गो, स्पिनर और उपयोगकर्ता को रखने के लिए कुछ जानकारी ऐप लोड होने तक इसे पढ़ने में व्यस्त।

स्रोत

2017-07-25 16:44:58

एंगुलर 2 एप्लिकेशन लोड होने पर कुछ प्रश्न क्या हैं

उत्तर

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