译】使用 AngularJS 和 Electron 构建桌面应用

原文： Creating Desktop Applications With AngularJS and GitHub Electron

GitHub 的 Electron 框架（以前叫做 Atom Shell）允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用。它是 io.js 运行时的衍生，专注于桌面应用而不是 web 服务端。

Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容。

这个教程向我们展示了如何使用 Angular 和 Electron 构建一个桌面应用。下面是本教程的所有步骤：

创建一个简单的 Electron 应用
使用 Visual Studio Code 编辑器管理我们的项目和任务
使用 Electron 开发（原文为 Integrate）一个 Angular 顾客管理应用（Angular Customer Manager App）
使用 Gulp 任务构建我们的应用，并生成安装包

创建你的 Electron 应用

起初，如果你的系统中还没有安装 Node，你需要先安装它。我们应用的结构如下所示：

这个项目中有两个 package.json 文件。

开发使用项目根目录下的 package.json 包含你的配置，开发环境的依赖和构建脚本。这些依赖和 package.json 文件不会被打包到生产环境构建中。
应用使用app 目录下的 package.json 是你应用的清单文件。因此每当在你需要为你项目安装 npm 依赖的时候，你应该依照这个 package.json 来进行安装。

package.json 的格式和 Node 模块中的完全一致。你应用的启动脚本（的路径）需要在 app/package.json 中的main属性中指定。

app/package.json看起来是这样的：

{

  name: "AngularElectron",

  version: "0.0.0",

  main: "main.js"

}

过执行npm init命令分别创建这两个package.json文件，也可以手动创建它们。通过在命令提示行里键入以下命令来安装项目打包必要的 npm 依赖：

npm install --save-dev electron-prebuilt fs-jetpack asar rcedit Q

创建启动脚本

app/main.js是我们应用的入口。它负责创建主窗口和处理系统事件。 main.js 应该如下所示：

// app/main.js

// 应用的控制模块

var app = require('app'); 

// 创建原生浏览器窗口的模块

var BrowserWindow = require('browser-window');

var mainWindow = null;

// 当所有窗口都关闭的时候退出应用

app.on('window-all-closed', function () {

  if (process.platform != 'darwin') {

    app.quit();

  }

});

// 当 Electron 结束的时候，这个方法将会生效

// 初始化并准备创建浏览器窗口

app.on('ready', function () {

  // 创建浏览器窗口.

  mainWindow = new BrowserWindow({ width: 800, height: 600 });

  // 载入应用的 index.html

  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // 打开开发工具

  // mainWindow.openDevTools();

  // 窗口关闭时触发

  mainWindow.on('closed', function () {

    // 想要取消窗口对象的引用，如果你的应用支持多窗口，

    // 通常你需要将所有的窗口对象存储到一个数组中，

    // 在这个时候你应该删除相应的元素

    mainWindow = null;

  });

});

通过 DOM 访问原生

正如我上面提到的那样，Electron 使你能够直接在 web 页面中访问本地 npm 模块和原生 API。你可以这样创建app/index.html文件：

<html>

<body>

  <h1>Hello World!</h1>

  We are using Electron

  <script>  document.write(process.versions['electron']) </script>

  <script> document.write(process.platform) </script>

  <script type="text/javascript">

     var fs = require('fs');

     var file = fs.readFileSync('app/package.json');

     document.write(file);

  </script>

</body>

</html>

app/index.html是一个简单的 HTML 页面。在这里，它通过使用 Node’s fs (file system) 模块来读取package.json文件并将其内容写入到 document body 中。

运行应用

一旦你创建好了项目结构、app/index.html、app/main.js和app/package.json，你很可能想要尝试去运行初始的 Electron 应用来测试并确保它正常工作。

如果你已经在系统中全局安装了electron-prebuilt，就可以通过下面的命令启动应用：

electron app

在这里，electron是运行 electron shell 的命令，app是我们应用的目录名。如果你不想将 Election 安装到你全局的 npm 模块中，可以在命令提示行中通过下面命令使用本地npm_modules文件夹下的 electron 来启动应用。

"node_modules/.bin/electron" "./app"

尽管你可以这样来运行应用，但是我还是建议你在gulpfile.js中创建一个 gulp task ，这样你就可以将你的任务和 Visual Studio Code 编辑器相结合，我们会在下一部分展示。

// 获取依赖

var gulp        = require('gulp'),

  childProcess  = require('child_process'),

  electron      = require('electron-prebuilt');

// 创建 gulp 任务

gulp.task('run', function () {

  childProcess.spawn(electron, ['./app'], { stdio: 'inherit' });

});

运行你的 gulp 任务：gulp run。我们的应用看起来会是这个样子：

配置 Visual Studio Code 开发环境

