How can I import this in JavaScript?

Question

I have a JavaScript function that runs in an HTML file, but in order to avoid "angular is not defined", I put the following before my HTML script

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js">

Is there a way to do this in a actual JavaScript file? I want to write my function in a JavaScript file not HTML so I can't use src HTML code.

I tried copying all the code and putting it in a file and referencing the file in the JavaScript but it doesn't work.

Any workarounds?

Is it your linter that is complaining that it is not defined? If yes, set your projects lint config to let it know it is an angular app and it is defined. — epascarello, Oct 08 '19 at 19:48
@epascarello I dont think its linter because I have a console.log which never runs because its after the angular.module code so i believe its a bug in the code. Unless I am wrong in thinking linter is for styles and stuff — stack flow, Oct 08 '19 at 19:50
Possible duplicate of [Dynamically load a JavaScript file](https://stackoverflow.com/questions/21294/dynamically-load-a-javascript-file) — Heretic Monkey, Oct 08 '19 at 19:51

Vendetta · Answer 1 · 2020-01-17T19:35:15.877

0

Something like:

    const libname = require("https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js")

Should import the .js file into your project.

edited Jan 17 '20 at 19:35

answered Oct 08 '19 at 19:46

Vendetta

2,078
3
13
31

it responded with "can't find module" and the link provided up there. – stack flow Oct 08 '19 at 19:48
This will only work in situations where `require` is defined. See [Client on node: Uncaught ReferenceError: require is not defined](https://stackoverflow.com/q/19059580/215552) for more information. – Heretic Monkey Oct 08 '19 at 19:50
https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file Try that thread, I think it might help. – Vendetta Oct 08 '19 at 19:57

score 0 · Answer 2 · edited Oct 08 '19 at 23:13

0

There are a variety of solutions to this problem and you should review how scripts load and the onready events for an html document. One simple solution would be coding your custom function to be called in an approach something like this:

<script onload="myCustomFunction();"
        src ="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js" >
</script>`

Of course, there are really many different approaches and I would consider this one only to use in a quick and dirty situation.

edited Oct 08 '19 at 23:13

georgeawg

48,608
13
72
95

answered Oct 08 '19 at 19:52

tarik

312
1
9

From the OP: "I want to write my function in a JavaScript file not HTML so I can't use src HTML code." – Heretic Monkey Oct 08 '19 at 19:53
The myCustomFunction() definition can be in a Javascript file. It should be loaded before the angular.js file. – tarik Oct 08 '19 at 19:54
FWIW, this question is a completely standard use case of how to use angular and the user should consider reading the angularjs tutorials which demonstrate how to write angular code. – tarik Oct 08 '19 at 19:56

score 0 · Answer 3 · answered Oct 08 '19 at 20:54

A simple technique that I use to load dependencies is to dynamically append them to the document head and use a load EventListener to run my code after the external script has finished loading.

let s = document.createElement('script');
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js';
s.addEventListener('load', init);
document.head.appendChild(s);

function init() {
  // your code here
}

Source: I build a lot of plugins/widgets.

How can I import this in JavaScript?

3 Answers3