CODEWITHSUNDEEP
javascriptnode.jsexpresselectron
cyberrspiritt
cyberrspiritt

Reputation: 926

Dynamically loading html files in electron application

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.

Upvotes: 1

Views: 3693

Answers (1)

unseen_damage
unseen_damage

Reputation: 1376

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.

Upvotes: 1

Related Questions