Visual Studio Code 是微软的一款跨平台代码编辑器。VS Code 是基于 Electron 和微软自身的 Monaco Code Editor 开发的。你可以在这里下载到 Visual Studio Code。

在 VS Code 中打开你的 electron 应用。

配置 Visual Studio Code Task Runner

有很多自动化的工具，像构建、打包和测试等。我们大多从命令行中运行这些工具。VS Code task runner 使你能够将你自定义的任务集成到项目中。你可以在你的项目中直接运行 grunt,、gulp,、MsBuild 或者其他任务，这并不需要移步到命令行。

VS Code 能够自动检测你的 grunt 和 gulp 任务。按下ctrl + shift + p然后键入Run Task敲击回车便可。

你将从gulpfile.js或gruntfile.js文件中获取所有有效的任务。

注意：你需要确保gulpfile.js文件存在于你应用的根目录下。

ctrl + shift + b会从你任务执行器（task runner）中执行build任务。你可以使用task.json文件来覆盖任务集成。按下ctrl + shift + p然后键入Configure Task敲击回车。这将会在你项目中创建一个.setting的文件夹和task.json文件。要是你不止想要执行简单的任务，你需要在task.json中进行配置。例如你或许想要通过按下Ctrl + Shift + B来运行应用，你可以这样编辑task.json文件：

{

  "version": "0.1.0",

  "command": "gulp",

  "isShellCommand": true,

  "args": [ "--no-color" ],

  "tasks": [

    {

      "taskName": "run",

      "args": [],

      "isBuildCommand": true

    }

  ]

}

根部分声明命令为gulp。你可以在tasks部分写入你想要的更多任务。将一个任务的isBuildCommand设置为 true 意味着它和Ctrl + Shift + B进行了绑定。目前 VS Code 只支持一个*任务。

现在，如果你按下Ctrl + Shift + B，gulp run将会被执行。

你可以在这里阅读到更多关于 visual studio code 任务的信息。

调试 Electron 应用

打开调试面板点击配置按钮就会在.settings文件夹内创建一个launch.json文件，包含了调试的配置。

我们不需要启动 app.js 的配置，所以移除它。

现在，你的launch.json应该如下所示：

{

  "version": "0.1.0",

  // 配置列表。添加新的配置或更改已存在的配置。

  // 仅支持 "node" 和 "mono"，可以改变 "type" 来进行切换。

  "configurations": [

    {

      "name": "Attach",

      "type": "node",

      // TCP/IP 地址. 默认是 "localhost"

      "address": "localhost",

      // 建立连接的端口.

      "port": 5858,

      "sourceMaps": false

     }

   ]

}

按照下面所示更改之前创建的 gulprun任务，这样我们的 electron 将会采用调试模式运行，5858 端口也会被监听。

gulp.task('run', function () {

  childProcess.spawn(electron, ['--debug=5858','./app'], { stdio: 'inherit' });

});

在调试面板中选择 “Attach” 配置项，点击开始（run）或者按下 F5。稍等片刻后你应该就能在上部看到调试命令面板。

创建 AngularJS 应用

第一次接触 AngularJS？浏览官方网站或一些 Scotch Angular 教程。

这一部分会讲解如何使用 AngularJS 和 MySQL 数据库创建一个顾客管理（Customer Manager）应用。这个应用的目的不是为了强调 AngularJS 的核心概念，而是展示如何在 GiHub 的 Electron 中同时使用 AngularJS 和 NodeJS 以及 MySQL 。

我们的顾客管理应用正如下面这样简单：

顾客列表
添加新顾客
选择删除一个顾客
搜索指定的顾客

项目结构

我们的应用在 app 文件夹下，目录结构如下所示：

主页是app/index.html文件。app/scripts文件夹包含所有用在该应用中的关键脚本和视图。有许多方法可以用来组织应用的文件。

这里我更喜欢按照功能来组织脚本文件。每个功能都有它自己的文件夹，文件夹中有模板和控制器。获取更多关于目录结构的信息，可以阅读 AngularJS 最佳实践: 目录结构

在开始 AngularJS 应用之前，我们将使用 bower 安装客户端方面的依赖。如果你还没有 Bower 先要安装它。在命令提示行中将当前工作目录切换至你应用的根目录，然后依照下面的命令安装依赖。

bower install angular angular-route angular-material --save

设置数据库

在这个例子中，我将使用一个名字为customer-manager的数据库和一张名字为customers的表。下面是数据库的导出文件，你可以依照这个快速开始。

CREATE TABLE `customer_manager`.`customers` (

  `customer_id` INT NOT NULL AUTO_INCREMENT,

  `name` VARCHAR(45) NOT NULL,

  `address` VARCHAR(450) NULL,

  `city` VARCHAR(45) NULL,

  `country` VARCHAR(45) NULL,

  `phone` VARCHAR(45) NULL,

  `remarks` VARCHAR(500) NULL, PRIMARY KEY (`customer_id`)

);

