Download as PDF, PPTX
![package.json
{
"name":"electron-quick-start",
"version":"1.0.0",
"description":"AminimalElectronapplication",
"main":"main.js",
"scripts":{
"start":"electronmain.js"
},
"repository":{
"type":"git",
"url":"git+https://github.com/atom/electron-quick-start.git"
},
"keywords":[
"Electron","quick","start","tutorial"
],
"author":"GitHub",
"license":"CC0-1.0",
"bugs":{
"url":"https://github.com/atom/electron-quick-start/issues"
},
"homepage":"https://github.com/atom/electron-quick-start#readme"
"devDependencies":{
"electron-prebuilt":"^0.36.0"
}
}
main.js
'usestrict';
constelectron=require('electron');
constapp=electron.app;
constBrowserWindow=electron.BrowserWindow;
//--------------------------------------
letmainWindow;
//--------------------------------------
app.on('window-all-closed',function(){
if(process.platform!='darwin'){
app.quit();
}
});
//--------------------------------------
app.on('ready',function(){
mainWindow=newBrowserWindow({width:800,height:600});
mainWindow.loadURL('file://'+__dirname+'/index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed',function(){
mainWindow=null;
});
});
5 / 27](https://image.slidesharecdn.com/electron-151227102427/85/Develop-Desktop-Apps-with-Electron-5-320.jpg)
![package.json
{
"name":"app",
"productName":"App",
"version":"0.0.0",
"description":"",
"license":"MIT",
"repository":"user/repo",
"author":{"name":"","email":"","url":""
},
"electronVersion":"0.36.0",
"scripts":{
"test":"xo",
"start":"electron.",
"build":"electron-packager.$npm_package_productName--out=dist--ignore='^/dist$'--prune--asar--all--version=$npm_p
},
"files":["index.js","index.html","index.css"
],
"keywords":["electron-app","electron"
],...
}
...
"dependencies":{
"electron-debug":"^0.5.0"
},
"devDependencies":{
"electron-packager":"^5.0.0",
"electron-prebuilt":"^0.36.0",
"xo":"^0.12.0"
},
"xo":{
"esnext":true,
"envs":["node","browser"]
}
9 / 27](https://image.slidesharecdn.com/electron-151227102427/85/Develop-Desktop-Apps-with-Electron-9-320.jpg)
![(function(){
'usestrict';
angular.module('todoApp',[])
.controller('todoListController',[TodoListController]);
functionTodoListController(){
vartodoList=this;
todoList.todos=[];
varlow=require('lowdb');
varstorage=require('lowdb/file-sync');
todoList.db=low('app-03/db.json',{storage});
getAllTodos();
todoList.addTodo=function(){
varvarid=todoList.db('todos').size();
while(todoList.db('todos').find({id:varid})){varid+=
vardata={id:varid,text:todoList.todoText,done:
todoList.db('todos').push(data);
todoList.todos.push(data);
todoList.todoText='';
};
todoList.remaining=function(){
varcount=0;
angular.forEach(todoList.todos,function(todo){
count+=todo.done?0:1;
});
returncount;
};
angular-offline-todo.js
todoList.archive=function(){
varoldTodos=todoList.todos;
todoList.todos=[];
angular.forEach(oldTodos,function(todo){
if(!todo.done)todoList.todos.push(todo);
});
};
todoList.updDone=function(idx){
vardata=todoList.db('todos')
.chain()
.find({id:todoList.todos[idx].id})
.assign({done:todoList.todos[idx].d
.value();
};
functiongetAllTodos(){
todoList.todos=todoList.db('todos').cloneDeep();
};
}
})();
15 / 27](https://image.slidesharecdn.com/electron-151227102427/85/Develop-Desktop-Apps-with-Electron-15-320.jpg)
Uploaded byEueung Mulyana
Develop Desktop Apps with Electron
This document describes how to build an AngularJS todo application using Electron and Photon. It includes code snippets and explanations for setting up the necessary package.json, main process file, and renderer files. Key steps shown include initializing the Electron app and main window, connecting the AngularJS controller and templates, integrating a LowDB database for data persistence, and adding Photon CSS styling and a custom context menu using remote.
More Related Content
Develop Desktop Apps with Electron
- 1. JS - Electron EueungMulyana http://eueung.github.io/js/electron JS CodeLabs | Attribution-ShareAlike CC BY-SA 1 / 27
- 2. Agenda Electron Quick Start,Boilerplate Angular.JS Todo @ Electron Electron + Photon Photon Angular Todo-App 2 / 27
- 3. Electron QuickStart atom/electron-quick-start 3 / 27
- 4. package.json + main.js+ index.html 4 / 27
- 5.
- 6. Electron Quick Start package.json+ main.js + index.html <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>HelloWorld!</title> <script></script> </head> <body> <h1>HelloWorld!</h1> Weareusingnode<script> Chrome<script> </ andElectron<script> </body> </html> document.write(process.versions. document.write(process.versions.chrome) document.write(process.versions.elect 6 / 27
- 7.
- 8. package.json + index.js+ index.html + index.css 8 / 27
- 9.
- 10.
- 11. Angular.JS Todo@ Electron 11 / 27
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. Electron +Photon 17 / 27
- 18.
- 19.
- 20. Photon Template App package.json+ app.js index.html + js/menu.js varremote=require('remote') varMenu=remote.require('menu') varMenuItem=remote.require('menu-item') //--------------------------------- varmenu=newMenu() menu.append(newMenuItem({ label:'Delete', click:function(){ alert('Deleted') } })); //--------------------------------- menu.append(newMenuItem({ label:'MoreInfo...', click:function(){ alert('Hereismoreinformation') } })); //--------------------------------- window.addEventListener('contextmenu',function(e){ e.preventDefault(); menu.popup(remote.getCurrentWindow()); },false); js/menu.js 20 / 27
- 21.
- 22. Photon AngularTodo-App 22 / 27
- 23.
- 24.
- 25.
- 26. References 1. Electron 2. sindresorhus/awesome-electron 3.Photon · Components 26 / 27
- 27. END Eueung Mulyana http://eueung.github.io/js/electron JS CodeLabs| Attribution-ShareAlike CC BY-SA 27 / 27