[Electron] HTML에 다른 HTML 파일을 include하여 사용하기

Electron에서 HTML 안에 다른 HTML을 삽입(Include)하여 부분별로 HTML을 나눠 관리하기 쉽도록 하기 위해 찾아보니,

AngulerJS 같은 프레임워크를 쓰면 된다고 하지만, 사용할 줄 모르기에.....

더 검색해 보니 Electron 전용(?!) ejs를 사용하게 되었다.

 

 

* ejs-electron

 

아래는 HTML에 다른 HTML을 추가하여 사용하는 방법 예시이다.

 

- 완성된 파일 구조(결과)

파일 구조

메인인 index.js 파일

• ejs-electron 을 추가하여 사용 할 수 있다.
• ejse.data("key", "value") 또는 ejse.data({key: "value"}) 형식으로 ejs 파일에 값을 전달 할 수 있다.

const electron = require('electron');
const ejse = require('ejs-electron');   
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

// Create Main Window
var win;
function createWindow () {

    let w = 900;
    let h = 700;

    win = new BrowserWindow({
        title: "Test EJS",
        'width': w,
        'height': h,
        frame: true
    })

    ejse.data('name', 'Holmes');
    win.loadURL(`file://${__dirname}/app/profile.ejs`);  // main html file

    win.on('closed', function () {
        mainWindowState.saveState(win);
        win = null;
    })
};

app.on('ready', createWindow); // Electron이 초기화를 끝냈을 때
app.on('activate', function () { // 애플리케이션이 활성화될 때
    if (win === null) {
        createWindow()
    }
});
app.on('window-all-closed', function () { // 모든 윈도우 닫을 때
    if (process.platform !== 'darwin') {
        app.quit()
    }
});

 

HTML 파일 내에 HTML이 삽입되는지 테스트하기위해

ejs 파일은 두개를 만들었다.

   부모 HTML : profile.ejs

   자식 HTML : dog.ejs

 

먼저 부모 HTML 인 profile.ejs 파일은 다음과 같다.

• <%= name %> 값은 index.js 파일에서 전송한 데이터(data)를 받아온다.
• <%- include('파일경로', {key : 'value'}) %>
  • 같은 경로에 위치한 dog.ejs 파일을 불러오며,
  • dog.ejs에 Sparky 값을 갖는 name 키를 전송하게 된다.

Your name: <%= name %>
<%- include('./dog', {name: 'Sparky'}) %>

 

마지막으로 자식 HTML인 dog.ejs 파일이다.

• 처음 <%= name %> 값은 profile.ejs에서 보낸 값을 갖는다.
• <%= ejse.data('name') %> 은 index.js 파일에 선언된 name 값을 갖는다.

The dog's name: <%= name %>
This dog belongs to: <%= ejse.data('name') %>

 

 

 

실행해 보면 아래와 같이 두 HTML 파일이 합쳐서 보이게 된다.

실행 결과

 

 

 

* 

• <%= 키 %>  : 키에 해당하는 값을 표시
• <%- include("경로", {키: '값'} %> : ejs 파일을 불러옴.

 

 

 

 

---

[참고] ejs-electron