I am new to Angular(6) and I want to know where to add page specific script in angular 6, which I have placed earlier in .cshtml file?
I have found many ways to include external JS file in Angular, but I want to add a small piece of javascript code (mentioned below) into page (or component) and of course I do not want to create a separate JS file for this small script. I have already tried to put below mentioned script literally in .html file in a component but nothing happened. I checked source code also, script was not there. Help me to understand it. Thank you.
<script type="text/javascript">
toolTip();
</script>
From my point of view - the best way how to do this - is to locate your script in some common directory and include it into angular-cli config, if you use it:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"./src/common/toolTipScript.js"
],
And then use it in application wherever you need it
Related
Im currently making an electron application. i have an index.html file where ive loaded in Javascript files within the head tag. I am able to access the JS functions without any issues.
I've now created a separate browser window, and for this I've made another html file. When I attempt to load in another JavaScript file it doesn't allow me to access any of the functions. What's weird is that i can load in the CSS file no problem that works. Why is it so much hassle to load in a JS sheet, I've been trying to figure it out for 2 days now :/
I've also attempted to use module.exports in my sidebar.js file so that I can try and trigger the functions using the renderer.js file and the main.js file but it gives me an error saying "document has not been defined"
Can anyone think of a solution? its probably something simple but I'm honestly losing it here.
Try putting the script tags at the end, right before the end body tag.
Try adding <script module src="sidebar.js"></script>
Or may be you can check that the file name is proper sidebar.js. Just check it once!
I would like to use an external JS library into my Angular 11 project created using the Angular-CLI.
From many answers (1, 2, 3), I see that one way to achieve this is by adding the path to the JS file into the scripts section of angular.json file, and add variable declarations in typings.d.ts file (I should create one if it does not exist).
However, I would like to be able to load it with a "defer" attribute, namely when the page has finished parsing, as in the documentation of this library it reads:
Don't forget the defer attribute. It reduces the loading time of your
page.
From the official Angular docs page on this section, there does not seem to be an option to add this attribute, and I don't understand when these external libraries are loaded. I was wondering if anyone can help me understanding this.
You can add anything you like into the index.html. Even a script with defer attribute.
Whether that is the best way to include the script into your project is up to you.
I'm writing a simple extension for Apache Guacamole following the guidance in the manual. I can get most theme elements working correctly except adding custom javascript. According to the manual I should be able to include my javascript file by specifying a relative path to the file in my extension guac-manifest.json file like this:
{
"guacamoleVersion" : "0.9.12-incubating",
"name" : "stuff",
"namespace" : "stuff-menu-extension",
"translations" : [
"translations/en.json"
],
"js": ["myscript.js"],
"html" : [ "resources/templates/new_template.html" ]
}
Here's a screenshot of the reference in the manual
Except when I include any js file it appears that app.js doesn't bundle correctly and give this error and the site does not display at all:
At first I thought it was my js code in the myscript.js file, but to test I removed everything from the file except a comment line
//test
But I get the same error. Is this just a bug or am I messing this up? I then tried it with an empty file, but got the same error. After digging through the code it looks like Guacamole takes all the javascript files specified in an extensions manifest and tries to bundle them into the main app.js file, and I guess this is where I'm messing things up.
Has anyone experienced this? Any idea on the proper way to include custom javascript in a guacamole extension? Ideally, I'd like to eventually include angularjs code to add functionality.
I had the same issue and the error was actually in my pom.xml file. I have copied some existing pom.xml which contained angular-maven-plugin. This plugin requires generated and template directories within the project, which I didn't have (and didn't need in my case). The building of the project was fine, but the plugin produced the same error as yours when loaded into page. Removing angular-maven-plugin solved the issue.
I believe your observation is right, this issue can be caused by packaging. You may also check if the final generated .js file has the same name in pom.xml and in guac-manifest.json.
I want to know if it's possible to load a script.js into a Typescript html template in angular2? If it's not possible, how can I do and what alternatives I have? In my project, I need to call a dropzone.js script into the template dropzone.component.html. It doesn't work when I load it from this file. So how can I do if I don't want to put the script into index.html?? Thank you.
You can reference this question here, I do not believe it is possible to put a script tag inside of an angular 2 template.
angular2: including thirdparty js scripts in component
I'm new to Angular, I'm building a demo app to learn, it's something very basic, but it's working, but I'd like to know how to divide this app in different files without having to write a script tag for every file.
Lets say I have my files structured like this:
Scripts/
angular.js
----App/
-----app.js(main app module)
----Factories/
-----factoryOne.js
-----factoryTwo.js
----Controllers/
-----controllerOne.js
-----controllerTwo.js
----Routes/
-----routes.js
And in my main view I just want to have
<script src="Scripts/angular.js"></script>
<script src="Scripts/app/app.js"></script>
Is there a way to do this? like include in Java or using in C#, thanks for the help guys.
Personally use Grunt for tasks like this. You can find details for this particular one # https://npmjs.org/package/grunt-contrib-concat + https://npmjs.org/package/grunt-usemin. These script tags will will be in your source, but your dist version will have a single one.
This will all be set up for you if you start your project using Bower.
You should check out RequireJS. With it, at most you will only have 2 script tags, RequireJS and your main app script. Angular will be loaded as a dependency of your app fragments that need it.