使用Angular与TypeScript构建Electron应用(二)
接前文,现在我们搭建好了一系列的环境,创建了一些初始的代码,是时候开始工作了。
Angular创建前端页面
1,创建组件与路由首先在 其次我们在 import {NgModule} from '@angular/core' import {Routes,RouterModule} from '@angular/router' import {LoginComponent} from './login/login.component' import {MainComponent} from './main/main.component' export const appRoutes: Routes = [ {path: '',component: LoginComponent},{path: 'login',{path: 'main',component: MainComponent} ] @NgModule({ imports: [RouterModule.forRoot(appRoutes)],exports: [RouterModule] }) export class AppRoutingModule { } ok,这很简单,和我们熟悉的Angular1.x或react-route也没有太大区别。但是要让路由运行起来还要做两件事,第一是将路由在app.module.ts中注册,在module上挂载文件,Angular在编译时才会将文件引入进来,第二是在app.component.html中增加路由插座。 #### 2,创建样式与逻辑 现在,我们为前端页面添加一些样式与逻辑,这此的commit记录在这里,现在我们需要为登录界面添加逻辑与路由保护。
登录可以提交用户名与密码用作验证,这时候可以借助Angular的模板语法来快速的完成它们: <div class="input-box"> <input type="text" #username> </div> <div class="input-box"> <input type="text" #password> </div> <button (click)="login(username.value,password.value)">登录</button> 我们希望所有严格的逻辑或涉及数据库的问题都放在主进程解决,那么确认登录需要与electron主进程进行交互,以便于主进程来切换窗口。当然,在实际业务中你可以选择把服务器的交互放在Angular中来做,也可以在electron发起一个request。现在我们按下面几步来操作:
import {Injectable} from '@angular/core declare let electron:any; @Injectable() export class IpcRendererService { constructor (){} private ipcRenderer = electron.ipcRenderer on (message: string,done){ return this.ipcRenderer.on(message,done); } send (message: string,...args){ this.ipcRenderer.send(message,args); } api (action: string,...args) { this.ipcRenderer.send('api',action,...args); return new Promise((resolve,reject) => { this.ipcRenderer.once(`${action}reply`,(e,reply,status) =>{ if (!reply){ return reject(status) } return resolve(reply) }) }) } dialog (action: string,...args) { this.ipcRenderer.send('dialog',...args); } sendSync (message: string,...args){ return this.ipcRenderer.sendSync(message,arguments); } }
#### 3,监听与反馈 这时,api的第一个参数被约定为action,用于描述这个API事件的用途,每一个API事件都会发起一次 这里有一些复杂,如果你希望对照当时的代码来学习,可以看这一次的commit。 ok,大家也可以想象的到,现在要做的是在electron中新建一个事件接收器,处理一些逻辑并且将它们返回,在根文件夹下新建 const {ipcMain} = require('electron') const api = require('./api') ipcMain.on('api',(event,actionName,...args) =>{ const reply = (replayObj,status = 'success') =>{ event.sender.send(`${actionName}reply`,replayObj,status); } if (api[actionName]){ api[actionName](Object.assign({reply: reply},event),...args) } }) 假设现在有一个 module.exports = { login: (e,user) =>{ // todo something e.reply({msg: 'ok'}) } } 怎么样?现在看起来一切都完成了!每次当我们在loginService中调用 最关键的是我们也能用轻而易举的方式来得到想要的数据,回复数据也足够简单, 这一小节文章有些琐碎和复杂,登录成功与跳转等等逻辑不妨放在下一节中再讲。大家可以尝试阅读github的源码,考虑它有哪些问题是值得优化的。在后面几节中,我们再来讨论如何优化这些逻辑。 注:原文首次载于维特博客。需要演示项目请看这里 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |