3rd party libraries not working if outside of index.html
Question
I downloaded some free html5 templates and will plan to use it on my angular2 program. The problem is when I put the body outside index.html or inside app.component.html, the template doesn't work. It displays nothing. I am sure that I put every src right. Take a look.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<!-- Animate.css -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="assets/css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- Flexslider -->
<link rel="stylesheet" href="assets/css/flexslider.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Modernizr JS -->
<script src="assets/js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app></my-app>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="assets/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="assets/js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="assets/js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="assets/js/jquery.flexslider-min.js"></script>
<!-- Main -->
<script src="assets/js/main.js"></script>
</body>
</html>
Some code in app.component.html
<div id="fh5co-services" class="fh5co-bg-section">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 text-center">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="icon-credit-card"></i>
</span>
<h3>Credit Card</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
<p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
</div>
</div>
<div class="col-md-4 col-sm-4 text-center">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="icon-wallet"></i>
</span>
<h3>Save Money</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
<p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
</div>
</div>
<div class="col-md-4 col-sm-4 text-center">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="icon-paper-plane"></i>
</span>
<h3>Free Delivery</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
<p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
</div>
</div>
</div>
</div>
</div>
Nothing is showing in here. The thing here is when I put everything in index.html, it works perfectly but when I start to get the code from the body tag and put it inside app.component.html, which I'm sure will go to tag, it isn't showing up. My selector is correct and I'm sure of it. Anyone care to explain or give some solutions? That would be so much appreciated.
2 answers
solution1
1 ACCPTED 2016-11-29 10:03:00
Jquery plugins don't work as expected on angular applications. Instead create a directive and put the code that you would normally have inside the link function of the directive.
There are a couple of points in the documentation that you could take a look at. You can find them here:
Ensure that when you are referencing the script in your view, you refer it last - after the angularjs library, controllers, services and filters are referenced.
Rather than using $(element), you can make use of angular.element(element) when using AngularJS with jQuery
solution2
0 2016-11-29 10:01:05
<script> tags are pruned from component templates (there is a pull request that allows them for some meta-data but that's not yet landed)
CSS files should be added to @Component({ styleUrls: [...]}) and not to <style> tags in the template.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.