На этой неделе я столкнулся с проблемой. Мне пришлось создать простое настольное приложение, которое дает пользователю комбинаторный анализ числовой последовательности. Со сроком один день. Я закончил тем, что делал на Java, используя Swing (да, я знаю, это не лучший способ сделать это, но на данный момент я просто продолжаю думать, что простота всегда лучше). Попутно я нахожу замечательную платформу для создания настольных приложений под названием Electron.
Electron — это фреймворк с открытым исходным кодом, разработанный GitHub. Он позволяет разрабатывать настольные приложения с использованием среды выполнения Node.js и веб-браузера Chromium. Electron — это фреймворк для текстовых редакторов Atom и Visual Studio Code. Эта технология позволяет нам использовать мощь веб-технологий и использовать их для разработки настольных приложений.
Итак, после сдачи проекта я решил сделать это снова, на этот раз с Electron e Angular 2.
Почему я выбираю Angular 2? Цитируя легендарного человека новое всегда лучше. Если вы хотите знать, как все прошло, следуйте за мной, я дам вам пошаговую инструкцию, как начать проект с Electron и Angular 2.
Для начала убедитесь, что у вас установлены последние версии Node.js и npm. Создайте новый каталог и создайте новый проект с помощью следующей команды:
инициализация нпм
Ответьте на заданный вопрос. После установки электронного фреймворка:
npm установить предварительную сборку электронов — save-dev
Теперь создайте новый файл с именем index.js и добавьте в него приведенный ниже код (это тот же код, который можно найти в сид-фразе быстрого старта на веб-сайте Electron).
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format({
pathname: path.join(__dirname, 'app/index.html'),
protocol: 'file:',
slashes: true
}))
win.webContents.openDevTools()
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
Создайте новый каталог с именем app и добавьте в него файл index.html. Откройте файл index.html и добавьте в него приведенный ниже код.
<html>
<head>
<title>First App</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Теперь откройте файл package.json и измените сценарии, чтобы включить start, как показано ниже.
"scripts": {
"start": "electron ."
},
Затем вы можете проверить и проверить, работает ли.
запуск нпм
Вы должны увидеть простое окно с надписью Hello world. Хорошо, это ваше настольное приложение, созданное с помощью электрона. Теперь давайте используем angular 2.
Откройте package.json и добавьте в него указанные ниже зависимости.
"devDependencies": {
"electron-prebuilt": "^0.37.8",
"ts-loader": "^0.7.2",
"typescript": "^1.7.3",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"angular2": "2.0.0-beta.17",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
}
После добавления зависимостей снова запустите npm install.
Теперь мы будем использовать typescript для написания приложения. Поэтому для компиляции файлов машинописного текста нам нужен tsconfig.json, в котором указаны параметры. Давайте создадим файл tsconfig.json. Добавьте в него приведенный ниже код.
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true
},
"files": [
"app/app.ts"
]
}
Создайте новый файл с именем app.ts и добавьте в него приведенный ниже код.
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({
selector: 'myapp',
template: '<h1>Angular 2 app inside a desktop app</h1>'
})
export class AppComponent {}
bootstrap(AppComponent);
Мы используем один компонент с простым текстом «Приложение Angular 2 внутри настольного приложения».
Откройте файл webpack.config.js (из каталога приложения) и добавьте в него приведенный ниже код.
var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
module.exports = {
devtool: 'source-map',
debug: true,
entry: {
'angular2': [
'rxjs',
'reflect-metadata',
'angular2/core',
'angular2/router',
'angular2/http'
],
'app': './app/app'
},
output: {
path: __dirname + '/build/',
publicPath: 'build/',
filename: '[name].js',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['','.ts','.js','.json', '.css', '.html']
},
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts',
exclude: [ /node_modules/ ]
}
]
},
plugins: [
new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
new CommonsChunkPlugin({ name: 'common', filename: 'common.js' })
]
};
Теперь снова откройте файл package.json и измените сценарии, как показано ниже.
Вот и все. Теперь запустите:
npm запустить сборку
Внутри вашего каталога должен быть новый каталог сборки с нашими файлами .js. Теперь нам нужно сослаться на них в index.html.
<html>
<head>
<title>First App</title>
</head>
<body>
<myapp></myapp>
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../build/common.js"></script>
<script src="../build/angular2.js"></script>
<script src="../build/app.js"></script>
</body>
</html>
Обратите внимание, что мы используем селектор для AppComponent.
Теперь откройте свой терминал и запустите:
запуск нпм
Теперь вы могли видеть, что шаблон в файле app.ts присутствует на экране нашего приложения, что означает, что приложение angular 2 создано, а затем запущено вместе с настольным приложением, созданным электроном. Вот как angular 2 можно использовать для создания настольных приложений вместе с электронной структурой.
Если вы хотите узнать больше, этот сайт мне очень помогает.
