文档章节

极简的Angular2示例, Electron环境运行

chai2010
 chai2010
发布于 2017/07/05 15:11
字数 1274
阅读 1118
收藏 14

Angular2本身提供了cli命令行工具, 可以生成完整的工程.

但是命令行生成的工程太过复杂, 对于新学习Angular的用户会有太多的干扰.

我们尝试完全脱离cli工具, 只是通过TypeScript提供的tsc命令, 纯手工构造一个极简的Angular2示例.

完整代码: http://git.oschina.net/chai2010/hello-ng2

配置淘宝的镜像

通过以下命令安装:

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后用 cnpm 代替 npm 命令.

HTML启动页面

首先构造一个 hello-ng2 目录, 用于存放工程文件.

在目录下创建 demo.html 页面, 内容如下:

<!DOCTYPE html>

<head>
	<title>Angular2应用</title>
</head>

<body>
	<my-app>加载UI组件</my-app>
	<script>require('./demo').main()</script>
</body>

我们采用的是HTML5语法, 完全省略了最外层没有任何意义的<html></html>标签.

其中包含了一个我们自定义的<my-app>标签, 对应我们要创建的 Angular 窗口组件.

然后通过require加载当前目录下的demo模块(对应demo.js文件), 然后运行其中的main函数启动Angular程序.

Angular组件

Angular严重依赖ES7中的注解语法, 如果要在JS中使用该特性, 将需要一个转码工具将ES7注解语法转为ES2015或更早的格式, 因为只有这样才能在浏览器中正常运行.

虽然JS社区中已经存在了很多类似的转码工具(我本人将这个看作是一个编译过程, 和将C/C++代码转为exe类似), 但是依赖太多.

既然必需要引入一个转码工具, 强烈推荐使用TypeScript语言提供的tsc工具. 因为TypeScript语言本身是Angular官方采用的语言, 同时也提供了注解等特性, 而且其提供的tsc工具没有任何外部依赖(失控的依赖绝对是一个灾难).

创建 demo.ts 文件, 并针对<my-app>标签创建一个 Angular 窗口组件:

import * as ngCore from '@angular/core'

@ngCore.Component({
	selector: 'my-app',
	template: `
		<h1>你好, {{name}}! - V1</h1>
	`,
	styles: [
		`h1 {
			color: #369;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 250%;
		}`,
	],
})
export class MainComponent {
	name = '世界'
}

Angular模块

为了使用该窗口部件, 我们需要将其组织到一个 Angular 模块中:

import * as ngPlatformBrowser from '@angular/platform-browser'

@ngCore.NgModule({
	imports: [ ngPlatformBrowser.BrowserModule ],
	declarations: [ MainComponent ],
	bootstrap: [ MainComponent ],
})
export class MainModule {
	//
}

同样, 我们通过 @ngCore.NgModule 注解将 Angular 的运行时模块和 MainModule 类进行了关联.

在模块中, 我们导入了 ngPlatformBrowser.BrowserModule 浏览器模块.

同时, declarations 部分声明了我们自己创建的Angular组件.

最后, bootstrap 部分将 MainComponent 指定为该模块的引导组件.

需要说明的是, NgModule 修饰的模块是一种运行时模块, 同时用于其中各种组件名字空间的管理.

启动Angular模块

一个应用中可以有多个Angular 模块, 同样要指定一个引导模块, 通过以下代码完成:

import * as ngPlatformBrowserDynamic from '@angular/platform-browser-dynamic'

export function main() {
	ngPlatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(MainModule)
}

到此, 一个极简的Angular2示例已经完成了. 但是还不能运行!

不能运行的原因主要有2个:

  • 浏览器环境不支持模块方式启动页面, 同样需要通过外部js库辅助.
  • Angular 依赖一些高级的特性, 很多浏览器环境并不支持, 需要通过外部js库模拟.

为了简化, 我们采用了Electron环境运行应用, 因为在Electron环境我们可以直接使用NodeJS中的模块. 对于第二点, 我们可以通过以下外部js库模拟缺少的特性:

import 'core-js/es6/reflect'
import 'core-js/es7/reflect'
import 'zone.js/dist/zone'

Electron环境

现在 Angular2 部分的代码已经完整. 我们还需要给 Electron 创建一个启动脚本.

新建一个 index.ts 文件, 用于启动Angular2程序:

