中文代码示例之Angular入门教程尝试
原址: https://zhuanlan.zhihu.com/p/30853705
为了检验中文命名在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)的部分对中文命名的支持非常有限.
中文代码示例之Angular入门教程尝试的更多相关文章
- 2017-11-07 中文代码示例之Angular入门教程尝试
"中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...
- 中文代码示例之Vuejs入门教程(一)
原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...
- 2017-11-09 中文代码示例之Vuejs入门教程(一)
"中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示都在本地测试通过, 源码在这里. 下面 ...
- 2017-11-20 中文代码示例之Vuejs入门教程(一)问题后续
"中文编程"知乎专栏原文 第一个issue: Error compiling template if using unicode naming as v-for alias · I ...
- 2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构
知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...
- 2018-06-20 中文代码示例视频演示Python入门教程第四章 控制流
知乎原链 续前作: 中文代码示例视频演示Python入门教程第三章 简介Python 对应在线文档: 4. More Control Flow Tools 录制中出了不少岔子. 另外, 输入法确实是一 ...
- 2018-06-20 中文代码示例视频演示Python入门教程第三章 简介Python
知乎原链 Python 3.6.5官方入门教程中示例代码汉化后演示 对应在线文档: 3. An Informal Introduction to Python 不知如何合集, 请指教. 中文代码示例P ...
- 2018-11-16 中文代码示例之Programming in Scala笔记第四五六章
续前文: 中文代码示例之Programming in Scala学习笔记第二三章. 同样仅节选有意思的例程部分作演示之用. 源文档仍在: program-in-chinese/Programming_ ...
- 中文代码示例之NW.js桌面应用开发初体验
先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...
随机推荐
- ES6模块化
关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...
- js比较日期大小
第一种方法: var starttime = "2007-1-2 7:30"; var endtime = "2007-2-31 8:30"; alert(Co ...
- Secret 的使用场景 - 每天5分钟玩转 Docker 容器技术(109)
我们可以用 secret 管理任何敏感数据.这些敏感数据是容器在运行时需要的,同时我们不又想将这些数据保存到镜像中. secret 可用于管理: 用户名和密码. TLS 证书. SSH 秘钥. 其他小 ...
- Vue深度学习(2)
Text 可以在表单的input 元素上使用v-model 指令来创建双向数据绑定.它会根据input元素的类型自动选取正确的绑定模式. <div id="app"> ...
- OS X Yosemite升级提示升级OS10.11或更高版本问题解决方法
如图,楼主的pro久未升级,版本号已经很低.某天一时兴起,想体验最新版本的OS X.就很开心的进行软件更新: 依据iOS上的APP.系统升级经验,这是一个非常自然.毫无难度的过程,哪知道,今天一直卡在 ...
- mysql千万级数据表,创建表及字段扩展的几条建议
一:概述 当我们设计一个系统时,需要考虑到系统的运行一段时间后,表里数据量大约有多少,如果在初期,就能估算到某几张表数据量非常庞大时(比如聊天消息表),就要把表创建好,这篇文章从创建表,增加数据,以及 ...
- Redis持久化方式
Snapsotting(快照)方式 snapsotting是默认方式,(把数据做一个备份,将数据存储在文件) 这种方式将内存中数据照快照方式写到二进制文件中.默认的文件名为"dump.rdb ...
- seleniumPO模式
一.框架目录结构 二.代码 2.1page层代码 package com.mianshui.page; import org.openqa.selenium.WebElement; import or ...
- 【JS】数据类型
其他类型转化为boolean类型规则: number:非0为true,0和NaN为false: String:非空为true,空为false: Object:任何对象都为true 任何变量赋值为nul ...
- 迷宫问题 Maze 4X4 (sloved by backtrack)
Description 给定一个N*N的迷宫中,(0,0)为起始点,(N-1,N-1)为目的地,求可通往目的地的多个解 思路 这道题其实就是简单的DFS,一路探索到底,没路就回溯到交叉口. #incl ...