创建一个 Angular Service 和 MySQL 进行交互

一旦你的数据库和表都准备好了，就可以开始创建一个 AngularJS service 来直接从数据库中获取数据。使用node-mysql这个 npm 模块使 service 连接数据库——一个使用 JavaScript 为 NodeJs 编写的 MySQL 驱动。在你 Angular 应用的 app/ 目录下安装node-mysql模块。

注意：我们将 node-mysql 模块安装到 app 目录下而不是应用的根目录，是因为我们需要在最终的 distribution 中包含这个模块。

在命令提示行中切换工作目录至 app 文件夹然后按照下面所示安装模块：

npm install --save mysql

我们的 angular service —— app/scripts/customer/customerService.js 如下所示：

(function () {

    'use strict';

    var mysql = require('mysql');

    // 创建 MySql 数据库连接

    var connection = mysql.createConnection({

        host: "localhost",

        user: "root",

        password: "password",

        database: "customer_manager"

    });

    angular.module('app')

        .service('customerService', ['$q', CustomerService]);

    function CustomerService($q) {

        return {

            getCustomers: getCustomers,

            getById: getCustomerById,

            getByName: getCustomerByName,

            create: createCustomer,

            destroy: deleteCustomer,

            update: updateCustomer

        };

        function getCustomers() {

            var deferred = $q.defer();

            var query = "SELECT * FROM customers";

            connection.query(query, function (err, rows) {

                if (err) deferred.reject(err);

                deferred.resolve(rows);

            });

            return deferred.promise;

        }   

        function getCustomerById(id) {

            var deferred = $q.defer();

            var query = "SELECT * FROM customers WHERE customer_id = ?";

            connection.query(query, [id], function (err, rows) {

                if (err) deferred.reject(err);

                deferred.resolve(rows);

            });

            return deferred.promise;

        }     

        function getCustomerByName(name) {

            var deferred = $q.defer();

            var query = "SELECT * FROM customers WHERE name LIKE  '" + name + "%'";

            connection.query(query, [name], function (err, rows) {

                if (err) deferred.reject(err);

                deferred.resolve(rows);

            });

            return deferred.promise;

        }

        function createCustomer(customer) {

            var deferred = $q.defer();

            var query = "INSERT INTO customers SET ?";

            connection.query(query, customer, function (err, res)

                if (err) deferred.reject(err);

                deferred.resolve(res.insertId);

            });

            return deferred.promise;

        }

        function deleteCustomer(id) {

            var deferred = $q.defer();

            var query = "DELETE FROM customers WHERE customer_id = ?";

            connection.query(query, [id], function (err, res) {

                if (err) deferred.reject(err);

                deferred.resolve(res.affectedRows);

            });

            return deferred.promise;

        }     

        function updateCustomer(customer) {

            var deferred = $q.defer();

            var query = "UPDATE customers SET name = ? WHERE customer_id = ?";

            connection.query(query, [customer.name, customer.customer_id], function (err, res) {

                if (err) deferred.reject(err);

                deferred.resolve(res);

            });

            return deferred.promise;

        }

    }

})();

customerService是一个简单的自定义 angular service，它提供了对表customers的基础 CRUD 操作。直接在 service 中使用了 node 模块mysql。如果你已经拥有了一个远程的数据服务，你也可以使用它来替代之。

控制器 & 模板

app/scripts/customer/customerController中的customerController如下所示：

(function () {

    'use strict';

    angular.module('app')

        .controller('customerController', ['customerService', '$q', '$mdDialog', CustomerController]);

    function CustomerController(customerService, $q, $mdDialog) {

        var self = this; 

        self.selected = null;

        self.customers = [];

        self.selectedIndex = 0;

        self.filterText = null;

        self.selectCustomer = selectCustomer;

        self.deleteCustomer = deleteCustomer;

        self.saveCustomer = saveCustomer;

        self.createCustomer = createCustomer;

        self.filter = filterCustomer;   

        // 载入初始数据

        getAllCustomers();

        //----------------------

        // 内部方法

        //----------------------

        function selectCustomer(customer, index) {

            self.selected = angular.isNumber(customer) ? self.customers[customer] : customer;

            self.selectedIndex = angular.isNumber(customer) ? customer: index;

        }

        function deleteCustomer($event) {

            var confirm = $mdDialog.confirm()

                                   .title('Are you sure?')

                                   .content('Are you sure want to delete this customer?')

                                   .ok('Yes')

                                   .cancel('No')

                                   .targetEvent($event);

            $mdDialog.show(confirm).then(function () {

                customerService.destroy(self.selected.customer_id).then(function (affectedRows) {

                    self.customers.splice(self.selectedIndex, 1);

                });

            }, function () { });

        }

        function saveCustomer($event) {

            if (self.selected != null && self.selected.customer_id != null) {

                customerService.update(self.selected).then(function (affectedRows) {

                    $mdDialog.show(

                        $mdDialog

                            .alert()

                            .clickOutsideToClose(true)

                            .title('Success')

                            .content('Data Updated Successfully!')

                            .ok('Ok')

                            .targetEvent($event)

                    );

                });

            }

            else {

                //self.selected.customer_id = new Date().getSeconds();

                customerService.create(self.selected).then(function (affectedRows) {

                    $mdDialog.show(

                        $mdDialog

                            .alert()

                            .clickOutsideToClose(true)

                            .title('Success')

                            .content('Data Added Successfully!')

                            .ok('Ok')

                            .targetEvent($event)

                    );

                });

            }

        }    

        function createCustomer() {

            self.selected = {};

            self.selectedIndex = null;

        }      

        function getAllCustomers() {

            customerService.getCustomers().then(function (customers) {

                self.customers = [].concat(customers);

                self.selected = customers[0];

            });

        }

        function filterCustomer() {

            if (self.filterText == null || self.filterText == "") {

                getAllCustomers();

            }

            else {

                customerService.getByName(self.filterText).then(function (customers) {

                    self.customers = [].concat(customers);

                    self.selected = customers[0];

                });

            }

        }

    }

})();

