Я боролся с чем-то, что должно быть довольно простым: интеграция шаблона начальной загрузки в проект Angular.
Я наконец смог это сделать, но когда я запускаю приложение, оно полностью статично, и все анимации неработа.
Позвольте мне в небольшом туре узнать, как выглядит мой проект.
Во-первых, вот папка с шаблонами:
Простой, верно?
Я скопировал index.html шаблона в app.component.html.
Я скопировал ресурсы: (css / fonts / images / js / sass) в папку активов моего проекта Angular.
Я проигнорировалдругие html-файлы (about, contact, портфолио и work), потому что я просто хочу проверить, правильно ли работает интеграция шаблонов.
Итак, вот app.component.html (как я уже сказал, содержит код index.html шаблона):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Nitro — Free HTML5 Bootstrap Website Template by FreeHTML5.co</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" />
<meta name="keywords" content="free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="FreeHTML5.co" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FreeHTML5.co
Website: http://freehtml5.co/
Email: info@freehtml5.co
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- 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="" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- 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">
<!-- 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="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="fh5co-page">
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
<aside id="fh5co-aside" role="complementary" class="border js-fullheight">
<h1 id="fh5co-logo"><a href="index.html"><img src="assets/images/logo.png" alt="Free HTML5 Bootstrap Website Template"></a></h1>
<nav id="fh5co-main-menu" role="navigation">
<ul>
<li class="fh5co-active"><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="fh5co-footer">
<p><small>© 2016 Nitro Free HTML5. All Rights Reserved. <span>Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> </span> <span>Demo Images: <a href="http://unsplash.com/" target="_blank">Unsplash</a></span></small></p>
<ul>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-instagram"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</aside>
<div id="fh5co-main">
<div class="fh5co-narrow-content">
<h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">We Love To Design <span>See Our Portfolio</span></h2>
<div class="row animate-box" data-animate-effect="fadeInLeft">
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_1.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Illustration, Branding</p>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_2.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Web, Packaging</p>
</a>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_3.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Branding, Web</p>
</a>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_4.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Logo, Branding, Web</p>
</a>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_5.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Web, Packaging, Branding</p>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_6.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Branding</p>
</a>
</div>
<div class="clearfix visible-md-block visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_7.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Web, Illustration</p>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_8.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Branding, Web</p>
</a>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-6 col-xxs-12 work-item">
<a href="work.html">
<img src="assets/images/work_1.jpg" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3 class="fh5co-work-title">Work Title Here</h3>
<p>Illustration, Branding</p>
</a>
</div>
<div class="clearfix visible-md-block"></div>
</div>
</div>
<div class="fh5co-testimonial" >
<div class="fh5co-narrow-content">
<div class="owl-carousel-fullwidth animate-box" data-animate-effect="fadeInLeft">
<div class="item">
<figure>
<img src="assets/images/testimonial_person2.jpg" alt="Free HTML5 Bootstrap Template">
</figure>
<p class="text-center quote">“Design must be functional and functionality must be translated into visual aesthetics, without any reliance on gimmicks that have to be explained. ” <cite class="author">— Ferdinand A. Porsche</cite></p>
</div>
<div class="item">
<figure>
<img src="assets/images/testimonial_person3.jpg" alt="Free HTML5 Bootstrap Template">
</figure>
<p class="text-center quote">“Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while. ”<cite class="author">— Steve Jobs</cite></p>
</div>
<div class="item">
<figure>
<img src="assets/images/testimonial_person4.jpg" alt="Free HTML5 Bootstrap Template">
</figure>
<p class="text-center quote">“I think design would be better if designers were much more skeptical about its applications. If you believe in the potency of your craft, where you choose to dole it out is not something to take lightly. ”<cite class="author">— Frank Chimero</cite></p>
</div>
</div>
</div>
</div>
<div class="fh5co-narrow-content">
<h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">This Is What <span>We Love To Do</span></h2>
<div class="row">
<div class="col-md-6">
<div class="fh5co-feature animate-box" data-animate-effect="fadeInLeft">
<div class="fh5co-icon">
<i class="icon-strategy"></i>
</div>
<div class="fh5co-text">
<h3>Strategy</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="fh5co-feature animate-box" data-animate-effect="fadeInLeft">
<div class="fh5co-icon">
<i class="icon-telescope"></i>
</div>
<div class="fh5co-text">
<h3>Explore</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="fh5co-feature animate-box" data-animate-effect="fadeInLeft">
<div class="fh5co-icon">
<i class="icon-circle-compass"></i>
</div>
<div class="fh5co-text">
<h3>Direction</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="fh5co-feature animate-box" data-animate-effect="fadeInLeft">
<div class="fh5co-icon">
<i class="icon-tools-2"></i>
</div>
<div class="fh5co-text">
<h3>Expertise</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
</div>
</div>
</div>
</div>
</div>
<div class="fh5co-counters" style="background-image: url(images/hero.jpg);" data-stellar-background-ratio="0.5" id="counter-animate">
<div class="fh5co-narrow-content animate-box">
<div class="row" >
<div class="col-md-4 text-center">
<span class="fh5co-counter js-counter" data-from="0" data-to="67" data-speed="5000" data-refresh-interval="50"></span>
<span class="fh5co-counter-label">Clients Worked With</span>
</div>
<div class="col-md-4 text-center">
<span class="fh5co-counter js-counter" data-from="0" data-to="130" data-speed="5000" data-refresh-interval="50"></span>
<span class="fh5co-counter-label">Completed Projects</span>
</div>
<div class="col-md-4 text-center">
<span class="fh5co-counter js-counter" data-from="0" data-to="27232" data-speed="5000" data-refresh-interval="50"></span>
<span class="fh5co-counter-label">Line of Codes</span>
</div>
</div>
</div>
</div>
<div class="fh5co-cards">
<div class="fh5co-narrow-content">
<h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">Press Release</h2>
<div class="fh5co-flex-wrap">
<div class="fh5co-card animate-box" data-animate-effect="fadeInLeft">
<h5>Expertise</h5>
<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 right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p><a href="#" class="btn btn-md btn-primary">Learn More</a></p>
</div>
<div class="fh5co-card animate-box" data-animate-effect="fadeInLeft">
<h5>Explore</h5>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas.</p>
<p><a href="#" class="btn btn-md btn-primary">Learn More</a></p>
</div>
</div>
</div>
</div>
<div class="fh5co-narrow-content">
<div class="row">
<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
<h1 class="fh5co-heading-colored">We Design Beautiful & Functional Website</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
<p class="fh5co-lead">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
</div>
<div class="col-md-7 col-md-push-1">
<div class="row">
<div class="col-md-6 animate-box" data-animate-effect="fadeInLeft">
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
<div class="col-md-6 animate-box" data-animate-effect="fadeInLeft">
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 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>
<!-- Carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- Stellar -->
<script src="assets/js/jquery.stellar.min.js"></script>
<!-- Waypoints -->
<script src="assets/js/jquery.waypoints.min.js"></script>
<!-- Counters -->
<script src="assets/js/jquery.countTo.js"></script>
<!-- MAIN JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
Я хотел показать вам весь код на тот случай, если вы заметите что-то неуместное.
В любом случае, вот пример анимации, которая работает, если я запускаю tОн index.html из его исходной папки и не работает, если я запускаю угловой проект.
В исходном шаблоне предполагается, что он прокручивается между тремя различными элементами, когдаЯ нажимаю на три маленькие точки в нижней части изображения.* В Angular он просто отображает три элемента, расположенные друг над другом таким образом:
Также, чтобы быть ясным и дать вам больше советов, чтобы вы могли помочь мне.
Этот текст должен отображаться со скользящей анимацией слева.
Очевидно, как я уже сказал: он выглядит статически.
ИтакВот мои вопросы:
- Я сделал что-то не так в процессе интеграции шаблона в мой проект Angular?
- Есть идеи, почему анимация не работает?
- Какие-либо советы (или лучшие практики) при интеграции шаблона READY-MADE Bootstrap в проект Angular?