2017-11-07 中文代码示例之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-07 中文代码示例之Angular入门教程尝试的更多相关文章
- 中文代码示例之Angular入门教程尝试
原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之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-11-27 中文代码示例之Programming in Scala笔记第七八章
续前文: 中文代码示例之Programming in Scala学习笔记第二三章 中文代码示例之Programming in Scala笔记第四五六章. 同样仅节选有意思的例程部分作演示之用. 源文档 ...
- 2018-12-09 疑似bug_中文代码示例之Programming in Scala笔记第九十章
续前文: 中文代码示例之Programming in Scala笔记第七八章 源文档库: program-in-chinese/Programming_in_Scala_study_notes_zh ...
- 2018-11-16 中文代码示例之Programming in Scala笔记第四五六章
续前文: 中文代码示例之Programming in Scala学习笔记第二三章. 同样仅节选有意思的例程部分作演示之用. 源文档仍在: program-in-chinese/Programming_ ...
- 中文代码示例之NW.js桌面应用开发初体验
先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...
- 2018-08-11 中文代码示例之Spring Boot 2.0.3问好
上次试用Spring Boot还是两年前: 中文代码示例之Spring Boot 1.3.3演示. 打算用在一个讨论组内小项目上, 于是从官网Building an Application with ...
随机推荐
- Metasploit Framework(2)Exploit模块、Payload使用
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Exploit模块分为主动和被动(Active.Pas ...
- SpringMVC框架一:搭建测试
这里做一个Demo:展示商品列表 新建Dynamic Web Project: 导入jar包,放在lib下: 放入Lib文件夹之后,会自动build path 接下来配置web.xml: <?x ...
- 一份从0到1的java项目实践清单
虽说工作就是简单的事情重复做,但不是所有简单的事你都能有机会做的. 我们平日工作里,大部分时候都是在做修修补补的工作,而这也是非常重要的.做好修补工作,做好优化工作,足够让你升职加薪! 但是如果有机会 ...
- vue中复选框全选与反选
html主要部分: <template v-for="(item, index) in checkboxList"> <input type="chec ...
- pyengine介绍及使用
一个可以通过HTTP请求动态执行Python 代码的HTTP服务器,还自带一个装饰器来执行时间较长的任务. 使用方法 1 pip install pyengine 2 pyengine run -d ...
- 【ABP杂烩】Extensions后缀扩展方法
1.Extensions介绍 扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用 ...
- 【java提高】---HashSet 与TreeSet和LinkedHashSet的区别
HashSet 与TreeSet和LinkedHashSet的区别 今天项目开发,需要通过两个条件去查询数据库数据,同时只要满足一个条件就可以取出这个对象.所以通过取出的数据肯定会有重复,所以要去掉重 ...
- mybatis框架(4)---输入输出映射
输入输出映射 通过parameterType制定输入参数类型 类型可以是简单类型(int String)也可以是POJO本身 或者包装类 1输入映射 关于输入简单类型和pojo本身的我就不写了,因为比 ...
- Long类型时间如何转换成视频时长?
数据库中存放的视频时长是一个Long类型的毫秒/秒时间,现在需要把这个时间转换成标准的视频时长格式,在我看来这应该是一个很常用的转化有一个很常用的转换方法工具才对,可是我百度找了许久,没有一个简单直观 ...
- yum源配置
我这里使用的centos7操作系统. 下载地址是:https://www.centos.org/download/ yum仓库的创建可以参考: http://www.cnblogs.com/zhaoj ...