我们的顾客模板（ app/scripts/customer/customer.html ）使用了 angular material 组件来构建 UI，如下所示：

<div style="width:100%" layout="row">

    <md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"

                md-component-id="left"

                md-is-locked-open="$mdMedia('gt-sm')">

        <md-toolbar layout="row" class="md-whiteframe-z1">

            <h1>Customers</h1>

        </md-toolbar>

        <md-input-container style="margin-bottom:0">

            <label>Customer Name</label>

            <input required name="customerName" ng-model="_ctrl.filterText" ng-change="_ctrl.filter()">

        </md-input-container>

        <md-list>

            <md-list-item ng-repeat="it in _ctrl.customers">

                <md-button ng-click="_ctrl.selectCustomer(it, $index)" ng-class="{'selected' : it === _ctrl.selected }">

                    {{it.name}}

                </md-button>

            </md-list-item>

        </md-list>

    </md-sidenav>

    <div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">

        <md-toolbar layout="row" class="md-whiteframe-z1">

            <md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">

                <md-icon md-svg-icon="menu"></md-icon>

            </md-button>

            <h1>{{ _ctrl.selected.name }}</h1>

        </md-toolbar>

        <md-content flex id="content">

            <div layout="column" style="width:50%">

                <br />

                <md-content layout-padding class="autoScroll">

                    <md-input-container>

                        <label>Name</label>

                        <input ng-model="_ctrl.selected.name" type="text">

                    </md-input-container>

                    <md-input-container md-no-float>

                        <label>Email</label>

                        <input ng-model="_ctrl.selected.email" type="text">

                    </md-input-container>

                    <md-input-container>

                        <label>Address</label>

                        <input ng-model="_ctrl.selected.address"  ng-required="true">

                    </md-input-container>

                    <md-input-container md-no-float>

                        <label>City</label>

                        <input ng-model="_ctrl.selected.city" type="text" >

                    </md-input-container>

                    <md-input-container md-no-float>

                        <label>Phone</label>

                        <input ng-model="_ctrl.selected.phone" type="text">

                    </md-input-container>

                </md-content>

                <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>

                    <md-button class="md-raised md-info" ng-click="_ctrl.createCustomer()">Add</md-button>

                    <md-button class="md-raised md-primary" ng-click="_ctrl.saveCustomer()">Save</md-button>

                    <md-button class="md-raised md-danger" ng-click="_ctrl.cancelEdit()">Cancel</md-button>

                    <md-button class="md-raised md-warn" ng-click="_ctrl.deleteCustomer()">Delete</md-button>

                </section>

            </div>

        </md-content>

    </div>

</div>

app.js 包含模块初始化脚本和应用的路由配置，如下所示：

(function () {

    'use strict';

    var _templateBase = './scripts';

    angular.module('app', [

        'ngRoute',

        'ngMaterial',

        'ngAnimate'

    ])

    .config(['$routeProvider', function ($routeProvider) {

            $routeProvider.when('/', {

                templateUrl: _templateBase + '/customer/customer.html' ,

                controller: 'customerController',

                controllerAs: '_ctrl'

            });

            $routeProvider.otherwise({ redirectTo: '/' });

        }

    ]);

})();

最后是我们的首页 app/index.html

<html lang="en" ng-app="app">

    <title>Customer Manager</title>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge"gt;

    <meta name="description" content="">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- build:css assets/css/app.css -->

    <link rel="stylesheet" href="../bower_components/angular-material/angular-material.css" />

    <link rel="stylesheet" href="assets/css/style.css" />

    <!-- endbuild -->

