65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 TypeScript 和 Visual Studio 2013 构建第一个 Angular2 应用

Praveen Ruchandani
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (15投票s)

2015 年 11 月 30 日

CPOL

5分钟阅读

viewsIcon

106402

downloadIcon

4324

使用 VS2013 和 TypeScript 构建第一个 Angular2 应用。

引言

近年来，随着 Angular、ReactJs 等框架的出现，现代应用程序开发经历了巨大的变革。随着 ES6 的变化、TypeScript 和 Angular2 的出现，我们正迎来 Web 应用程序开发的新一轮变化。本教程将引导您完成使用 Visual Studio 创建基本 Angular2 应用程序的过程。

背景

本教程旨在设置一个环境，使用 Visual Studio 2013 构建 Angular2 应用，并在此过程中描述 Angular2 应用的各个组件如何协同工作。本教程中使用的工具和技术是：

1) Visual Studio 2013 社区版，附带 .NET 4.5

2) Angular 2

3) TypeScript

4) NPM 

让我们开始吧！

安装 TypeScript

本教程要求您的 Visual Studio 中安装 TypeScript 1.6.2 或更高版本。您可以从此处下载适用于 Visual Studio 2013 的 TypeScript：

https://www.microsoft.com/en-us/download/details.aspx?id=48739

安装完成后，您可以在机器上的以下位置看到所有已安装的版本。

{驱动器}\{程序文件文件夹}\Microsoft SDKs\TypeScript\

您可以通过在命令提示符中键入以下命令来验证 TypeScript 版本。

如果您仍然看不到正确的版本，请检查 PATH 环境变量，确保它指向您机器上最新版本的位置。

安装 Node.js/npm

npm (Node 包管理器)是安装 Angular2 所必需的。npm 是作为 Node.js 安装的一部分安装的。您可以从 Node.JS 站点下载 Node.js 安装程序。安装完成后，您可以键入以下命令来检查已安装的 Node.js 版本。

 

npm -v

 

设置 Visual Studio 项目

1) 启动您的 Visual Studio，然后创建一个新项目。选择“带有 TypeScript 的 HTML”模板。

 

2) 项目将包含 index.html、app.ts 和 app.cs。

 

3) 在项目属性下，更新 TypeScript 生成选项以包含模块系统。Angular2 将 API 作为模块公开，因此我们需要一个模块处理程序来管理模块。我们将在下一步中安装它。

 

 

为了避免与 Decorator (见下文)相关的编译错误，我们必须为 TypeScript 编译器启用 experimentalDecorators 标志。您需要手动修改 .csproj 文件以包含此标志。关闭您的 Visual Studio 解决方案，然后用您喜欢的任何文本编辑器打开 .csproj 文件，并将以下元素添加到项目属性中。

<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>

这是 cs proj 文件的截图

 

 

如果没有这样做，您可能会在 TypeScript 文件中看到以下错误。

 

添加 Angular2 & SystemJS 模块。

要安装 Angular2，请从命令提示符导航到您的项目文件夹，然后安装以下 npm 包。

  1. angular2 - Angular 2 库。
  2. systemjs - 一个开源的模块加载库。
npm install angular2 systemjs --save --save-exact

如果您在 Visual Studio 解决方案资源管理器中点击“显示所有文件”，应该会看到 node_modules 文件夹，其中包含 angular2 和 systemjs 的文件夹。

 

 

在安装了所有必需的依赖项后，让我们开始编写我们的应用程序。

应用程序组件

我们将创建一个简单的联系人管理器应用程序，该应用程序显示联系人的姓名、电子邮件地址和电话号码。修改 app.ts 文件的内容，使其如下所示。

/// <reference path="node_modules/angular2/bundles/typings/es6-shim/es6-shim.d.ts" />
/// <reference path="node_modules/angular2/bundles/typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap} from "angular2/angular2";

@Component(
    {

        selector: 'contact'
    })
@View({
        templateUrl: 'Contact.html'
})
  
class Contact {
    name: string;
    email: string;
    phone: string;
    constructor() {
        this.email = 'John.Doe@gmail.com';
        this.name = 'John Doe';
        this.phone = '1-800-GOOG';
    }
}

bootstrap(Contact);

在您的项目中添加一个 html 文件，并将其命名为 Contact.html。修改内容如下。

<div class="container">
    <div>
        <label for="name">Name:</label>
        <span>{{name}}</span>
    </div>
    <div>
        <label for="name">Name:</label>
        <span>{{email}}</span>
    </div>
    <div>
        <label for="name">Name:</label>
        <span>{{phone}}</span>
    </div>

</div>

 

这是一个非常简单的组件，但让我们看看这里发生的一些有趣的事情。

TypeScript 定义文件

app.ts 的前两行是对类型定义文件的引用。类型定义文件公开库 (在本例中是 Angular2) 的公共 API，并由编译器用于解析外部模块的引用。在我们的例子中，我们使用的是 angular2.d.ts 文件中声明的 @Component、@View 和 bootstrap 模块。

导入模块

在下一行，我们导入组件所需的外部模块。在 Angular2 中，您需要导入构建组件所需的任何依赖项，这些依赖项默认不包含在内。如果您查看位于 node_modules\angular2\bundles\typings\angular2 文件夹中的 angular2.d.ts 文件，您会注意到 Component、View 和 Bootstrap 作为 angular2/angular2 模块被外部导出。

 

 

一个基本的 Angular2 组件包含 3 个部分：

1) 组件注解

2) 视图注解

3) 类

类

定义的 Contact 类本质上是我们的控制器，具有定义的属性。它使用 TypeScript 定义，并具有 name、email 和 phone 三个已定义的属性。类的构造函数初始化将在视图中填充的 name、email 和 phone 属性。

注解/装饰器

注解是向类添加元数据的方式，Angular 将使用它们来查找并将我们的组件加载到 DOM 中。在这种情况下，@Component 定义了一个选择器 ( <contact></contact> )，并用 @View 注解中定义的视图替换它。

视图 & 数据绑定

我们组件中定义的视图是 Contact.html。如果您注意到 contact.html 的列表，您会发现所有花括号 {{ }} 都用于数据绑定到组件属性。数据绑定表达式将解析为类属性。

引导

最后一步是引导我们的应用程序。Angular 现在将知道使用哪个组件，并将组件加载到 DOM 中与我们选择器匹配的元素中。

HTML 文件

将 index.html 文件的内容修改如下：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>First Angular App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>
    <script src="app.js"></script>

</head>
<body>
    <script>
    System.import('app.js');
    </script>

    <h1>TypeScript HTML App</h1>

    <div id="content">
        <contact></contact>
    </div>
</body>
</html>

这里有几点需要注意：

  1. 如果您在这里注意到，我们引用的是 js 文件而不是 .ts TypeScript 文件。在编译项目时需要 TypeScript 文件，但我们需要在 HTML 中引用 js 文件。
  2. TypeScript 编译器将从页面上引用的 app.ts TypeScript 文件生成一个 app.js 文件。
  3. 此外，我们还在页面中引用了 angular2.js 和 system.js 文件。
  4. 我们正在调用 System.import 方法来注册我们的 Angular 组件。在注册过程中，Angular2 将通过将组件加载到指定的选择器中来引导应用程序。

 

运行应用程序

现在，当您运行应用程序时，应该会在浏览器中看到以下内容：

.

历史

初稿 - 2015/11/29

© . All rights reserved.