Include external javascript into angular - javascript

I was trying to include external javascript and html into my angular app.
Here is the author's tutorial which works in jsfiddle
<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<!-- embed the browser in the web page -->
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
So I did it according for my angular app, added the script ref to index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EpiMiner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://localhost:40080/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:40080/components/chart-controller/chart-controller.html">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
But I got an "chart-controller is not a known element" error. Not too much experience with angular. Suggestion are appreciated. Thanks

Related

css file empty, how the styling works here in this project?

I am a first grade CS student in university.After learning some of the basics of React.js. I am trying to understand a resume project. Can anyone tell me why the app.js and index.js are empty here. I wonder how the styling is accomplished...I spotted classname attributs inside jsx elements of the components but i can't find related css file in the src folder, could it be inside public folder then? Besides answering me questions, feel free to point out what kind of React topics/techniques I need to learn about in order to understand better how the styling works here.
The project repository by nordicgiant2: https://github.com/nordicgiant2/react-nice-resume
I have checked topic like how the styling working for component in React.js and the direct anwser haven't been found.
The styling turns to be inside the public folder, and when check the index.html file inside the public folder I realize the link tag points toward to the css file inside the public folder. My original assumption was that, the styling sheet should be place inside the src folder as the TUTORIAL said.
Below is a snippet of the inde.html of this project which reveal the answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<title>Nordic Giant Development</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
</body>
</html>

Angular 7 add custom src for script tag

I am using angluar cli to build my app.
Currently its building the app in dist folder
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.aa8ce79f832f8715c04d.css"></head>
<body>
<app-root>
</app-root>
<script type="text/javascript" src="runtime.d981c7f14a84cffbe02a.js"></script><script type="text/javascript" src="polyfills.c914ea4c8f6edd6e6f45.js"></script><script type="text/javascript" src="scripts.b5ea1a3cf9f89977f873.js"></script><script type="text/javascript" src="main.ebfc576e2cbf5f6d553e.js"></script></body>
</html>
I would like to customize all src path to have /app appended & look like:
<script type="text/javascript" src="/app/runtime.d981c7f14a84cffbe02a.js"></script>
Is there any way to achieve this?
You can use the deploy-url parameter when building your app
ng build --prod --deploy-url /app/
You want to prepend rather than append.
Try changing your base href value so that all relative paths start from the app folder
From:
<base href="/">
To:
<base href="./">

How to import .js file to .ts in ionic?

I have create a .js file inside my /www/js/N.js after that I include in the index.html like src="assests/js/getImage.js"> and the script is before the build/polyfills.js
After that, what should I do to get my .js file working ??
here is my source code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="assets/js/getImage.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
May I know is there any import js to ts tutorial available ??
I found a lot on youtube but none of them meet my requirement. !!
Thanks in advance, please help me. Thanks !

Modal form doesn't work

I found nice modal form at http://www.bootply.com/60244, but when I try run it in my code I get empty content after click on "Launch Modal". Probably I don't have some stylesheet or library.
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext" type="text/css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Anyone know what I need to run it? On bootply everything is fine.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
I found the reason - Bootstrap v2.3.1, I using 3.3+.

Webview tag not working for my chrome app

So I have been trying to load google in my app using this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Webview</title>
<meta name="description" content="">
<meta name="author" content="Kitanga Nday">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
<script src="kng.js"></script>
</head>
<body>
<div id="kontainer"> <!-- Kontainer div -->
<webview src="https://www.google.com/" width="640" height="480"></webview>
</div>
</div>
</body>
I then tried sandboxing the page and running it in the main html file using the iframe tag still nothing.
Maybe you missed the fact that using <webview> requires a "webview" permission in the manifest.

Categories