Angular 2
कोणीय[email protected] के साथ 3 पार्टी प्लगइन्स इंस्टॉल करना

टिप्पणियों

 'lodash': {
   format: 'cjs',
   defaultExtension: 'js',
   main: 'index.js'
 }

 'moment': {
   main: 'moment.js'
 }

कोणीय-क्ली परियोजना में jquery पुस्तकालय जोड़ना

1. Npm के माध्यम से jquery स्थापित करें:

 npm install jquery --save 

लाइब्रेरी के लिए टाइपिंग स्थापित करें:

लाइब्रेरी के लिए टाइपिंग जोड़ने के लिए, निम्नलिखित कार्य करें:

typings install jquery --global --save

2. वल्कैर-क्लि-बिल्ड.js फ़ाइल के लिए jquery को वेंडरएनपीएम फाइल्स सरणी में जोड़ें:

   यह आवश्यक है इसलिए निर्माण प्रणाली फ़ाइल को उठाएगी। सेटअप के बाद कोणीय- cli-build.js इस तरह दिखना चाहिए:

node_modules ब्राउज़ करें और node_modules फ़ाइलों और फ़ोल्डरों की node_modules करें जिन्हें आप विक्रेता फ़ोल्डर में जोड़ना चाहते हैं।

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      // ...
      'jquery/dist/*.js'


    ]
  });
};

3. जहां jquery के लिए देखने के लिए पता करने के लिए SystemJS मैपिंग कॉन्फ़िगर करें:

   SystemJS कॉन्फ़िगरेशन सिस्टम-config.ts में स्थित है और कस्टम कॉन्फ़िगरेशन किए जाने के बाद संबंधित अनुभाग इस तरह दिखना चाहिए:

/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery'
};

/** User packages configuration. */
const packages: any = {
            
// no need to add anything here for jquery

};

4. अपने src / index.html में इस लाइन को जोड़ें

<script src="vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>

आपके अन्य विकल्प हैं:

<script src="vendor/jquery/dist/jquery.js" type="text/javascript"></script>

या

<script src="/vendor/jquery/dist/jquery.slim.js" type="text/javascript"></script>

तथा

<script src="/vendor/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>

5. अपने प्रोजेक्ट स्रोत फ़ाइलों में jquery लाइब्रेरी का आयात और उपयोग करना:

   अपने स्रोत में। Jquery लाइब्रेरी को इस तरह से आयात करें:

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // now you can DO, what ever you want 
     });
     console.log();
  }
}

यदि आपने सही तरीके से चरणों का पालन किया है, तो आपके पास अपने प्रोजेक्ट में काम करने वाली लाइब्रेरी होनी चाहिए। का आनंद लें!

3 पार्टी लाइब्रेरी जोड़ें जिसमें टाइपिंग नहीं है

ध्यान दें, यह केवल कोणीय-क्ली के लिए 1.0.0-Beta.10 संस्करण तक है!

कुछ लाइब्रेरी या प्लग इन में टाइपिंग नहीं हो सकती है। इन के बिना, टाइपस्क्रिप्ट उन्हें टाइप नहीं कर सकता और इसलिए संकलन त्रुटियों का कारण बनता है। इन पुस्तकालयों को अभी भी उपयोग किया जा सकता है लेकिन आयातित मॉड्यूल की तुलना में अलग है।

1. अपने पृष्ठ पर लाइब्रेरी के लिए एक स्क्रिप्ट संदर्भ शामिल करें ( index.html )

   <script src="//cdn.somewhe.re/lib.min.js" type="text/javascript"></script>
   <script src="/local/path/to/lib.min.js" type="text/javascript"></script>
   

   • इन लिपियों में एक वैश्विक (जैसे THREE , mapbox , $ इत्यादि) जोड़ना चाहिए या एक वैश्विक से mapbox चाहिए

2. जिस घटक में इनकी आवश्यकता होती है, उस लिबर द्वारा उपयोग किए जाने वाले वैश्विक नाम से मेल खाने वाले वैरिएबल को इनिशियलाइज़ declare लिए declare करें। इससे टाइपस्क्रिप्ट को पता चल जाता है कि यह पहले से ही इनिशियलाइज़ हो चुका है। ¹

   declare var <globalname>: any;
   

   कुछ लिबास window से जुड़े होते window , जिन्हें ऐप में एक्सेस करने के लिए विस्तारित करने की आवश्यकता होती है।

   interface WindowIntercom extends Window { Intercom: any; }
   declare var window: WindowIntercom;
   

3. आवश्यकतानुसार अपने घटकों में उपयोग करें।

   @Component { ... }
   export class AppComponent implements AfterViewInit {
       ...
       ngAfterViewInit() {
           var geometry = new THREE.BoxGeometry( 1, 1, 1 );
           window.Intercom('boot', { ... }
       }
   }
   

   • नोट: कुछ लिबास DOM के साथ इंटरैक्ट कर सकते हैं और उन्हें उपयुक्त घटक जीवनचक्र विधि में उपयोग किया जाना चाहिए।