import * as fs from 'fs'
import * as electron from 'electron'

let win: Electron.BrowserWindow = null

function createWindow() {
	win = new electron.BrowserWindow({width: 800, height: 600})
	win.loadURL(`file://${__dirname}/demo.html`)
	win.webContents.openDevTools()

	win.on('closed', () => { win = null })
}

function main() {
	electron.app.on('ready', () => {
		createWindow()
	})
	electron.app.on('activate', () => {
		createWindow()
	})
	electron.app.on('window-all-closed', () => {
		if(process.platform !== 'darwin') {
			electron.app.quit()
		}
	})
}

if(require.main === module) {
	main()
}

其中 BrowserWindow 对应一个 Electron 窗口, 创建窗口后通过 win.loadURL 加载了 demo.html 页面.

其他配置文件

为了运行应用, 我们还需要package.json和tsconfig.json文件, 分别对应NodeJS包和TypeScript的配置信息.

其中 package.json 文件千篇一律, 并没有什么特别之处. tsconfig.json文件则有一些需要定制的特性.

tsconfig.json 内容如下:

{
	"include": [
		"./**/*"
	],
	"exclude": [
		"node_modules",
		"**/*.spec.ts"
	],

	"compilerOptions": {
		"module": "commonjs",
		"moduleResolution": "node",
		"lib": ["dom", "es2016"],
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"suppressImplicitAnyIndexErrors":true,
		"noStrictGenericChecks": true,
		"noImplicitAny": false,
		"target": "es5"
	}
}

其中 include 表示用通配符选择文件, exclude 表示排除的文件, compilerOptions 对应编译选项.

在编译选项中, 我们需要指定依赖的dom和es2016库, experimentalDecorators表示注解功能也必须打开, emitDecoratorMetadata表示生成元信息也必须打开(元信息是反射特性所需要的).

其它的编译参数用于可以根据需要自行调整.

运行

克隆完整代码, 进入到对应目录的命令行, 然后安装依赖并运行:

cnpm install
node_modules\.bin\tsc
node_modules\.bin\electron .

运行效果图:

OK!


https://chai2010.cn/

© 著作权归作者所有

chai2010

chai2010

粉丝 426
博文 104
码字总数 82757
作品 10
武汉
程序员
私信 提问
加载中

评论(3)

施立
施立
有avlon.js好用吗
哎码
哎码
angular用了两年了,每次搭框架还是想狗带
sikele
sikele
ng2比ng1还不亲和,这个最简例子不错
NG-ZORRO 7.0.0-rc.1 发布,Ant Design 的 Angular 实现

NG-ZORRO 7.0.0-rc.1 发布了,NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Angular ...

局长
2018/12/15
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
大漠穷秋/NiceFish-ionic

NiceFish-ionic NiceFish是一个系列教学项目,都是Angular这个技术栈。 NiceFish:美人鱼,这是一个微型Blog系统,前端基于Angular 4.x + PrimeNG。http://git.oschina.net/mumu-osc/NiceFis...

大漠穷秋
2018/04/24
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
Angular 2: @Directive() 指令创建无限滚动

在最近的文章中,我使用 angular 2中新的"ng-repeat"也就是"NgFor"结合通用组件创建(自己的)组件。在这篇文章里,我将继续展示,结合 Angular 2进一步开发的 Echoes Player项目。这次为了更加动...

oschina
2016/02/09
9.6K
4

没有更多内容

加载失败,请刷新页面

加载更多

gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
21分钟前
2
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
7
0
安装fastdfs文件服务器步骤

1、安装libfastcommon wget https://github.com/happyfish100/libfastcommon/archive/master.zip 解压后安装 cd fastcommon-master ./make.sh ./make.sh install 2、安装 FastDFS,从sourcef......

lsjlgo
今天
3
0
MySQL 5.7 免安装版配置

下载地址:https://dev.mysql.com/downloads/mysql/ 安装步骤 1.下载zip解压到目录下 2.配置环境变量 新建系统变量:MYSQL_HOME,值:D:\DevelopmentTool\Mysql-5.7.26-winx64 修改path变量:...

华山猛男
今天
7
0
java map的遍历

//从大的角度可以分为两类Set<String> set=map.keySet();这里面还可以分为3类, 从set的角度来分 //Set<Map.Entry<String, String>> entery=map.entrySet(); public class Test { public sta......

南桥北木
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部