中文代码示例之Angular入门教程尝试
2018-01-05 00:00
417 查看
原址: https://zhuanlan.zhihu.com/p/30853705
原文: 中文代码示例教程之Angular尝试
为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. 以下源码库在此.
报错:
但是报错:
已向Angular项目提交bug report: Avoid creating component with unicode naming, instead of throwing error after finishing creation.
后经指出, 上面的错误并不是由中文命名导致. 但由于HTML tag不支持中文(vuejs中也有类似问题), 需要将
改为:
在”app.component.html”中添加:
显示正常. 鉴于Angular在创建Component时自动生成selector代码, 之前的bug report仍然成立, 可以认为Angular本身不支持Component使用中文命名, 但自己修改selector后似乎仍然可用(以观后效).
添加
原文: 中文代码示例教程之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)的部分对中文命名的支持非常有限.相关文章推荐
- 中文代码示例之Vuejs入门教程(一)
- Silverlight入门教程(基于Asp.net运行环境示例)[示例代码下载]
- tensorflow新手必看,tensorflow入门教程,tensorflow示例代码
- p5.js入门教程之小球动画示例代码
- Google出品的机器学习入门视频的中文字幕翻译与示例代码
- 【第11篇】最全的中文TypeScript入门指南详解案例教程与代码
- 示例程序代码Tictactoe@GTK+ 2.0 中文教程连载
- 示例程序代码GtkDial@GTK+ 2.0 中文教程连载
- 示例程序代码Scribble@GTK+ 2.0 中文教程连载
- Enterprise Architect 7.0入门教程(目前最详细的中文教程)
- Expression Blend实例中文教程(9) - 行为快速入门Behaviors
- 输入数字jQuery 入门教程(40): jQuery UI Spiner 示例
- Oracle Coherence中文教程一:入门
- Angular2+国际化方案(ngx-translate)的示例代码
- ffmpeg入门系列教程(新API)示例 01
- Mybatis 入门示例代码之 Association
- Angular2.0/4.0 使用Echarts图表的示例代码
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- PHP基础教程(php入门基础教程)一些code代码
- springmvc+spring jdbc+velocity入门教程及其代码实例