electron && angular build desktop applications

electron Introduction

Electron is a real-time framework that allows you to use HTML5, CSS and JavaScript to create desktop applications. Electron allows you to use rich pure JavaScript call native (operating system) APIs to create desktop applications. Electron use a web page as its GUI, so you can see it as being as a JavaScript control, streamlined version of the Chromium browser. Writing your first electron application  

It can be understood as shell electron is a desktop application, loading the contents of a web page. Construction of various page frame, such as angular, vue the like, may be used in conjunction with electron.

Angular Introduction

Angular2 is an open source JavaScript library, maintained by Google, to help a single page application is running. Angular1.x difference Angular2.x with similar or Java and JavaScript is the difference with the Lei Feng Pagoda, so when we need to do to re-learn Angular2.x mind ready to learn a language. Angular2 later version Angular2 essentially similar. Angular2 tutorial . Angular2 use TypeScript language, tutorials Seeing . 

Electron + angular build a desktop application

1. Construction of an angular application

the new first-electron angular-STYLE = scss

ng command npm to use as a third-party package management tools. npm source of slow domestic Taobao can be set to use a mirror. Proposed installation cnpm.

2. Start the application

cd first-electron-angular
cnpm i
ng serve

You can see, the command launched a web service, the address is: http: // localhost: 4200.

3. Modify the file package.json

The following is the revised points:

• scripts.start modify the startup script. We need to start supporting electron and angular applications. "Start": "npm-run-all -p electron: serve ng: serve"
• Three new startup script
  • "To: serve": "serve the"
  • "electron:serve-tsc": "tsc -p tsconfig.json"
  • "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve"
• New entry file script.main address: "main": "main.js"
• Add two third-party engineering package:
  • "npm-run-all": "4.1.5"
  • "wait-on": "4.0.0"

{
  "name": "first-ng-electron",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "npm-run-all -p electron:serve ng:serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "ng:serve": "ng serve",
    "electron:serve-tsc": "tsc -p tsconfig.json",
    "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve"
    
  },
  "main": "main.js",
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.24",
    "@angular/cli": "~8.3.24",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "electron": "^8.0.0",
    "electron-reload": "^1.5.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "npm-run-all": "4.1.5",
    "wait-on": "4.0.0"
  }
}

4. New main.ts file

In the folder New main.ts file first-ng-electron case. Document reads as follows:

{const 
    App, // the control module application lifecycle. 
    BrowserWindow, // create a native browser window module 
   } = the require ( 'Electron'); 
the require ( 'Electron-reload') (__ dirname, { 
    Electron: the require ( `$ {__ dirname} / the node_modules / electron`) 
  }); 

* aS path from Import 'path'; 
Import URL from aS * 'URL'; 

   // holding a reference to the window object, or when the GC is JavaScript, window will be automatically shut down 
   the let win; 
   const the createWindow = () => { 
    // the Create The Browser window. 
    win new new browserwindow = ({ 
    width: 1200, 
    height: 800, 
    DefaultFontSize: 16, 
    defaultMonospaceFontSize: 16, 
    defaultEncoding: "UTF-. 8",  
    WebPreferences: {
     plugins:
    }); 
    Win.loadURL ( 'HTTP: // localhost: 4200'); 
    index.html // load application 
    // win.loadURL ( `file: // $ {__dirname} / dist / index.html`); 
    // open development tools 
    win.webContents.openDevTools (); 
    // when the window is closed, this event will be issued 
    win.on ( 'closed', () => win = null); 
    win.on ( 'READY-to -show ', () => { 
    }) 
    
   }; 
   // Electron when the initialization is completed and ready to create a browser window when the method is called 
   app.on (' rEADY ', the createWindow); 
   // if all the windows are when closed, the program exits 
   app.on ( 'closed-window-All', () => { 
    // on OS X, typically the user explicitly presses Cmd + Q before application remains active  
    process. ! Platform == 'Darwin' && app.quit (); 
   });
   app.on('activate', () => {
    // on OS X it 's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    win === null && createWindow();
   });

5. Run electron application

cnpm i
npm start

cnpm install new application packages using npm start to start electron application. Remember before starting electron application, to ensure that 4200 port is not in use.