非常教程

AngularJS参考手册

语言服务

语言服务

Angular 语言服务让你能在模板内获得自动完成、错误检查、给出提示和内部导航等功能,而不用管这些模板位于外部 HTML 文件中还是内嵌在注解/装饰器的字符串中。 Angular 语言服务会自动检测你要打开的文件(从你的 tsconfig.json 中读取),找出应用中所需的所有模板,然后为你打开的这些模板提供语言服务。

自动完成

自动完成可以在输入时为你提供当前情境下的候选内容和提示,从而提高开发速度。下面这个例子展示了插值表达式中的自动完成功能。当你进行输入的时候,就可以按 tab 键来自动完成。

语言服务

还有对元素的自动完成。你定义的任何组件的选择器都会显示在自动完成列表中。

错误检查

Angular 语言服务还能对代码中存在的错误进行预警。在这个例子中,Angular 不知道什么是 orders 或者它来自哪里。

语言服务

导航

导航可以让你在鼠标悬浮时看到某个组件、指令、模块等来自哪里,然后可以点击并按 F12 直接跳转到它的定义处。

语言服务

编辑器中的 Angular 语言服务

Angular 语言服务目前在Visual Studio Code和WebStorm中都是可用的。

Visual Studio Code 中

Visual Studio Code 可以从商店中安装语言服务,这个功能就在左侧菜单面板最底下的那个图标。 你也可以使用 VS 的快速打开(⌘+P)功能来查找这个扩展插件。打开它之后就输入下列命令:

content_copyext install Angular.ng-template

然后点击安装按钮来安装 Angular 语言服务。

WebStorm 中

在 WebStorm 中,你必须把语言服务安装为一个开发依赖。 当 Angular 看到这个开发依赖时,它就会在 WebStorm 中提供语言服务。除了 Angular 语言服务之外,WebStorm 还会为你提供模板中的代码高亮和自动完成功能。

下面这个开发依赖需要添加到 package.json 中:

content_copydevDependencies {
  "@angular/language-service": "^6.0.0"
}

然后,打开终端窗口,在项目根目录下使用 npmyarn 来安装这些 devDependencies

content_copynpm install

content_copyyarn

content_copyyarn install

Sublime Text 编辑器

在Sublime Text中,你首先需要一个扩展来支持 TypeScript。 把最新版本的 TypeScript 安装到本地的 node_modules 目录下:

content_copynpm install --save-dev typescript

然后把 Angular 语言服务安装到同一位置:

content_copynpm install --save-dev @angular/language-service

从 TypeScript 2.3 开始,TypeScript 提供了一种插件模式的语言服务可以用。

接下来,在你的用户首选项中(按 Cmd+,Ctrl+,)添加:

content_copy"typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"

安装到项目中

你还可以使用下列 npm 命令来把 Angular 语言服务安装到项目中:

content_copynpm install --save-dev @angular/language-service

另外,还要在项目的 tsconfig.json 中添加下列 "compilerOptions" 区域:

content_copy"plugins": [
    {"name": "@angular/language-service"}
]

注意,这只是提供了 .ts 文件中的诊断与自动完成。你需要一个自定义的 sublime 插件(或修改现有插件)来在 HTML 文件中提供自动完成功能。

语言服务的工作原理

当使用带有语言服务的编辑器时,就会有一个编辑器进程,它会启动一个独立的语言服务进程/服务,它们通过RPC彼此交谈。 当你在编辑器中输入的时候,它把这些信息发送到另一个进程中,以便追踪项目的状态。 当你在模板中触发一个自动完成列表时,编辑器进程就会先把这个模板解析成 HTML AST,或者叫抽象语法树。然后,Angular 编译器就会解释模板所属的模块以及模板选择器。然后它找出光标目前正在模板 AST 的什么位置。一旦它确定了情境,就可以决定其子节点可以是什么了。