<body>

    <ng-view></ng-view>

    <!-- build:js scripts/vendor.js -->

    <script src="../bower_components/angular/angular.js"></script>

    <script src="../bower_components/angular-route/angular-route.js"></script>

    <script src="../bower_components/angular-animate/angular-animate.js"></script>

    <script src="../bower_components/angular-aria/angular-aria.js"></script>

    <script src="../bower_components/angular-material/angular-material.js"></script>

    <!-- endbuild -->

    <!-- build:app scripts/app.js -->

    <script src="./scripts/app.js"></script>

    <script src="./scripts/customer/customerService.js"></script>

    <script src="./scripts/customer/customerController.js"></script>

    <!-- endbuild -->

</body>

</html>

如果你已经如上面那样配置过 VS Code task runner 的话，使用gulp run命令或者按下Ctrl + Shif + B来启动你的应用。

构建 AngularJS 应用

为了构建我们的 Angular 应用，需要安装gulp-uglify,gulp-minify-css和gulp-usemin依赖包。

npm install --save gulp-uglify gulp-minify-css gulp-usemin

打开你的gulpfile.js并且引入必要的模块。

  var childProcess = require('child_process');

  var electron     = require('electron-prebuilt');

  var gulp         = require('gulp');

  var jetpack      = require('fs-jetpack');

  var usemin       = require('gulp-usemin');

  var uglify       = require('gulp-uglify');

  var projectDir = jetpack;

  var srcDir     = projectDir.cwd('./app');

  var destDir    = projectDir.cwd('./build');

如果构建目录已经存在的话，清理一下它。

gulp.task('clean', function (callback) {

  return destDir.dirAsync('.', { empty: true });

});

复制文件到构建目录。我们并不需要使用复制功能来复制 angular 应用的代码，在下一部分中usemin将会为我们做这件事请：

gulp.task('copy', ['clean'], function () {

    return projectDir.copyAsync('app', destDir.path(), {

        overwrite: true, matching: [

            './node_modules/**/*',

            '*.html',

            '*.css',

            'main.js',

            'package.json'

       ]

    });

});

我们的构建任务将使用 gulp.src() 获取 app/index.html 然后传递给 usemin。然后它会将输出写入到构建目录并且把 index.html 中的引用用优化版代码替换掉。

注意：千万不要忘记在 app/index.html 像这样定义 usemin 块：

<!-- build:js scripts/vendor.js -->

<script src="../bower_components/angular/angular.js"></script>

<script src="../bower_components/angular-route/angular-route.js"></script>

<script src="../bower_components/angular-animate/angular-animate.js"></script>

<script src="../bower_components/angular-aria/angular-aria.js"></script>

<script src="../bower_components/angular-material/angular-material.js"></script>

<!-- endbuild -->

<!-- build:app scripts/app.js -->

<script src="./scripts/app.js"></script>

<script src="./scripts/customer/customerService.js"></script>

<script src="./scripts/customer/customerController.js"></script>

<!-- endbuild -->

构建任务如下所示：

gulp.task('build', ['copy'], function () {

  return gulp.src('./app/index.html')

    .pipe(usemin({

      js: [uglify()]

    }))

    .pipe(gulp.dest('build/'));

});

为发行（distribution）做准备

在这一部分我们将把 Electron 应用打包至生产环境。在根目录创建构建脚本build.windows.js。这个脚本用于 Windows 上。对于其他平台来说，你应该创建那个平台特定的脚本并且根据平台来运行。

可以在node_modules/electron-prebuilt/dist目录中找到一个典型的 electron distribution。这里是构建 electron 应用的步骤：

我们首要的任务是复制 electron distribution 到我们的dist目录。
每一个 electron distribution 都包含一个默认的应用在dist/resources/default_app中。我们需要用我们最终构建的应用来替换它。
为了保护我们的应用源码和资源，你可以选择将你的应用打包成一个 asar 归档，这会改变一点你的源码。一个 asar 归档是一个简单的类似 tar 的格式，它会将你所有的文件拼接成单个文件，Electron 可以在不解压整个文件的情况下从中读取任意文件。

注意：这一部分描述的是 windows 平台下的打包。其他平台中的步骤是一样的，只是路径和使用的文件不一样而已。你可以在 github 中获取 OSx 和 linux 的完整构建脚本。

安装构建 electron 必要的依赖：npm install --save q asar fs-jetpack recedit

接下来，初始化我们的构建脚本，如下所示：

var Q = require('q');

var childProcess = require('child_process');

var asar = require('asar');

var jetpack = require('fs-jetpack');

var projectDir;

var buildDir;

var manifest;

var appDir;

