मैं एंगुलर में जावास्क्रिप्ट स्क्रिप्ट फ़ाइल कैसे शामिल करूं और उस स्क्रिप्ट से कोई फ़ंक्शन कॉल करूं?

119

मेरे पास एक जावास्क्रिप्ट फ़ाइल है जिसे abc.js'सार्वजनिक' फ़ंक्शन कहा जाता है xyz()। मैं अपने एंगुलर प्रोजेक्ट में उस फंक्शन को बुलाना चाहता हूं। मैं उसको कैसे करू?

javascript angular

— पीयूष जैन
स्रोत

105

angular-cli.json( angular.jsonजब कोणीय 6+ का उपयोग करते हुए) फ़ाइल के अंदर स्क्रिप्ट देखें ।

"scripts": [
    "../path" 
 ];

फिर इसमें जोड़ें typings.d.ts( srcयदि यह फ़ाइल पहले से मौजूद नहीं है तो बनाएं )

declare var variableName:any;

इसे अपनी फ़ाइल में आयात करें

import * as variable from 'variableName';

— अरविंद
स्रोत

9

मैंने लिपियों में "स्क्रिप्ट" के रूप में जोड़ा: ["./assets/common_header_sidebar.js"]; उसके बाद typ.d.ts में मैंने डिक्लेयर किया var varHeader: any; और फिर मेरी ts फ़ाइल में मैंने 'सामान्य' से'HeaderModule 'के रूप में आयात * लिखा; लेकिन हो रहा है "मॉड्यूल 'कॉमन हैडर नहीं मिल सकता है।" त्रुटि

— पीयूष जैन

6

मैं यह पूछने के लिए मूर्खतापूर्ण लग सकता हूं। लेकिन कैसे पथ में फ़ाइल का नाम (कोणीय- cli.json में घोषित किया गया है) और type.d.ts फ़ाइल में ऑब्जेक्ट का नाम घोषित किया गया है। चूँकि मैं घोषित वस्तु के नाम से फ़ाइल नहीं आयात कर रहा हूँ

— पीयूष जैन

2

क्या आप plunkerपुन: उत्पन्न करने के लिए एक बना सकते हैं

— अरविंद

2

एकीकरण के साथ यह सिर्फ इतना है कि मुझे अपने ts फ़ाइल में फ़ंक्शन की घोषणा करनी थी जहां मैं इसका उपयोग कर रहा था और आयात की आवश्यकता नहीं थी। अनेक अनेक धन्यवाद ।

— पीयूष जैन

2

@Aravind क्या होगा अगर मेरे पास टाइपिंग नहीं है।अपनी कोणीय 4 परियोजना में फ़ाइल दर्ज करें?

— हबीब

33

एक वैश्विक पुस्तकालय को शामिल करने के लिए, उदाहरण के jquery.jsलिए स्क्रिप्ट सरणी में फ़ाइल angular-cli.json( angular.jsonजब कोणीय 6+ का उपयोग करके):

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

इसके बाद, यदि यह पहले से ही शुरू हो गया है तो एनजी सर्व को फिर से शुरू करें।

— राहुल सिंह
स्रोत

3

आप टाइपस्क्रिप्ट फ़ाइल पर कैसे आयात करते हैं?

— alansiqueira27

1

ts फ़ाइल के उपयोग में आयात करने के लिए -declare var $: any;

— ojus kulkarni

3

कोणीय- cli.json फ़ाइल को नाम बदलकर / कोणीय 6 संस्करण में कोणीय के साथ प्रतिस्थापित किया गया है।

— 19 Г И О И О

22

Index.html में बाहरी js फ़ाइल जोड़ें ।

<script src="./assets/vendors/myjs.js"></script>

यहाँ myjs.js फ़ाइल है:

var myExtObject = (function() {

    return {
      func1: function() {
        alert('function 1 called');
      },
      func2: function() {
        alert('function 2 called');
      }
    }

})(myExtObject||{})


var webGlObject = (function() { 
    return { 
      init: function() { 
        alert('webGlObject initialized');
      } 
    } 
})(webGlObject||{})

फिर घोषित करें कि यह नीचे की तरह घटक में है

demo.component.ts

declare var myExtObject: any;
declare var webGlObject: any;

constructor(){
    webGlObject.init();
}

callFunction1() {
    myExtObject.func1();
}

callFunction2() {
    myExtObject.func2();
}

demo.component.html

<div>
    <p>click below buttons for function call</p>
    <button (click)="callFunction1()">Call Function 1</button>
    <button (click)="callFunction2()">Call Function 2</button>
</div>

यह मेरे लिए काम कर रहा है ...

— नागनाथ मुंगड़े
स्रोत

बहुत अच्छी तरह से उदाहरण धन्यवाद, यह मेरे लिए कोणीय 6. पर काम किया अन्य कोई भी उत्तर काम नहीं किया।

— डैनियल फिलिप

Fwiw, यहाँ क्या declareकरता है के कुछ स्पष्टीकरण हैं - अनिवार्य रूप से " declareटाइपस्क्रिप्ट को यह बताने के लिए उपयोग किया जाता है कि चर कहीं और बनाया गया है " ( इस उत्तर से )।

— रफिन

18

आप या तो यह कर सकते हैं

import * as abc from './abc';
abc.xyz();

या

import { xyz } from './abc';
xyz()

— दुर्घटना
स्रोत

26

जब फ़ाइल कहीं होस्ट की जाती है, लेकिन स्थानीय रेपो में नहीं तो मुझे क्या करना चाहिए?

— पीयूष जैन

क्या आपने इसका पता लगाया?

— लुइस ऐसिटुनो

दोनों विधियों में त्रुटियां हो रही हैं। वैसे मेरी परियोजना में एक .js फ़ाइल है, लेकिन जब मैं पहली विधि से आयात करता हूँ तो मुझे संकलन में त्रुटि देता है और जब मैं दूसरी विधि का उपयोग करता हूं तो मुझे कोई मॉड्यूल नहीं मिल सकता है। और मैं सिर्फ चालाक स्लाइडर का उपयोग कर रहा हूं।

— हबीब