原址: https://zhuanlan.zhihu.com/p/30853705

原文: 中文代码示例教程之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)的部分对中文命名的支持非常有限.

中文代码示例之Angular入门教程尝试的更多相关文章

  1. 2017-11-07 中文代码示例之Angular入门教程尝试

    "中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...

  2. 中文代码示例之Vuejs入门教程(一)

    原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...

  3. 2017-11-09 中文代码示例之Vuejs入门教程(一)

    "中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示都在本地测试通过, 源码在这里. 下面 ...

  4. 2017-11-20 中文代码示例之Vuejs入门教程(一)问题后续

    "中文编程"知乎专栏原文 第一个issue: Error compiling template if using unicode naming as v-for alias · I ...

  5. 2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构

    知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...

  6. 2018-06-20 中文代码示例视频演示Python入门教程第四章 控制流

    知乎原链 续前作: 中文代码示例视频演示Python入门教程第三章 简介Python 对应在线文档: 4. More Control Flow Tools 录制中出了不少岔子. 另外, 输入法确实是一 ...

  7. 2018-06-20 中文代码示例视频演示Python入门教程第三章 简介Python

    知乎原链 Python 3.6.5官方入门教程中示例代码汉化后演示 对应在线文档: 3. An Informal Introduction to Python 不知如何合集, 请指教. 中文代码示例P ...

  8. 2018-11-16 中文代码示例之Programming in Scala笔记第四五六章

    续前文: 中文代码示例之Programming in Scala学习笔记第二三章. 同样仅节选有意思的例程部分作演示之用. 源文档仍在: program-in-chinese/Programming_ ...

  9. 中文代码示例之NW.js桌面应用开发初体验

    先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...

随机推荐

  1. 移动GIS在企业各个行业中的应用解决方案

    “移动GIS的设备厂商越来越多地关注行业用户的需求,所以移动GIS的市场前景是非常广阔的.当前国内移动GIS,已广泛应用于测绘.国土.环境.水利.农业.林业和矿产等传统资源管理领域和城市规划方面.在应 ...

  2. nanomsg 如何写数据到PipelineDB

    nanomsg:https://github.com/nanomsg/nanomsg PipelineDB:https://github.com/pipelinedb/pipelinedb nanom ...

  3. iOS生成Bundle包及使用

    什么是Bundle文件? 简单理解,就是资源文件包.我们将许多图片.XIB.文本文件组织在一起,打包成一个Bundle文件.方便在其他项目中引用包内的资源. Bundle文件的特点? Bundle是静 ...

  4. vs2015 制作安装包额外需要安装的软件VSI_bundle

    vs2015 制作安装包额外需要安装的软件VSI_bundle 下载地址:http://files.cnblogs.com/files/sdner/VSI_bundle.rar

  5. node.js之第一天

    一.http模块 //require表示引包,引包就是引用自己的一个特殊功能 var http = require("http"); //创建服务器,参数是一个回调函数,表示如果有 ...

  6. Jarvis OJ - [XMAN]level1 - Writeup——简单shellcode利用

    100分的pwn 简单查看一下,果然还是比较简单的 放到ida中查看一下,有明显的溢出函数,并且在函数中打印出了字符串的地址,并且字符串比较长,没有NX保护 所以我们很容易想到构造shellcode, ...

  7. Spring Cloud 自定义ConfigServer

    公司需要将系统配置信息中的敏感信息独立存放. 现有系统采用Spring Cloud Config提供配置信息,其中敏感信息主要是Db配置,分解本次需求: (1)数据库配置信息分离(主要是Db信息). ...

  8. 机房收费系统——转换list泛型时,字段名称不正确应出现故障

    因为之前对泛型研究了一番,所以就開始尝试着在机房收费系统重构中增加了泛型的使用. 可是到了做学生查看剩余金额这个功能的时候,还是依照之前的方法做的,可是在载入数据的时候班级这个框就没有显示出来--然后 ...

  9. 赵雅智:service与訪问者之间进行通信,数据交换

    服务类 中间人:service服务中的bind对象 创建中间人并通过onBinder方法的return暴露出去 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  10. java使用线程请求訪问每次间隔10分钟连续5次,之后停止请求

    java使用线程请求訪问每次间隔10分钟连续5次,收到对应的时候停止请求 package com.qlwb.business.util; /** * * * @类编号: * @类名称:RequestT ...