function init() {

    // 项目路径是应用的根目录

    projectDir = jetpack;

    // 构建目录是最终应用被构建后放置的目录

    buildDir = projectDir.dir('./dist', { empty: true });

    // angular 应用目录

    appDir = projectDir.dir('./build');

    // angular 应用的 package.json 文件

    manifest = appDir.read('./package.json', 'json');

    return Q();

}

这里我们使用fs-jetpacknode 模块进行文件操作。它提供了更灵活的文件操作。

复制 Electron Distribution

从electron-prebuilt/dist复制默认的 electron distribution 到我们的 dist 目录

function copyElectron() {

     return projectDir.copyAsync('./node_modules/electron-prebuilt/dist', buildDir.path(), { overwrite: true });

}

清理默认应用

你可以在resources/default_app文件夹内找到一个默认的 HTML 应用。我们需要用我们自己的 angular 应用来替换它。按照下面所示移除它：

注意：这里的路径是针对 windows 平台的。对于其他平台过程是一致的，只是路径不一样而已。在 OSX 中路径应该是 Contents/Resources/default_app

function cleanupRuntime() {

     return buildDir.removeAsync('resources/default_app');

}

创建 asar 包

function createAsar() {

     var deferred = Q.defer();

     asar.createPackage(appDir.path(), buildDir.path('resources/app.asar'), function () {

         deferred.resolve();

     });

     return deferred.promise;

}

这将会把你 angular 应用的所有文件打包到一个 asar 包文件里。你可以在dist/resources/目录中找到 asar 文件。

替换为自己的应用资源

下一步是将默认的 electron icon 替换成你自己的，更新产品的信息然后重命名应用。

function updateResources() {

    var deferred = Q.defer();

    // 将你的 icon 从 resource 文件夹复制到构建文件夹下

    projectDir.copy('resources/windows/icon.ico', buildDir.path('icon.ico'));

    // 将 Electron icon 替换成你自己的

    var rcedit = require('rcedit');

    rcedit(buildDir.path('electron.exe'), {

        'icon': projectDir.path('resources/windows/icon.ico'),

        'version-string': {

            'ProductName': manifest.name,

            'FileDescription': manifest.description,

        }

    }, function (err) {

        if (!err) {

            deferred.resolve();

        }

    });

    return deferred.promise;

}

// 重命名 electron exe

function rename() {

    return buildDir.renameAsync('electron.exe', manifest.name + '.exe');

}

创建原生安装包

你可以使用 wix 或 NSIS 创建 windows 安装包。这里我们尽可能使用更小更灵活的 NSIS，它很适合网络应用。使用 NSIS 可以创建支持应用安装时需要的任何事情的安装包。

在 resources/windows/installer.nsis 中创建 NSIS 脚本

