Adding a javascript file to Angular7 dist folder - javascript

I'm building an app in Angular7 and it's ready to go but I need to create a plain javascript (hopefully could be minified) to be included in the websites which are going to use the main Angular app. This script will embed the app into an iframe when users click buttons or links. What I want is to have that script and the Angular app as part of the same bundle but not included as part of the angular app. Just available to control what the host website can do to embed our main app. If there is another approach to solve this problem I will appreciate it

Create custom js file
exports.myFunction = function myFunction() {
alert('External custom js');
}
Add this JavaScript file in scripts array in angular.json file.
"scripts": [
.....
"src/assets/js/custom.js"
]
If in your js file have function myFunction you can declare in the component
import {myFunction} from '../assets/js/custom.js';
I make a demo for custom.js
https://stackblitz.com/edit/angular-custom-js?file=src/app/app.component.ts

Related

React VS Code external scripts

I'm using VS Code with React and I wanted to try this: codepen.io/andystent/pen/GRgjBdJ?editors=0010
In the settings at codepen appear 5 links to 5 external scripts which this pen is using so it can work. I downloaded the JS from this pen, saved it in a file and imported it in /src folder, but I do not know how and where to add those 5 external scripts so my script could work. Can you please help me? How can I add external scripts to my react project? And where to add them (index.html/App.js/index.js etc)?

Adding javascript component into angular app

I'm having a javascript components that is distributed as .js file and .css file. In .js file the component is added to window
window.Component = { ... }
the component should be added to page with the following code Component.init('#componentHolderId', config);
I need to use my component in an Angular app (using Angular 11 if that matters).
Here are my questions.
Where is the best place in angular app to put .js file? Maybe it's somehow possible to add it to lazy-loaded module (as component needs to be used in a lazy-loaded module)?
Is there a way to add css to project other that adding it to styles array in angular.json? My concern here is that this way will slow-up application start-up.
You can add your .js file in the Scripts array of angular.json. so that it will be loaded.
Or you can add the .js inside the script tag inside body tag of index.html. (Sometimes it won't work because the some dom elaments are not present when loading index.html).
If you are using SCSS or any other CSS preprocessors, you can import your CSS files in your styles file.

Add a second JS file in Express / EJS app

here the link to a project I am working on to learn express / ejs / API.
https://github.com/aspnet82/books
I would like to add a second JS file to manage clicks etc.. possibly using jQuery (also vanilla JS is ok... at the moment there is no jQuery installed).
// books.ejs
<script src="public/js/index.js" charset="utf-8"></script>
</body>
But when I add the tag and indicate the index.js as source into the books.ejs file the content of the webpages is not showing anymore, is like either the app.js or the index.js are loaded at time.
If index.js is empty the ejs file is loaded properly.
What is the best way to manage events on a node / express app? For example, if I click on a element. Is this a Js file into the public folder as it is static content? and how do I call this in the app.js file?
Thanks for any help

Laravel 5.4 - Write and use multiple scripts

I want to know where I should write my js files in Laravel 5.4 for compiling after this files.
Example:
I want to create a test.js file with a console.log('Hello World). Where I create this file ? Have I put it in the resources/assets/js/app.js folder ?
My example code:
Folder resources/assets/js/app.js :
require('./bootstrap');
require('./normalscripts/test');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
In resources/assets/js/normalscripts/test I put console.log('WORKS');
And in the view I loaded app.js from public folder
Other question I have is, if I want to load some differents scripts depending of the html view that I am using, how can I can configure them in the app.js for this ?
Example:
I have test1.js and test2.js. I want to load in the view1.html the test1.js and in the view2.html the test2.js. How could I do this ?
Thanks
The Documentation answers your question:
By default, the Laravel webpack.mix.js file compiles your SASS and the resources/assets/js/app.js file. Within the app.js file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in the public/js directory.
As docs says: https://laravel.com/docs/5.4/structure
The Public Directory
The public directory contains the index.php file, which is the entry
point for all requests entering your application. This directory also
houses your assets such as images, JavaScript, and CSS.
Javascript files must be stored on the public directory, after knowing this, one of the possible correct path would be:
app/public/js/compiled/app.js
And you can include to the JavaScript file on your views like this:
<script type="text/javascript" src="{{ asset('js/compiled/app.js') }}"></script>
Laravel 5.4 is prepared to work with Vue.js, by default you need to have your js files on your assets folder, after compiling them they will be outputted at the public folder.
In case you are using another JS framework you need to indicate the path for the compiled JS files, it should be pointing to the public folder.

Including external (hosted) javascript files in Angular2

I'm trying to add an external js file into my Angular2 project by adding the record to my angular-cli.json file.
I've added a file to the [scripts] array as below:
"scripts": ["https://as-identitydemo--c.na50.visual.force.com/resource/1495420277000/salesforce_login_widget_js"],
all the other posts that i've read refer to using this format for something that's either hosted locally, or installed in the node_modules etc..
How can I include an external js library and utilize that in my project?
You should import the library in your index.html in the head tag.
Second you have to make the library visible to your Angular project. That means you need the typings. You can either search https://github.com/DefinitelyTyped
for already existing types or add the types to the typings.d.ts file.
Example:
In your page (outside of the Angular app) you might have a javascript global variable:
var testVar = 'testvalue';
Then in the typings.d.ts you can make this variable globally accessible by adding
declare var testVar:string;
Then you can access this variable in the whole Angular project like that:
console.log(testVar);
The same you can do with functions in external libraries.
Here is a Plunk that shows that (without having a typings file). Hope this helps.

Categories

Resources