Visual Studio 中Angular 2 和TypeScript的预览版


[原文发表地址] A Preview of Angular 2 and TypeScript in Visual Studio

[原文发表时间] 3/12/2015

上个星期,在ng-conf大会中,谷歌的Angular团队为Web开发者提供Angular 2的更新状态。他们也作为TypeScript团队成员加入这个舞台上。 Jonathan Turner宣布 Angular 2 将会被内置于TypeScript中。Jonathan还通过Angular 2示例应用程序预测TypeScript 1.5预览版本即将到来。

通过阅读这篇文章,您将会看到 Visual Studio 编辑器如何支持TypeScript和Angular 2的新语言功能。

在 Visual Studio 中打开Angular 2 演示项目

我在写这篇博客的时候,NuGet上还没有官方预览版的Angular与TypeScript可供下载,并应用到您的项目当中。为了帮助您在 Visual Studio 中的工具使用体验,我们已经用TypeScript 1.5 和Angular 2创建了示例项目,您今天就可以下载并使用。

您可以使用Visual Studio 2013Visual Studio 2015 CTP 6来查看事例代码。从这里开始:

C:\ > cd src

C:\src > git clone https://github.com/Microsoft/ngconf2015demo.git

  • 按照本说明操作,可以从项目端更新Visual Studio, 来支持TypeScript 1.5。这篇文章中,我将会使用Visual Studio2015,因此我会按照说明进行操作来获取更新的那个版本。
  • 使用Visual Studio打开的演示项目。您可以使用文件 |打开 |Web 站点…菜单,然后打开从GitHub 克隆c:\src\ngconf2015demo\ 文件夹。做了此步操作后,Visual Studio 中的解决方案资源管理器如下显示:

clip_image002

因为这个演示用的TypeScript编译器的预发行功能,这是个自定义的编译器版本,它被复制到项目的tsc文件夹中。这意味着你能很容易在Visual Studio中生成并运行此项目(我们正在努力在TypeScript 1.5发布前修复它)。现在,你可以探索Visual Studio支持的编辑器和使用命令行(按照顺序)来生成和预览ngconf2015演示项目站点.

使用TypeScript 1.5编辑Angular 2 应用程序

现在,让我们看看在Visual Studio 和TypeScript 1.5 中的新语言功如何帮助使用Angular 2生成应用程序。

引用Angular模块

当构建一个Angular 2 应用程序时,你可以通过在应用程序中导入要使用的核心Angular模块。你可以在提供的TodoMVC 示例中看到一个这样的例子, todo.ts 文件中:

import {Component, Template} from ‘annotations’;
import {bootstrap, Foreach} from ‘angular2/angular2’;

由于这是预发布代码,这些引用是可能在Angular 2 的最终版本中被改变。重要的是要注意您在这儿看到的引用代码是用JavaScript语言,ECMAScript 6(也称ES6)的下个版本的模块语法写的。TypeScript 1.5 为 ES6 模块提供全力支持。

您会看到我们在引用Angular组件注释,它是Angular 2 应用程序 (更多关于组件) 中的一个重要概念。在这种情况下,您可能会对组件标注有兴趣, 那么这时Visual Studio 代码导航功能会有帮助。例如,如果您用鼠标右键单击组件并选择" Peek Definition ":

clip_image004

您将看到以下内容:

clip_image006

如果你想要打开定义批注的完整文件,那么您也可以在模块引用上使用" Go to Definition ",然后 Visual Studio 会打开包含它的文件:

clip_image008

定义组件

在Angular 2 中,应用基于组件的结构,并表示 UI。你可以在我们简单的ToDo MVC 项目中看到todo.ts文件,它其中定义了主要的TodoApp组件。

批注是TypeScript 1.5 中的新功能,它将额外的数据附加到类中,例如配置元数据。它也是JavaScript 语言作为 ECMAScript 7 规范进程受争议的一部分语言功能,在开发Angular2体验中利用大量带有TypeScript 的注释。

