Интеграция шаблона начальной загрузки в угловой проект с использованием угловых компонентов - PullRequest
Новая
       11

Интеграция шаблона начальной загрузки в угловой проект с использованием угловых компонентов

0 голосов
/ 03 мая 2019

Поскольку я не являюсь разработчиком внешнего интерфейса и создаю веб-приложение с нуля, я загрузил шаблон начальной загрузки и попытался интегрировать его в простой проект Angular (созданный Angular CLI).
Что я сделал, это:
Скопируйте файл index.html шаблона в app.component.html:

app.component.html 

<!DOCTYPE HTML>
<!--
    Parallelism by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Parallelism by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    </head>
    <body class="is-preload">

        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Main -->
                    <section id="main">

                        <!-- Items -->
                            <div class="items">

                                <div class="item intro span-2">
                                    <h1>Parallelism</h1>
                                    <p>A responsive portfolio site<br />
                                    template by HTML5 UP</p>
                                </div>

                                <article class="item thumb span-1">
                                    <h2>You really got me</h2>
                                    <a href="assets/images/fulls/01.jpg" class="image"><img src="assets/images/thumbs/01.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>Ad Infinitum</h2>
                                    <a href="assets/images/fulls/02.jpg" class="image"><img src="assets/images/thumbs/02.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>Different.</h2>
                                    <a href="assets/images/fulls/03.jpg" class="image"><img src="assets/images/thumbs/03.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>Elysium</h2>
                                    <a href="assets/images/fulls/04.jpg" class="image"><img src="assets/images/thumbs/04.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-3">
                                    <h2>Kingdom of the Wind</h2>
                                    <a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>The Pursuit</h2>
                                    <a href="assets/images/fulls/06.jpg" class="image"><img src="assets/images/thumbs/06.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>Boundless</h2>
                                    <a href="assets/images/fulls/07.jpg" class="image"><img src="assets/images/thumbs/07.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>The Spectators</h2>
                                    <a href="assets/images/fulls/08.jpg" class="image"><img src="assets/images/thumbs/08.jpg" alt=""></a>
                                </article>

                            </div>

                        <!-- Items -->
                            <div class="items">

                                <article class="item thumb span-3"><h2>Kingdom of the Wind</h2><a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>The Pursuit</h2><a href="assets/images/fulls/06.jpg" class="image"><img src="assets/images/thumbs/06.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Boundless</h2><a href="assets/images/fulls/07.jpg" class="image"><img src="assets/images/thumbs/07.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>The Spectators</h2><a href="assets/images/fulls/08.jpg" class="image"><img src="assets/images/thumbs/08.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>You really got me</h2><a href="assets/images/fulls/01.jpg" class="image"><img src="assets/images/thumbs/01.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Ad Infinitum</h2><a href="assets/images/fulls/02.jpg" class="image"><img src="assets/images/thumbs/02.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>Different.</h2><a href="assets/images/fulls/03.jpg" class="image"><img src="assets/images/thumbs/03.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Kingdom of the Wind</h2><a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>Elysium</h2><a href="assets/images/fulls/04.jpg" class="image"><img src="assets/images/thumbs/04.jpg" alt=""></a></article>

                            </div>

                    </section>

                <!-- Footer -->
                    <section id="footer">
                        <section>
                            <p>This is <strong>Parallelism</strong>, a responsive portfolio site template by <a href="http://html5up.net">HTML5 UP</a>. Free for personal
                            and commercial use under the <a href="http://html5up.net/license">Creative Commons Attribution</a> license.</p>
                        </section>
                        <section>
                            <ul class="icons">
                                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                                <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                                <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
                                <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
                            </ul>
                            <ul class="copyright">
                                <li>&copy; Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
                            </ul>
                        </section>
                    </section>

            </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.poptrox.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

    </body>
</html>

И, конечно, я скопировал ресурсы шаблона в папку ресурсов и изменил пути к файлам.
Это работает.
Итак, вот мои вопросы:

  1. Может ли этот способ интеграции шаблона начальной загрузки вызвать ошибки?
  2. Я делаю это правильно?
  3. Если нет, не могли бы вы сказать мне, что я делаю не так?

Ответы [ 2 ]

1 голос
/ 03 мая 2019

Для Angular 2+, на аналогичный вопрос вы получите ответ здесь

Да, это возможно, но вам придется сделать некоторую настройку.

Шаблон

Прежде всего импортируйте все ваши плагины js-скрипта через npm, если они там доступны.

npm install (имя плагина) --save

ИЛИ Вы можете добавить эти js-файлы сценария в проект, а затем вам нужно будет отредактировать angular.json для включения подключаемых модулей js (js & css), например, как показано ниже:

Обновление

"styles": ["styles.css", "assets/css/noscript.css"], "scripts":["assets/js/jquery.min.js","assets/js/jquery.poptrox.min.js","assets/js/browser.min.js","assets/js/breakpoints.min.js","assets/js/util.js","assets/js/main.js"],

Поместите путь к стилям и сценариям в массив

Затем вы должны добавить основной CSS-файл шаблона в предопределенный styles.css (вы можете добавить все содержимое main.css в style.css, который автоматически создается во время проектасоздание)

Далее вы должны разбить свои страницы на компоненты (просмотреть компоненты и компоненты тегов).

Сейчасо пользовательских приложениях:

Добавьте свои пользовательские js в .component.js - css в .component.css - html в .component.html

Обновление

Посмотрите на это , я создал пример приложения с вашим шаблоном.Вы можете редактировать его дальше.

0 голосов
/ 03 мая 2019

Существует два способа реализации:

  1. Использование ng-bootstrap ( Ng-Bootstrap ).
  2. Создание нового углового приложения.Просто включите файл js ресурса начальной загрузки, файл css и jquery в angular.json или index.html.Затем вы можете просто получить нужный HTML-код с сайта начальной загрузки и реализовать свое решение.

Если вы застряли где-нибудь, я могу вам помочь :)

Эй, я использую очень похожее мое собственное решение для своих проектов.(2-й способ)

Ответы на ваши вопросы,

  1. Вам не нужно копировать всю страницу.Вы можете разбить на компонент, когда вы импортируете ресурс начальной загрузки в index.html.Например, вы можете иметь один header.componenet и один footer.componenet и body.componenet, чтобы его было проще обслуживать.

  2. Вы делаете это немного неправильно, потому что вы этого не делаетереализовать его угловым способом.

  3. ответили выше.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...