I'm new to JS development, basically from PHP Background. I was wondering if there is a way of including html pages like we do in codeigniter(loading views). Im trying to create a template structure to my electron application where header and footer file is loaded on every html page requested.
I cant try the jQuery load method
$('#footer').load('header.html');
as I would need to load jquery in footer of every file html file I create.
I tried the JS way of loading html files
document.getElementById("head").innerHTML='<object type="text/html" data="header.html" ></object>';
but that basically creates an object which is similar to an iframe so your resources never gets used to the way you would load using link and script tags.
I have a main.js file from where the home page would be loaded:
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 1280, height: 742, resizable:false})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'app/views/index.html'),
protocol: 'file:',
slashes: true
}));
}
How do i attach the header and footer directly in this method? Also I'm using express if that helps.
Please see this plunker for an angular 1.5 example, or check the documentation. Basically you want to do this <div ng-include="'yourtemplate.html'"></div> for the angular setup.
For EJS templates, you would do something like <% include includes/header.ejs %>
I would wrap those in the bootstrap navbar-header class and footer tags for optimal placement, or any custom div that you are working on.
Now, when it comes to using these in Electron, I would incorporate these files into your 'main' browserWindow, so that when the application runs, the index.html file you are referencing always has these files loaded.
Another thing you can do is use ng-if statements to change the ng-includes based on certain parameters. The same can be said with any server side template like EJS.
Related
I'm building a site with HTML, CSS, JS (And of course Jquery), VueJS and Bootstrap. I'm wondering if there is a way to make some sort of 'layout' file that can be reused over and over? I don't want to copy paste all the HTML for my top bar every time I make a new page or have to go through every page and update that code. I've tried using the tag with javascript to put different HTML files (Content) inside of a 'layout' file but I've had trouble with formatting. Should I continue down that route? Is there another easier way?
It would be nice if there was a way to do it similar to blazor where you can just write some HTML and then do an #Body.
I ended up making a SPA through the use of Jquery. The index.html file contains my navbar and then the content is put into a "content" div which is populated by separate page.html files. All you have to do is make a page.html file and then go to site.com/#page and the router handles everything else. This code also needs to be run on page load..
$(window).on("hashchange", function ()
{
var page = window.location.hash;
console.log(page.substring(1));
$.get(page.substring(1) + ".html", function (pageContent) {
$("#content").html(pageContent);
});
});
I am building an Angular4 WebApp using an external HTML template for my components. The template needs to run some scripts to load correctly the page.
If I include script tags in my index.html the page loads fine the first time but when I route to another page scripts are not reloaded for the component template and the page remains blank.
Is there another way to load scripts and solve this issue?
Please Help.
here are my files. when application loads it works fine but when i route to some other page the js links in index.html wont load.
My app.component.html file only have
this is my app.module file
index.html
I'm a AngularJS-Beginner and i've just started using ng-include to better structure my html blocks.
I'm using jquery.scrollTo.js to add a button to scroll to the top. However i've noticed that if I place the button inside tpl-footer.html and load it via ng-inlcude while having jquery.scrollTo loaded in index.html, it won't work.
I either have to place the button inside index.html or load jquery.scrollTo.js inside tpl-footer.html.
My question: How can I access loaded scripts in index.html via ng-included templates?
Cheers!
I have an animated 404 Error page created using JQuery.
The only to make it work with my AngularJS project is if i had the jquery.min.js, 404.js, 404.min.css and a javascript script tag in the index.html however, this creates unnecessary loading on my other pages and slows down the website.
I found this https://github.com/manuelmazzuola/angular-ui-router-styles but it looks like it's designed only for CSS stylesheets or can i use to include JS files too?
How should I load this JS, CSS files only on my partials, 404.html file and not on index.html?
I think you looking for lazy loading.
Normally, all the JavaScript that pertains to a certain web page or application is loaded immediately during page load.
Lazy loading is loading code only once the user needs it. So if you have a button on your page that will show a completely different screen to the user once it is pressed,
Require Js Serve this purpose well and clean.
Take a look at below code from my project
$('#somebutton').on('click', function() {
require(
['every', 'javascript', 'dependency', 'for', 'other', 'screen'],
function(ev, js, dep, fr, othr, scrn){
// Create the screen with your dependencies
}
);
});
I have a html page (inicio.html) which loads some js scripts. Then from a js script there is a navigation to another page in a different html file (test.html) and a different set of js files.
The problem is that when I do the changePage ($.mobile.changePage("test.html");) and the new page is loaded the new js files are kept in files like
http://localhost:8080/cdmWEB/resources/scripts/jquery/2.0.3/jquery-2.0.3.min.js/eval/seq/2
The js functions are being executed because the console.log messages in them are shown. But the changes the js scripts should do in the page are not rendered and the js cannot be debuged (using firebug).
I am loading the js scripts with the tag in the html file, but I have also tried the $.getScript function with the same result.
I am using jQuery 2.0.3 and jQuery-mobile 1.3.1.
From what I saw the reason why the js files are kept like that is because they are retrieved using ajax. Is there a way to prevent this and retrieve the file "normally"? or is there something I am missing (probably)?
Have a look here:
Jquery Mobile - $.mobile.changepage not loading external .JS files
You should consider loading the needed JS in the main page, and not in the page your changing to.
I ended up using window.open('test.html','_self','',true); to make the transition. This loads the new scripts when the transition is made and the jquery appends keep working fine.