!include LogicLib.nsh

    !include nsDialogs.nsh

    ; --------------------------------

    ; Variables

    ; --------------------------------

    !define dest "{{dest}}"

    !define src "{{src}}"

    !define name "{{name}}"

    !define productName "{{productName}}"

    !define version "{{version}}"

    !define icon "{{icon}}"

    !define banner "{{banner}}"

    !define exec "{{productName}}.exe"

    !define regkey "Software\${productName}"

    !define uninstkey "Software\Microsoft\Windows\CurrentVersion\Uninstall\${productName}"

    !define uninstaller "uninstall.exe"

    ; --------------------------------

    ; Installation

    ; --------------------------------

    SetCompressor lzma

    Name "${productName}"

    Icon "${icon}"

    OutFile "${dest}"

    InstallDir "$PROGRAMFILES\${productName}"

    InstallDirRegKey HKLM "${regkey}" ""

    CRCCheck on

    SilentInstall normal

    XPStyle on

    ShowInstDetails nevershow

    AutoCloseWindow false

    WindowIcon off

    Caption "${productName} Setup"

    ; Don't add sub-captions to title bar

    SubCaption 3 " "

    SubCaption 4 " "

    Page custom welcome

    Page instfiles

    Var Image

    Var ImageHandle

    Function .onInit

        ; Extract banner image for welcome page

        InitPluginsDir

        ReserveFile "${banner}"

        File /oname=$PLUGINSDIR\banner.bmp "${banner}"

    FunctionEnd

    ; Custom welcome page

    Function welcome

        nsDialogs::Create 1018

        ${NSD_CreateLabel} 185 1u 210 100% "Welcome to ${productName} version ${version} installer.$\r$\n$\r$\nClick install to begin."

        ${NSD_CreateBitmap} 0 0 170 210 ""

        Pop $Image

        ${NSD_SetImage} $Image $PLUGINSDIR\banner.bmp $ImageHandle

        nsDialogs::Show

        ${NSD_FreeImage} $ImageHandle

    FunctionEnd

    ; Installation declarations

    Section "Install"

        WriteRegStr HKLM "${regkey}" "Install_Dir" "$INSTDIR"

        WriteRegStr HKLM "${uninstkey}" "DisplayName" "${productName}"

        WriteRegStr HKLM "${uninstkey}" "DisplayIcon" '"$INSTDIR\icon.ico"'

        WriteRegStr HKLM "${uninstkey}" "UninstallString" '"$INSTDIR\${uninstaller}"'

        ; Remove all application files copied by previous installation

        RMDir /r "$INSTDIR"

        SetOutPath $INSTDIR

        ; Include all files from /build directory

        File /r "${src}\*"

        ; Create start menu shortcut

        CreateShortCut "$SMPROGRAMS\${productName}.lnk" "$INSTDIR\${exec}" "" "$INSTDIR\icon.ico"

        WriteUninstaller "${uninstaller}"

    SectionEnd

    ; --------------------------------

    ; Uninstaller

    ; --------------------------------

    ShowUninstDetails nevershow

    UninstallCaption "Uninstall ${productName}"

    UninstallText "Don't like ${productName} anymore? Hit uninstall button."

    UninstallIcon "${icon}"

    UninstPage custom un.confirm un.confirmOnLeave

    UninstPage instfiles

    Var RemoveAppDataCheckbox

    Var RemoveAppDataCheckbox_State

    ; Custom uninstall confirm page

    Function un.confirm

        nsDialogs::Create 1018

        ${NSD_CreateLabel} 1u 1u 100% 24u "If you really want to remove ${productName} from your computer press uninstall button."

        ${NSD_CreateCheckbox} 1u 35u 100% 10u "Remove also my ${productName} personal data"

        Pop $RemoveAppDataCheckbox

        nsDialogs::Show

    FunctionEnd

    Function un.confirmOnLeave

        ; Save checkbox state on page leave

        ${NSD_GetState} $RemoveAppDataCheckbox $RemoveAppDataCheckbox_State

    FunctionEnd

    ; Uninstall declarations

    Section "Uninstall"

        DeleteRegKey HKLM "${uninstkey}"

        DeleteRegKey HKLM "${regkey}"

        Delete "$SMPROGRAMS\${productName}.lnk"

        ; Remove whole directory from Program Files

        RMDir /r "$INSTDIR"

        ; Remove also appData directory generated by your app if user checked this option

        ${If} $RemoveAppDataCheckbox_State == ${BST_CHECKED}

            RMDir /r "$LOCALAPPDATA\${name}"

        ${EndIf}

    SectionEnd

在build.windows.js文件中创建一个叫做createInstaller的函数，如下所示：

function createInstaller() {

    var deferred = Q.defer();

    function replace(str, patterns) {

        Object.keys(patterns).forEach(function (pattern) {

            console.log(pattern)

              var matcher = new RegExp('{{' + pattern + '}}', 'g');

            str = str.replace(matcher, patterns[pattern]);

        });

        return str;

    }

    var installScript = projectDir.read('resources/windows/installer.nsi');

    installScript = replace(installScript, {

        name: manifest.name,

        productName: manifest.name,

        version: manifest.version,

        src: buildDir.path(),

        dest: projectDir.path(),

        icon: buildDir.path('icon.ico'),

        setupIcon: buildDir.path('icon.ico'),

        banner: projectDir.path('resources/windows/banner.bmp'),

    });

    buildDir.write('installer.nsi', installScript);

    var nsis = childProcess.spawn('makensis', [buildDir.path('installer.nsi')], {

        stdio: 'inherit'

    });

    nsis.on('error', function (err) {

        if (err.message === 'spawn makensis ENOENT') {

            throw "Can't find NSIS. Are you sure you've installed it and"

            + " added to PATH environment variable?";

        } else {

            throw err;

        }

    });

    nsis.on('close', function () {

        deferred.resolve();

    });

    return deferred.promise;

}

你应该安装了 NSIS，并且确保它在你的路径中是可用的。creaeInstaller函数会读取安装包脚本并且依照 NSIS 运行时使用makensis命令来执行。

将他们组合到一起

创建一个函数把所有的片段放在一起，为了使 gulp 任务可以获取到然后输出它：

function build() {

    return init()

            .then(copyElectron)

            .then(cleanupRuntime)

            .then(createAsar)

            .then(updateResources)

            .then(rename)

            .then(createInstaller);

}

module.exports = { build: build };

接着，在gulpfile.js中创建 gulp 任务来执行这个构建脚本：

var release_windows = require('./build.windows');

var os = require('os');

gulp.task('build-electron', ['build'], function () {

    switch (os.platform()) {

        case 'darwin':

        // 执行 build.osx.js

        break;

        case 'linux':

        //执行 build.linux.js

        break;

        case 'win32':

        return release_windows.build();

    }

});

运行下面命令，你应该就会得到最终的产品：

gulp build-electron

