How to quickly Import JS, Angular, HTML etc.. files and avoid dependency issues?

Question

I’m having trouble finding a quick solution to add JS (Vanilla / jQuery / Angular) / HTML… I’d love any guidance to help find the best solution.

Goals are…

Add modular content quickly
Manageable Troubleshooting
Dependency Issues (paths, undefined etc)
Security

Ideally (but unlikely) just writing “include content.html” or "import js-files.html" would render correctly...

---- Just a few things I’ve tried -------

Gulp

I have a custom gulp setup for production builds but I’m having issues with paths and troubleshooting using this route.

Angular Includes

<div ng-include="'includes/content.html'"></div>

PHP requires…includes

<?php require_once("../includes/content.php");?>

HTML5 Templates / Imports

template.html

  <template>
    <misc-content><misc-content>
  </template>

index.html

...

<link rel="import" href="html/template.html ">
    </head>
    <body>
    <section id="section">
        <script>
            var link = document.querySelector('link[href="html/template.html"]');
            var template = link.import.querySelector('template');
            var clone = document.importNode(template.content, true);
            document.querySelector('#section').appendChild(clone); // link to div or section ID on main page you want it sent to
        </script>
    ...
    </body>

HTML Shadow DOM & Custom Elements

-----------------------------------
*import.html*

<template id="temp">
    <style>
        ::content > * {
            color: red;
        }
    </style>
    <span>I'm a shadow-element using Shadow DOM!</span>
    <content></content>
</template>

<script>
    (function() {
        var importDoc = document.currentScript.ownerDocument;


        var proto = Object.create(HTMLElement.prototype);

        proto.createdCallback = function() {
        var template = importDoc.querySelector('#temp');
            var clone = document.importNode(template.content, true);
            var root = this.createShadowRoot();
            root.appendChild(clone);
        };
        document.registerElement(�?custom-element', {prototype: proto});
    })();
</script>

index.html

....
<link rel="import" href="html/import.html ">
    </head>
<body>
<custom-element></custom-element>
</body>
...

Any help would be greatly appreciated.

Sorry didn't mean to make it confusing, guess I added too much. Basically I'm looking for the best way to import HTML and JS files and not have everything break... — MTECH
– MTECH, Commented Feb 9, 2017 at 18:22
Yes, but import where? Are you looking for a templating engine? — Ivan Modric
– Ivan Modric, Commented Feb 9, 2017 at 18:35
Somewhat -- nothing like handlebars or smarty.... Just a simple way to import a section for example "call-to-action.html" (that requires jQuery and a custom script) all to the main document,,,,,, I haven't found a way that isn't a nightmare to debug or manage dependencies.... — MTECH
– MTECH, Commented Feb 9, 2017 at 18:44
I'm still not sure what you are looking for. You could include html like this: <object type="text/html" data="partial.html" ></object>. In this partial you could also include scripts that would get loaded when the partial does. — Ivan Modric
– Ivan Modric, Commented Feb 9, 2017 at 18:57

MTECH · Accepted Answer · 2017-02-09 19:32:07Z

First thanks so much Ivan for taking the time to help.

So here's one section that's imported. Sections tend not to show up at all. The below for example only works this way (and it's just pulling HTML from the imported file (no js). If I don't use the inline JS or move it to the bottom let's say - it's blank.

No idea why this is happening....

<link rel="import" href="html/footer-cta.html">

 <section id="footer-cta" class="footer-cta shadow-alt spacing-responsive">
            <script>
                var link = document.querySelector('link[href="html/footer-cta.html"]');
                var template = link.import.querySelector('template');
                var clone = document.importNode(template.content, true);
                document.querySelector('#footer-cta').appendChild(clone); // link to div or section ID on main page you want it sent to
            </script>
        </section>
    </div>

Collectives™ on Stack Overflow

How to quickly Import JS, Angular, HTML etc.. files and avoid dependency issues?

HTML5 Templates / Imports

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML5 Templates / Imports

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related