使用angular开发API文档
启动项目
安装Angular。
使用Angular CLI（命令行界面）工具来启动一个新的Angular项目。
先安装，然后使用它来启动新项目并跳到该文件夹中：
$ npm install -g @angular/cli
$ ng new ang-demo
$ cd ang-demo
开发项目
此时，文件夹只能运行一个Angular项目。我们有一些调整来确保应用程序使用Angular。
首先，与其他的
应用程序一样，必须创建一个main.js 文件，它可以让应用程序启动并运行一些默认设置。
在项目的根文件夹中，创建一个main.js：
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow () {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/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()
}
})
保存文件，然后编辑/src/index.html文件并更改：
<!-- CHANGE FROM: -->
<base href="/">
<!-- TO: -->
<base href="./">
以确保应用程序能够找到Angular文件。
编辑访问/package.json文件进行一些小调整，如下所示：
{
"main": "main.js",
"scripts": {
"electron": "ng build && electron .",
"electron-aot": "ng build --prod && electron .",
},
}
先添加一个名为main的新属性，指定启动文件为main.js文件。
添加一个新npm run命令，它首先使用Angular CLI为我们的Angular应用程序创建一个build，然后调用电子来启动应用程序。
electron-aot命令 为Angular 添加了--prod标志，它会生成了App的生产版本。这引入了许多增强功能，但构建该项目需要更长的时间。
注意：
当你准备为其他人使用创建应用程序构建时，请确保使用electron-aot。
启动项目
访问控制台并输入：
npm run electron
如果一切顺利，新的Angular应用程序就会加载成功。
API
通过一个名为ngx-electron的软件包，您可以快速轻松地获得API 。
从控制台安装：
$ npm install ngx-electron --save
添加到/src/app/app.module.ts中的imports数组中：
import { NgxElectronModule } from 'ngx-electron';
@NgModule({
...
imports: [
BrowserModule,
NgxElectronModule
],
...
})
export class AppModule { }
打开/src/app/app.component.ts并将以下内容添加到导入中：
import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';
然后，在组件类中，我们通过依赖注入来创建它的一个实例，这将使我们能够访问各种与API交互的方法：
export class AppComponent {
constructor(private _electronService: ElectronService) {} // DI
launchWindow() {
this._electronService.shell.openExternal('http://indeex.cc');
}
}
创建一个名为launchWindow（）的方法。点击按钮后，将启动一个带有Coursetro的浏览器窗口网站。这只是为了证明ngx-electron的已经可用。
它为您提供以下功能：
- desktopCapturer: 桌面捕捉API
- ipcRenderer: Electron.IpcRenderer
- remote: Electron.Remote – 通信功能
- webFrame: Electron.WebFrame – WebFrame
- clipboard: Electron.Clipboard – 剪贴板API
- crashReporter: Electron.CrashReporter
- process: NodeJS.Process – 进程对象
- screen: Electron.Screen – 屏幕API
- shell: Electron.Shell – Shell API
- nativeImage: Electron.NativeImage – NativeImage API
- isElectronApp: boolean – 表示应用是否在内部执行
打开/src/app/app.component.html 并将文件HTML替换为以下内容：
<div style="text-align:center">
<h1>
Welcome!
</h1>
<button (click)="launchWindow()">Launch a Window</button>
</div>
运行项目
在控制台中运行以下命令：
npm run electron
点击启动窗口按钮，它会加载网页，同时，还可以访问API。
这让新手也能轻松上手。
code enjoy! ٩(๑❛ᴗ❛๑)۶
作者：indeex
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。