template в component ведет себя очень странно

198

09 февраля 2019, 15:10

Ребят, вопрос очень странно такой задавать, но я негде не нашел никакой информации по поводу этого.

Ближе к сути вопроса. Проблема заключается в том, что перенося код шаблона страницы в template.html я получаю не полное отображение страницы, НО если 20-30 раз про-табулировать код страницы - информация отобразится с каждым табом подробнее. Но все равно footer не покажет. Я просто никогда не сталкивался с таким, и уж точно не сталкивался с тем, что табуляция вообще что то может так сильно решать. Прошу помогите, потому что я уже не понимаю , что я не так сделал.

Почему то данные полностью отображаются если в template.html вставить соответственно в начало и в конец основной тег <body></body>

Я так понимаю никто не сталкивался с подобным как и я :(

Итак код:

Index.html

<!DOCTYPE html>
<html lang="en" ng-app="dotaStats">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dota 2 Stats</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
    crossorigin="anonymous">
    <link rel="stylesheet" href="app/components/home-page/home-page.style.css">
</head>
<body>
    <ng-view></ng-view> 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.config.js"></script>
<script src="app/components/home-page/home-page.module.js"></script>
<script src="app/components/home-page/home-page.component.js"></script>
</body>
</html>

Структура

app.config.js :

angular.module('dotaStats').config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');
  $routeProvider.
    when('/home', {
      template: '<home-page></home-page>'
    }).
    when('/profile', {
      template: '<profile-detail></profile-detail>'
    }).
    otherwise('/home');
}

]);

