中文编程
首发于中文编程

中文代码示例之Angular入门教程尝试

原文: 中文代码示例教程之Angular尝试


为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. 以下源码库在.

创建项目

不支持中文命名:

$ ng new 英雄榜
Project name "英雄榜" is not valid. New project names must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.
英雄榜
^

文本绑定

不支持中文命名变量

app.component.ts:

export class AppComponent {
题目 = '示例';
}

app.component.html:

<h1>{{题目}}</h1>

报错:

compiler.js:466 Uncaught Error: Template parse errors:
Parser Error: Unexpected token Lexer Error: Unexpected character [题] at column 1 in expression [题目] at column 2 in [{{题目}}] in ng:///AppModule/AppComponent.html@0:4 ("<h1>[ERROR ->]{{题目}}</h1>"): ng:///AppModule/AppComponent.html@0:4
Parser Error: Lexer Error: Unexpected character [题] at column 1 in expression [题目] at column 2 in [{{题目}}] in ng:///AppModule/AppComponent.html@0:4 ("<h1>[ERROR ->]{{题目}}</h1>"): ng:///AppModule/AppComponent.html@0:4
Parser Error: Lexer Error: Unexpected character [目] at column 2 in expression [题目] at column 3 in [{{题目}}] in ng:///AppModule/AppComponent.html@0:4 ("<h1>[ERROR ->]{{题目}}</h1>"): ng:///AppModule/AppComponent.html@0:4

创建component

创建新component, 貌似支持中文:

$ ng generate component 英雄
create src/app/英雄/英雄.component.css (0 bytes)
create src/app/英雄/英雄.component.html (25 bytes)
create src/app/英雄/英雄.component.spec.ts (628 bytes)
create src/app/英雄/英雄.component.ts (310 bytes)
update src/app/app.module.ts (398 bytes)

但是报错:

英雄.component.ts:7 Uncaught ReferenceError: ViewEncapsulation is not defined
at eval (英雄.component.ts:7)
at eval (英雄.component.ts:18)
at Object.../../../../../src/app/英雄/英雄.component.ts (main.bundle.js:58)
at __webpack_require__ (inline.bundle.js:55)
at eval (app.module.ts:5)
at Object.../../../../../src/app/app.module.ts (main.bundle.js:36)
at __webpack_require__ (inline.bundle.js:55)
at eval (main.ts:4)
at Object.../../../../../src/main.ts (main.bundle.js:74)
at __webpack_require__ (inline.bundle.js:55)

已向Angular项目提交bug report: Avoid creating component with unicode naming, instead of throwing error after finishing creation.

后经指出, 上面的错误并不是由中文命名导致. 但由于HTML tag不支持中文(vuejs中也有类似问题), 需要将英雄.component.ts中:

selector: 'app-英雄',

改为:

selector: 'app-heroes',

在”app.component.html”中添加:

<app-heroes></app-heroes>

显示正常. 鉴于Angular在创建Component时自动生成selector代码, 之前的bug report仍然成立, 可以认为Angular本身不支持Component使用中文命名, 但自己修改selector后似乎仍然可用(以观后效).

添加类型

支持中文命名!

添加src/app/英雄.ts:

export class 英雄 {
id: number;
name: string;
}

英雄.component.ts中:

hero: 英雄 = {
id: 1,
name: '小明'
};

显示列表

由于中不能用中文命名, 因此<li *ngFor="let hero of heroes">中的hero不能用中文命名, 而heroes如果改为英雄们, 会报错:

Parser Error: Lexer Error: Unexpected character [们] at column 15 in expression [let hero of 英雄们] at column 16 in [let hero of 英雄们] in ng:///AppModule/__Component.html@2:6 ("
<ul class="heroes">
<li *ngFor="let hero of 英雄们">
<span class="badge"></span>[ERROR ->]
</li>
</ul>"): ng:///AppModule/__Component.html@3:42

小结

限于时间, 评测只能暂告一段落. 在尝试的很小一部分功能中, 比较纯粹的TypeScript部分允许中文命名, 但牵涉到模板(Template)的部分对中文命名的支持非常有限.

编辑于 2017-11-10

文章被以下专栏收录

    在所有编程语言和领域中尝试编写中文代码,开发相关工具,总结经验,一致代码风格。包括中文命名,汉化现有语言,创造中文语法的编程语言等等。作为最熟悉的母语,用来编写代码会让代码更容易被自己和母语相同的其他开发者理解。基于英文的编程语言和框架中,使用中文命名有时有技术问题。希望这里为后人趟雷,填坑。多数现有API是英文的,这里也会对其中一些常用的进行汉化。当然,这里也会对基于中文的编程语言进行探讨。包括汉化基于英文的编程语言,以及创造新的编程语言。