如果是在插值表达式中,还会牵扯到更多东西。如果你在 div 元素中有一个插值表达式 {{data.---}},并且需要在输入了 data. 之后提供自动完成列表,编译器就没办法使用 HTML AST 来找出答案了。 HTML AST 只能告诉编译器,有一些具有 "{{data.---}}" 特征的文本。也就是说模板解析器会生成表达式的 AST ,并且放在模板的 AST 中。Angular 语言服务然后在这个情境下查找 data.---,并向 TypeScript 语言服务询问这些数据都有哪些成员。然后 TypeScript 就会返回一个可能的列表。

要了解更多更深入的信息,参见 Angular 语言服务 API

语言服务
AngularJS

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。

AngularJS目录

1.快速上手 | quick start
2.语言服务
3.安全
4.环境准备与部署
5.Service Worker
6.保持最新
7.从 AngularJS 升级
8.服务端渲染
9.Visual Studio 2015 快速上手
10.风格指南
11.国际化
12.测试
13.路由与导航
14. 教程 | Tutorial
15.架构
16.组件与模板
17.表单
18.可观察对象与RxJS
19.引导启动
20.Angular 模块
21.依赖注入
22.HttpClient
23.词汇表
24.AngularJS 应用
25.AngularJS 模块
26.AngularJS 事件
27.AngularJS HTML DOM
28.AngularJS 过滤器
29.AngularJS 控制器
30.AngularJS 指令
31.AngularJS 表达式
32.AngularJS 简介
33.AngularJS 参考手册
34.AngularJS 实例
35.AngularJS 输入验证
36.AngularJS 表单
37.AngularJS SQL
38.AngularJS 表格
39.AngularJS Http
40.AngularJS 包含
41.AngularJS Bootstrap
42.AngularJS API
43.AngularJS ng-checked 指令
44.AngularJS ng-change 指令
45.AngularJS ng-blur 指令
46.AngularJS ng-bind-template 指令
47.AngularJS ng-bind-html 指令
48.AngularJS ng-bind 指令
49.AngularJS ng-app 指令
50.AngularJS Scope(作用域)
51.AngularJS ng-model 指令
52.AngularJS ng-dblclick 指令
53.AngularJS ng-cut 指令
54.AngularJS ng-csp 指令
55.AngularJS ng-copy 指令
56.AngularJS ng-controller 指令
57.AngularJS ng-cloak 指令
58.AngularJS ng-click 指令
59.AngularJS ng-class-odd 指令
60.AngularJS ng-class-even 指令
61.AngularJS ng-class 指令
62.AngularJS ng-keyup 指令
63.AngularJS ng-keypress 指令
64.AngularJS ng-keydown 指令
65.AngularJS ng-init 指令
66.AngularJS ng-include 指令
67.AngularJS ng-if 指令
68.AngularJS ng-href 指令
69.AngularJS ng-hide 指令
70.AngularJS ng-focus 指令
71.AngularJS ng-disabled 指令
72.AngularJS ng-non-bindable 指令
73.AngularJS ng-mouseup 指令
74.AngularJS ng-mouseover 指令
75.AngularJS ng-mousemove 指令
76.AngularJS ng-mouseleave 指令
77.AngularJS ng-mouseenter 指令
78.AngularJS ng-mousedown 指令
79.AngularJS ng-model-options 指令
80.AngularJS ng-model 指令
81.AngularJS ng-list 指令
82.AngularJS ng-style 指令
83.AngularJS ng-srcset 指令
84.AngularJS ng-src 指令
85.AngularJS ng-show 指令
86.AngularJS ng-selected 指令
87.AngularJS ng-repeat 指令
88.AngularJS ng-readonly 指令
89.AngularJS ng-paste 指令
90.AngularJS ng-options 指令
91.AngularJS ng-open 指令
92.AngularJS ng-value 指令
93.AngularJS ng-switch 指令
94.AngularJS ng-submit 指令
95.AngularJS 服务(Service)
96.AngularJS Select(选择框)
97.AngularJS 动画
98.AngularJS 依赖注入