你最终的 electron 应用应该在dist目录中，并且目录结构应该和下面是相似的：

AngularJS 和 Electron 构建桌面应用

总结

Electron 不仅仅是一个支持打包 web 应用成为桌面应用的原生 web view。它现在包含 app 的自动升级、Windows 安装包、崩溃报告、通知和一些其它有用的原生 app 功能——所有的这些都通过 JavaScript API 调用。

到目前为止，很大范围的应用使用 electron 创建，包括聊天应用、数据库管理器、地图设计器、协作设计工具和手机原型等。

下面是 Github Electron 的一些有用的资源：

官方网站 – http://electron.atom.io/
官方文档 – https://github.com/atom/electron/tree/master/docs
Awesome Electron – https://github.com/sindresorhus/awesome-electron
Electron 应用样板 – https://github.com/szwacz/electron-boilerplate
使用 ReactJs 的 Electron 样板 – https://github.com/airtoxin/Electron-React-Boilerplate
https://github.com/chentsulin/electron-react-boilerplate

AngularJS 和 Electron 构建桌面应用的更多相关文章

使用 AngularJS 和 Electron 构建桌面应用
GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而 ...
使用 Electron 构建桌面应用（拖动控制篇）
使用 Electron 构建桌面应用(拖动控制篇) 当窗口被定义了大小,我们也就是在自定义这个窗口,使得它不可拉伸没有框架,让它看起来就像一个真正的声效器浮在桌面上. 现在问题来了 – 要如何移动或者 ...
electron --- 构建桌面应用
最近无意间看到了electron和nw的相关信息,感到很惊讶,因为学习前端也有一段时间了,竟然发现js还有这么强大的功能,因为js不仅可以写网页.写webapp.写hybrid,以及前不久出现的小程序 ...
使用electron构建跨平台Node&period;js桌面应用
最近,把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件,使用的是electron,这里简单分享一下使用electron的一些经验和心得. 一.如何使用electron把 ...
使用electron构建跨平台Node&period;js桌面应用经验分享
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6154 本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随 ...
electron自定义桌面应用的外观
1. 控制应用视窗大小构建桌面应用时,我们要考虑我们的应用程序需要如何让用户来使用,那么我们需要提供一个视窗,那么该视窗可以最大化展示,也可以最小化展示,当然我们也希望可以全屏运行. 在electr ...
使用Electron开发桌面应用
Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...
Electron构建一个文件浏览器应用(二)
在前一篇文章我们已经学习到了使用Electron来构建我们的文件浏览器了基础东西了,我们之前已经完成了界面功能和显示文件或文件夹的功能了,想看之前文章,请点击这个链接 .现在我们需要在之前的基础上来 ...
使用 AngularJS 从零构建大型应用
0.导言 1.准备工作 2.构建框架 3.丰富你的directives 4.公用的services 5.用controllers组织业务导言纵览线上各种AngularJS教程,大部分都是基础与一些 ...

随机推荐

DDD 领域驱动设计－&OpenCurlyDoubleQuote;臆想”中的实体和值对象
其他博文: DDD 领域驱动设计-三个问题思考实体和值对象 DDD 领域驱动设计-三个问题思考实体和值对象(续) 以下内容属于博主"臆想",如有不当,请别当真. 扯淡开始: 诺兰的 ...
Linux 中 Weblogic 启动和关闭
a.start weblogic1)找到 /Oracle/Middleware/user_projects/domains/ 用户_domain目录. nohup ./startWebLogic.sh ...
object实现小老鼠交互
直接使用 <p style="text-align: center; "> <object type="application/x-shockwave- ...
实现Activity刷新（转）
目前刷新Acitivity,只想到几种方法.仅供参考,如果您有更好的方法,请赐教. 程序界面: 点击refresh view可以刷新界面,点击write content可以在EditText中自动写入 ...
[转]Ubuntu中root用户和user用户的相互切换
[转]Ubuntu中root用户和user用户的相互切换 http://www.cnblogs.com/weiweiqiao99/archive/2010/11/10/1873761.html Ubu ...
Redis学习-String
命令描述复杂的返回值 SET key value [EX seconds] [PX milliseconds] [NX|XX] 将字符串值value关联到key.如果key已经持有其他值, ...
Java 核心内容相关面试题【2】
第一,谈谈final, finally, finalize的区别. final?修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 ...
webservice：com&period;sun&period;xml&period;internal&period;ws&period;server&period;ServerRtException&colon; [failed to localize]
发布webservice发生了错误,一直没有能够解决,错误如下: Exception in thread "main" com.sun.xml.internal.ws.server ...
算法之经典排序-冒泡排序(bubble sort)
冒泡排序它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成. 这个算法的名字由来是因为越大的元 ...
sort&lowbar;region——对区域进行排序
The operator sort_region sorts the regions with respect to their relative position. All sorting meth ...