第三方库,如果index.html的
问题描述:
之外我下载一些免费的HTML5范本,并计划把它用在我的angular2程序不能正常工作。问题是,当我将body放在index.html或app.component.html之外时,模板不起作用。它什么都不显示。我相信我把每一个src都对了。看一看。第三方库,如果index.html的
的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>
一些代码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>
没有在这里显示英寸这里的事情是,当我把一切都放在index.html的,它完美的作品,但是当我开始得到从身体标记的代码并把它里面app.component.html,这我肯定会去的标签,它不是没有出现。我的选择器是正确的,我确信它。任何人都在意解释或提供一些解决方案?这将是非常赞赏。
答
jQuery插件不工作。相反,请创建一个指令,并将您通常在指令的链接函数中使用的代码。
有一对夫妇在文档中,你可以看看点。你可以在这里找到他们:
确保当您在您的视图引用脚本,你是指它最后一次 - 在angularjs库,控制器,售后服务和过滤器引用。
而不是使用$(元素),您可以使用与jQuery
答
<script>
标签是从组件模板(有上拉的请求,允许他们对一些元数据但是这尚未落地)
CSS文件应该被添加到@Component({ styleUrls: [...]})
,而不是在模板<style>
标签修剪。对角应用如预期
什么问题AngularJS时,可利用angular.element(元素)的?你期望什么显示?有很多代码,但我没有得到相关的代码。 “index.html”在哪里? –
Outside index.html表示app.component.html或其他html文件。我把所有的CSS要求放在index.html中,并且还要求所有需要的js文件,但是body需要放在其他html文件中。现在,如果我把所有的代码index.html文件里面,它加载正确和预期,但如果我删除了body标签的所有内容,并把它放在里面app.component.html,这是行不通的。 –