组件是一种装饰着 @Component 注释的类,可以标识出您类代表Angular组件。在 Visual Studio 中,当你正在编写一个组件,智能感知会理解注释,并为他们建议有效配置参数:

clip_image010

在此示例中,我已经通过使用快捷键 Ctrl + J 键盘序列对 @Component 的调用来调用智能感知。下面是类与 @Component 注释完整定义的示例:

@Component({
    selector: ‘todo-app’,
    componentServices: []
})
class TodoApp { 
}

正如你所看到的 ,TodoApp 组件配置,并绑定到在该应用程序上的 HTML 页面(index.html)的 todo 应用元素上。

查找应用程序中使用的组件

批注的好处之一是,它可以更容易让工具来了解您的源代码。下面这个例子,它现在很容易找到整个项目中使用的组件的位置。在 Visual Studio 中,可以使用注释的"查找所有引用"功能来查找所有使用该注释的源代码:

clip_image012

然后显示一个使用 @Component 批注的所有来源的列表:

clip_image014

使用依赖项

依赖关系管理一直是Angular与内置的依赖的核心部分。当同时使用Angular 2 和TypeScript,您只需通过引用类型来指定类之间的依赖。例如,下面的 TodoApp 类依赖于一个 AngularFire 类,作为@Component 注释的一部分,并在其构造函数中。当应用程序运行时,Angular将确保 AngularFire 类型的一个实例正确地创建并传递给类的构造函数:

@Component({
    selector: ‘todo-app’,
    componentServices: [
      AngularFire
    ]})   
class TodoApp {
    todoService: FirebaseArray;
    todoEdit: any;

    constructor(sync: AngularFire) {
        this.todoService = sync.asArray();
        this.todoEdit = null;
    }
}

而且,既然您使用类型来定义依赖关系,那么你可以充分利用像TypeScript和使用重构工具的高信任度的类型化语言所提供的工具带来的好处。例如,如果你想要重命名此示例中的 AngularFire 类,你可以使用VS 中的"重命名"选项来更改其在整个完整项目中的名称:

clip_image016

然后,Visual Studio将为你在整个项目中的所有文件中引用查找和替换,:

clip_image018

使用基于JavaScript 的Angular 2

在这篇文章,我已经给你大致讲解了 Visual Studio 和TypeScript 1.5 将如何帮助您构建Angular 2 应用程序。您还可以在使用普通的旧 ES5 或即将发布的 ES6 版本 JavaScript构建Angular 2应用程序。当在 Visual Studio 中开发一个使用 JavaScript 的Angular 2 应用程序,你会得到 JavaScript 编辑器,包括智能感知、 转去定义和导航栏的所有功能。因为Angular 2 稳定了,我们将继续在 Visual Studio中为Angular开发人员打造新的编辑器功能。

期待着Angular 2 的发布

当时写这篇文章, Angular 2被认为是"阿尔法预览版", 我们会继续与Angular的团队合作,直到它达到可以完全发布的质量状态。我们想要继续在 Visual Studio 中建立一个伟大的体验,不只是为了TypeScript开发人员,而且还有一般正在使用JavaScript、 HTML 和 CSS的web 开发人员。

试试看,分享您的反馈意见

今天,你可以跟随本教程网站开始尝试Angular 2, http://www.angular.io,但要意识到关于TypeScript工作流的文档现在还没有。若要查看的TypeScript 1.5 的Angular 2 预览版本,请查阅在http://www.github.com/microsoft/ngconf2015demo的演示网站。我们很乐意听到您的任何反馈意见。

最后,如果你想要了解更多关于TypeScript,请使用Visual Studio 2013(也包括作为Visual Studio 2015 CTP 6的一部分)安装最新的TypeScript工具,并从TypeScript网站签出文档和示例。

Comments (0)

Skip to main content