I am new with Angular and Angular 2, and I would like to use the following external lib in my project:
http://angularjs.jqueryrain.com/draw-polygons-image-angularjs-canvas/
To use this lib, I have put the following line in my index.html file before angular:
<script src="./lib/angular-canvas-area-draw.js"></script>
But I have the following error:
Uncaught ReferenceError: angular is not defined
at angular-canvas-area-draw.js:3
at angular-canvas-area-draw.js:234
How should i resolve this problem?
Assuming by your tags, you are trying to use an AngularJs plugin inside an Angular application, that won't work (Or at least it would be pretty hard to get it running by using the upgrade adapter and some zonejs hacking). Try to find the plugin for Angular instead of AngularJs.
But if your tags are misleading and you're using AngularJs than make sure AngularJs in included before the plugin.
<script type="text/javascript" src="./lib/angular.min.js"></script>
<script src="./lib/angular-canvas-area-draw.js"></script>
Move your dependencie into .angular-cli.json file under scripts like this
"scripts": [
....,
"./lib/angular-canvas-area-draw.js"
],
from the latest angulae cli you have to add all external files(css and js) under the script and style tag in the angular-cli.json file
Related
After I build my angular app, I have to perform one last manual step to get my program to run: The platform it runs on has a requirement that its javascript file is in the <head> of the html file that is running. Their .js is on a CDN. So basically, post-build, I have to open up index.html and add the following:
<script src="https://cdn.fragilecorp.com/lib/js/platform.js" type="text/javascript"></script>
Is there a way I can accomplish this automatically using angular configs or a different way?
Yes, in .angular-cli.json (.angular.json in older versions), I believe you can add what's inside of src to the scripts array.
Check this out:
How to include external JS file to angular5?
I have two similar very small example Angular applications that integrate Bootstrap CSS. One works and one that I created myself doesn't. It is unclear what the difference is and why it doesn't work in my case.
My steps are as follows:
npm install bootstrap --save
This updates package.json and then subsequently I update index.html and add
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
Exactly the same line as the working application but in example app that I created using ng new new-app it is not working.
Network tab in chrome shows 404. Basically the URL http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css cannot be found.
What is the correct / complete way to integratie Bootstrap CSS in an Angular app?
It seems you are using angular & angular cli
If this is the case then you can actually add the bootstrap.css file in .angular-cli.json inside array corresponding to style key like this
"styles": [
"styles.less",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Two other possibilities are importing this bootstrap.css at main .css file using #import or you can require this in the main index.js file.
Since you are using Angular-CLI:
update your .angular-cli.json file to include the bootstrap style:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
],
No need to include it in your index.html
i can't really get my js libraries to work , some time ago i decided to have a separate js file for every library i use (so i have a jquery.js file and a bootstrap.js file included in my layout) ,everything was working just fine until i had to add jquery-ui to this chaos , and got this error
Uncaught TypeError: $(...).slider is not a function
until i loaded ,jquery and jquery-ui in the same file .The problem is i dont want to include jquery ui everywhere i include jquery , beacuse i only use it in 2 pages. Below i will put my code :
jquery-ui.slider.js:
require('jquery-ui/ui/widgets/slider');
require('./components/carFilter.js');
app.js:
window.$ = window.jQuery = require('jquery');
require('./bootstrap');
webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js')
mix.js('resources/assets/js/jquery-ui.slider.js', 'public/js');
I am using the following npm modules :
bootstrap-sass
jquery
jquery-ui
I ended up by just creating a file where i require jquery,bootstrap.js and then i require this file in a specific file for the two pages...
Below its the code:
app.js
window.$ = window.jQuery = require('jquery');
require('./bootstrap');
page.js
require('./app.js')
require('jquery-ui/ui/widgets/slider');
It seams that now it is working ,even if now i have to include a js file in all the views...Question its still open , i hope somone have a beter idea .
I think laravel-mix only serves the purpose when you have small sites with pages that all include the same app.js & app.css files.
When you have complex portal with multiple pages that have different set of frontend "plugins" you have to split your entries & generate a table of dependencies automatically.
After a lot of time searching I've come to the conclusion that the best approach would be switch to webpack-encore from Symfony.
You can read more about it's capabilities here Webpack Encore Official Documentation.
Now the question is how to embed it to Laravel? It's quite easy, I've just reverse engineered the Symfony's PHP bundle for that and here is the result:
https://github.com/ntpages/laravel-encore
Now you just have to include you're dependency in the page entry and it's all handled automatically.
I think you should load jquery-ui when a condition is met, like:
if (window.loadJQueryUI) {
require('jquery-ui');
}
And you need to initialize loadJQueryUI for the two pages, like this:
<script type="text/javascript">
window.loadJQueryUI = true;
</script>
I want to use the simple example dropzone js in an angular 2 project:
http://www.dropzonejs.com/examples/simple.html
Is there an easy way to use the js for simple drag and drop functionality? I tried adding installing using:
npm i dropzone --save
And referencing the script from node_modules in index.html, but it doesn't seem to work.
Plunkr:
http://plnkr.co/edit/Gk2xtoH1FhOe6hko6z8K?p=preview
Currently, The easiest way to include an external library into an angular 2 project is as follows:
1) include it in your HTML file as a script tag
<script src="js/your-library.js"></script>
2) To use the library you must add the following to one of your ts/js files:
declare var libraryVar: any;
or
var libraryVar
Where libraryVar is the name of a function from the library you're including, so for example, to include jQuery, you would use:
declare let $:any;
I try to include *.js in [ *.component.html ] file
like this :
<script src="modal.js" type="text/javascript"></script>
but it doesn't load.
Only success I got , when I try to load *.js is in src/index.html.
I am a newbie at Angular2 ,I don't know how to load js flie in Angular 2 project .
any inputs?
<script> tags in templates are not added to the DOM, they are just stripped from the template. You need to use other means to add the script. For example require()