#Features
- A ng-include alternative
- Simple declarative syntax.
- Supporting Inline JS Inside remote template
- Supporting Script Tags with Src Attribute Inside remote templates
- Full control over script execution with noscript Attribute
- You can delay loading with loadafter attribute for any remote template
- Support for nested partial tags
- Support for custom tags
- Zero dependencies
- Works on IE9+,Chrome,Opera,Firefox and all mobile browsers
- Simple to use
- can do what ng-include does but without angular
- 3kb normal size
- 2kb minified
##Gettting started
<!-- just before the body end include partial js and you are good to go -->
<script src="js/partial.min.js"></script>
</body>
<partial src="templates/header.html"></partial>`
or call a function onload
<partial src="templates/footer.html" onload="Footerloaded"></partial>
or load after specific delay
<partial src="templates/menu.html" loadafter="3000"></partial>`
or block a script execution with noscript="true"
<partial src="templates/menu.html" noscript="true"></partial>`
More complex
HTML
<div id="menu" class="list-group">
<a href="pages/index.html" class="list-group-item active">
Home
</a>
<a href="pages/page1.html" class="list-group-item">About</a>
<a href="pages/page2.html" class="list-group-item">Contact</a>
<a href="pages/page3.html" class="list-group-item">Other Links</a>
</div>
JAVASCRIPT
$('#menu a').click(function (e) {
e.preventDefault();
var path = $(this).prop('href');
var container = document.getElementById('view');
partial.getPage(path, container, function (elem) {
Prism.highlightAll();
});
$('.active').removeClass('active');
$(this).addClass('active');
});
- Simple to use
- can do what ng-include dose but without angular
- 3kb normal side
- 2kb minified
How to use ?
npm install
run.bat