Home Page template.html

    <header>
      <nav class="menu">
          <div class="menu__icon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
          </div>
          <div class="menu__links">
              <a class="menu__links-item" href="/"><big>< dota2stats /></big></a>
              <a class="menu__links-item" href="../profile.html">PROFILE</a>
              <a class="menu__links-item" href="/">CONTACTS</a>
              <a class="menu__links-item" href="/">ABOUT US</a>
              <form class="form-inline search-bar">
                  <i class="far fa-search fa-lg" style="color: grey;"></i>
                  <input type="text" placeholder="Search accountid, nick . . ." aria-label="Search">
              </form>
              <form class="form-inline login-form">
                  <i class="fab fa-steam-square fa-lg"></i>
                  <button type="submit">LogIn</button>
              </form>
          </div>
      </nav>
      <div class="heading">
          <div class="h1">Dota 2 Stats</div>
          <div class="p-heading">Dota 2 stats for Your enjoy</div>
          <div class="button-heading">
              <button class="btn btn-dark" style="background-color: rgba(0, 0, 0, 0.4);text-shadow: rgb(0, 0, 0) 0px 0px 3px;"><i class="fab fa-steam-symbol mr-2"></i><b>Login</b> for automatic replay parsing</button>
          </div>
      </div>
      <div class="statistick">
          <div class="statistick-heading">This is your perfomace:</div>
      </div>
      <div class="info-about-us d-flex justify-content-around">
          <div class="first-box-info">
              <svg viewBox="0 0 300 300" style="width: 110px; height: 110px; fill: red;">
                  <path d="M278.6,42.9c0-23.6-19.2-42.9-42.9-42.9s-42.9,19.2-42.9,42.9c0,15.8,8.6,29.7,21.4,37.1v35.4L150,147.5 l-64.3-32.1V79.9c12.8-7.4,21.4-21.3,21.4-37.1C107.1,19.2,87.9,0,64.3,0S21.4,19.2,21.4,42.9c0,15.8,8.6,29.7,21.4,37.1v61.9 l85.7,42.9v35.4c-12.8,7.4-21.4,21.3-21.4,37.1c0,23.6,19.2,42.9,42.9,42.9s42.9-19.2,42.9-42.9c0-15.8-8.6-29.7-21.4-37.1v-35.4 l85.7-42.9V79.9C269.9,72.5,278.6,58.7,278.6,42.9z M64.3,21.4c11.8,0,21.4,9.6,21.4,21.4s-9.6,21.4-21.4,21.4s-21.4-9.6-21.4-21.4 S52.5,21.4,64.3,21.4z M150,278.6c-11.8,0-21.4-9.6-21.4-21.4c0-11.8,9.6-21.4,21.4-21.4s21.4,9.6,21.4,21.4 C171.4,269,161.8,278.6,150,278.6z M235.7,64.3c-11.8,0-21.4-9.6-21.4-21.4s9.6-21.4,21.4-21.4s21.4,9.6,21.4,21.4 S247.5,64.3,235.7,64.3z">
                  </path>
              </svg>
              <div class="titleLine">
                  OpenSource
              </div>
              <div class="description">
                  All project code is open source and available for contributors to improve and modify.
              </div>
          </div>
          <div class="second-box-info">
              <svg viewBox="0 0 300 300" style="width: 110px; height: 110px; fill: red;">
                  <rect x="81.8" y="13.6" width="54.5" height="272.7"></rect>
                  <rect y="204.5" width="54.5" height="81.8"></rect>
                  <rect x="163.6" y="150" width="54.5" height="136.4"></rect>
                  <rect x="245.5" y="95.5" width="54.5" height="190.9"></rect>
              </svg>
              <div class="titleLine">
                  In-Depth Data
              </div>
          <div class="description">
              Parsing replay files provides highly detailed match data.
          </div>
          </div>
          <div class="third-box-info">
              <svg viewBox="0 0 300 300" style="width: 110px; height: 110px; fill: red;">
                  <rect x="138" y="116.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 145.5402 -72.8379)" width="45.5" height="45.5"></rect>
                  <rect x="52.3" y="141.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 181.0483 12.848)" width="45.5" height="166.7"></rect><rect x="150" y="0" width="21.4" height="42.8"></rect>
                  <rect x="233.3" y="34.5" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 377.0973 268.0186)" width="21.4" height="42.8"></rect>
                  <rect x="66.6" y="34.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.9125 71.0886)" width="21.4" height="42.8"></rect>
                  <rect x="233.3" y="201.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -85.918 237.758)" width="21.4" height="42.8"></rect>
                  <rect x="257.2" y="128.5" width="42.8" height="21.4"></rect>
              </svg>
              <div class="titleLine">
                  Free of Charge
              </div>
              <div class="description">
                  Servers are funded by sponsors and volunteers maintain the code, so the service is offered free of charge.
              </div>
          </div>
      </div>
      <div class="bgc-image-author">Background picture by<a href="//www.artstation.com/artist/mikeazevedo" target="_blank" rel="noopener noreferrer"> Mike Azevedo</a>
      </div>
  </header>
  <section class="info">
      <div class="container-fluid">
          <div class="container headingfooter text-center">
              <h5>Our Team</h5>
              <br />
              <p>Introduce your team here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue</p>
          </div>
          <div class="team-cards">
              <div class="frontend">
                  <div class="profile-photo">
                      <img src="https://avatars2.githubusercontent.com/u/41522942?s=460&v=4" alt="image">
                  </div>
                  <div class="profile-data text-center pt-2">
                      <h4>Pavel Konchych</h4>
                      <p>Junior Front-End Developer</p>
                  </div>
                  <div class="profile-icons">
                      <a href="#"><i class="fab fa-github fa-2x"></i></a>
                      <a href="#"><i class="fab fa-vk fa-2x"></i></a>
                      <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                      <a href="#"><i class="fab fa-linkedin fa-2x"></i></a>
                  </div>
                  <div class="member-desc">
                      <p>Pavel is a front-end developer specialising in building large, scalable and user-friendly web apps. Follow him on <a href="https://twitter.com/religiondota" target="_blank">Twitter</a> for fresh developer tips and check out his <a href="https://github.com/paveligorevich55" target="_blank">Github</a> for useful open-source tools.
                      </p>
                  </div>
              </div>
              <div class="backend">
                  <div class="profile-photo">
                      <img src="https://media.licdn.com/dms/image/C4D03AQFyvgPyFeHYFg/profile-displayphoto-shrink_800_800/0?e=1544054400&v=beta&t=FbwYwhw457eATHi6gILjAHKDX9jC_0S9ZatXl_Fz-N0" alt="image">
                  </div>
                  <div class="profile-data text-center pt-2">
                      <h4>Mikhail Kotliar</h4>
                      <p>Back-End Developer</p>
                  </div>
                  <div class="profile-icons">
                      <a href="#"><i class="fab fa-github fa-2x"></i></a>
                      <a href="#"><i class="fab fa-vk fa-2x"></i></a>
                      <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                      <a href="#"><i class="fab fa-linkedin fa-2x"></i></a>
                  </div>
                  <div class="member-desc">
                      <p>Mikhail is a Back-End developer specialising in building large, scalable and user-friendly web apps. Follow him on <a href="https://twitter.com/religiondota" target="_blank">Twitter</a> for fresh developer tips and check out his <a href="https://github.com/paveligorevich55" target="_blank">Github</a> for useful open-source tools.
                      </p>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <footer id="contact" class="contact-section">
     <div class="container text-center">
         <h2 class="section-title">Contact Us</h2>
         <div class="contact-content">
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.
             </p>
         </div>
         <a class="btn btn-cta btn-primary" href="#">Get in Touch</a>
     </div>
  </footer>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Создание html элементов в компоненте react.js

У меня есть компонент, в который через props приходит целое число (каждый раз разное)Вопрос, как создать несколько блоков у компоненте в зависимости...

162

MySQL

Долгий отклик сервера (Ubuntu+Apache+Nginx+Mysql+PHP)

Столкнулся с проблемой - сервер выдачу делает 4,5 секунды

193

HTML

Незаполненные поля jinja2

Вывожу данные в jinja2

183

HTML

Поиск картинок font awesome

Подскажите, можно ли как то автоматизировать процесс нахождения иконок? В макете много Font-awesomeИ очень долго получается вводить в font-awesome, то на чо похожа...

216