CODEWITHSUNDEEP
angularhtmlcssbootstrap-4
Ahmed Ghrib
Ahmed Ghrib

Reputation: 757

Integrating a bootstrap template into an angular project using angular components

Since I am not a front-end developer and I am building a web app from scratch, I have downloaded a bootstrap template and tried to integrate it into a simple Angular project (generated by Angular CLI).
What I did is:
Copy the index.html file of the template in 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>

And of course I have copied the assets of the template into the assets folder and modified the files paths.
This kindof works.
So here are my questions:

  1. Can this way of integrating a bootstrap template cause errors?
  2. Am I doing this the right way?
  3. If not, would you care to tell me what I'm doing wrong?

Upvotes: 2

Views: 7799

Answers (3)

Atif
Atif

Reputation: 37

Here is a angular bootstrap starter code. It contains 3 layouts to start with. Built with latest angular and bootstrap.

Source code: Ready to use Angular Bootstrap Template

Upvotes: 2

Swapnil
Swapnil

Reputation: 61

For Angular 2+, similar question is answered here

Yes it is possible but you will have to do 'some' tweaking.

Template

First of all import all your js script plug-ins through npm if they are available there.

npm install (plug-in name) --save

OR You can add those script js files in project and Then you will have to edit your angular.json to include js plug-ins (js & css) for example as below:

Update

"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"],

Put the path to styles & scripts in to array

Then you should add main template css file in to predefined styles.css (You can add all your main.css contents in style.css which is automatically created while project creation)

Next you should break up your page(s) in to component(s) (view components and 'tag' components).

Now about custom app dev:

Add your custom - js in to .component.js - css in to .component.css - html in to .component.html

Update

Have a look at this, I've created a sample app with your template. You can edit it further.

Upvotes: 6

Shashan Sooriyahetti
Shashan Sooriyahetti

Reputation: 878

There are two ways to implement specifically,

  1. Using ng-bootstrap (Ng-Bootstrap).
  2. Create a new angular app. Just include bootstrap resource js file, css file and jquery on angular.json or index.html . Then you can just grab the needed html from bootstrap website and implement your solution.

If you are stuck anywhere I can help you :)

Hey I'm using very similar my own solution for my projects. (2nd way)

Answers to your questions,

  1. You don't need to copy whole page. You can break into component when you import bootstrap resource into index.html. For example you can have a one header.componenet and one footer.componenet and a body.componenet so it is easier to maintain.

  2. You are doing it slightly wrongly because you don't implement it in angular way.

  3. answered above.

Upvotes: 3

Related Questions