Visual Studio 2015 快速上手

有些开发者喜欢用 Visual Studio。

本文介绍了在Visual Studio 2015 的 ASP.NET 4.x 项目中，用 Angular 实现“快速上手”所需的步骤。

本文中没有在线例子，因为它介绍的是 Visual Studio，而不是《快速上手》应用程序本身。

ASP.NET 4.x 项目

要用 Visual Studio 2015 在ASP.NET 4.x 项目中设置《快速上手》文件，请遵循如下步骤：

如果你希望使用ASP.NET Core并体验全新项目， 参见预览版ASP.NET Core + Angular 的 Visual Studio 2015 模板。 注意，最终代码与本文不对应，请适当调节。

前提条件: Node.js

如果你的电脑里没有 Node.js®和 npm，请安装它们。

在终端或者控制台中运行 node -v 和 npm -v，请确认你的 Node.js 版本为 8.x 或更高，npm 的版本为 5.x 或更高。老版本会引起错误。

前提条件: Visual Studio 2015 Update 3

使用 Visual Studio 开发 Angular 应用程序的最低要求是 Update 3。 早期版本没有遵循使用 TypeScript 开发应用程序的最佳实践。 要查看你的 Visual Studio 2015 版本号，到 Help | About Visual Studio。

如果还没有，安装Visual Studio 2015 Update 3。或者使用 Tools | Extensions and Updates 来直接在 Visual Studio 2015 中更新到 Update 3。

前提条件: 配置 External Web tools

配置 Visual Studio 来使用全局 External Web Tools，而非 Visual Studio 默认的工具：

• 到 Tools | Options 打开 Options 对话框
• 在左边树型项目中，选择 Projects and Solutions | External Web Tools。
• 在右侧，将 $(PATH) 移动到 $(DevEnvDir)上面。这样，Visual Stuio 就会在使用自带的外部工具时，优先使用全局路径中的外部工具（比如 npm）。
• 点击 OK 关闭对话框。
• 重启 Visual Studio，以让设置变化生效。

Visual Studio 将优先在当前的工作区查找外部工具，如果没有找到，便查找全局路径，如果还没有找到，Visual Studio 就使用自带的工具版本。

前提条件: 安装 TypeScript 2.2 for Visual Studio 2015

Visual Studio Update 3 自带 TypeScript 支持，但是它的 TypeScript 版本开发 Angular 应用需要的不是 2.2。

要安装 TypeScript 2.2：

• 下载并安装 TypeScript 2.2 for Visual Studio 2015
• 或通过 npm 安装：npm install -g typescript@2.2。

你可以在这儿查看更多 Visual Studio 中 TypeScript 2.2 的支持。

至此，Visual Studio 已经准备好了。重新启动 Visual Studio，这样就可以有一个崭新的开始了。

第一步: 现在“快速上手”文件

从 GitHub下载“快速上手”的源代码。如果下载的是一个压缩的 zip 文件，解压它。

第二步：创建 Visual Studio ASP.net 项目

按照下列步骤创建 ASP.NET 4.x 项目：

• 在 Visual Studio 中，选择 File | New | Project 菜单。
• 在模板树中，选择 Templates | Visual C#(或 Visual Basic) | Web菜单。
• 选择 ASP.NET Web Application 模板，输入项目名，点击“OK”按钮。
• 选择自己喜欢的 ASP.NET 4.5.2 模板，点击 OK。

本文选择了 Empty 模板，它没有添加过任何目录，没有身份验证，没有服务器托管。为你的项目选择合适的模板和选项。

第三步: 把“快速上手”的文件复制到 ASP.NET 项目所在的目录

拷贝从 GitHub 下载的“快速上手”文件到包含 .csproj 文件的目录中。按照下面的步骤把它们加到 Visual Studio 中：

• 在 Solution Explorer 中点击 Show All Files 按钮，显示项目中所有隐藏文件。
• 右键点击每个目录和文件，选择 Include in Project。 最少要添加下列文件：
  • src/app 目录（如果询问是否要搜索 TypeScript 类型，回答 No）
  • src/styles.css
  • src/index.html
  • package.json
  • src/tsconfig.json

第四步: 恢复需要的包

按下面的步骤恢复 Angular 应用程序需要的包：

• 在 Solution Explorer 中右键点击 package.json，选择 Restore Packages。 这样，Visual Studio 会使用 npm 来安装在 package.json 中定义的所有包. 这可能需要花一点时间。
• 如果愿意，打开 Output 窗口(View | Output)来监控 npm 命令的执行情况。
• 忽略所有警告。
• 当恢复完成后，将会出现一条消息：Installing packages complete。耐心点，这相当耗时间。
• 在 Solution Explorer 里，点击 Refresh 图标。
• 不要将 node_modules 目录添加到项目中，让它隐藏。

第五步：构建和运行应用

首先，确认 src/index.html 已被设置为开始页面。 在 Solution Explorer 中，右键点击 index.html，选择选项 Set As Start Page。

按 F5 以在 VS 中运行

大多数 Visual Studio 开发者喜欢按 F5 键来启动 IIS 服务器。 要在这个《快速上手》应用中使用 IIS 服务器，你要做下列修改：

1. 在 index.html 中，把基地址从 <base href="/"> 改为 <basehref="/src/"> 。
2. 同样在 index.html 中，修改脚本来用带有斜杠的 /node_modules代替不带斜杠的 node_modules。
3. 在 src/systemjs.config.js 的顶部，把 npm 的 path 设置为带斜杠的 /node_modules/。

做完这些修改之后，npm start 不再工作了。你必须选择配置为 IIS + F5，还是 npm start + lite-server。

为了使用路由的应用

如果应用要使用路由，就要让服务器在用户要求 HTML 页面时始终返回 index.html。 此中原因，在发布一章中有解释。

当你在应用内部移动时，看起来一切正常。但是如果刷新浏览器，或者在地址栏中输入一个到具体页面的地址（也就是"深链接"）时，问题就来了。

你很可能从服务器得到得到404 - 页面不存在 —— 只有 / 或 /index.html例外。

你就要配置服务器，为那些"未知"的页面返回 index.html。 lite-server开发服务器内置了这项功能。如果要切换到 F5 + IIS，你就要自己来配置 IIS 实现它了。 接下来看看对快速起步应用做配置的步骤。

配置 IIS 重写规则

Visual Studio 自带了一个 IIS Express，其中有一个重写（rewrite）模块。 不过，如果使用标准版的 IIS ，就要自己去安装这个重写模块了。

通过把下列重写规则添加到 web.config 的底部，就可以告诉 Visual Studio 如何处理到应用页面的请求。

content_copy<system.webServer>  <rewrite>    <rules>      <rule name="Angular Routes" stopProcessing="true">        <match url=".*" />        <conditions logicalGrouping="MatchAll">          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />        </conditions>        <action type="Rewrite" url="/src/" />      </rule>    </rules>  </rewrite></system.webServer>

匹配 url <match url=".*" /> 语句将会重写每一个请求。如果需要直接放行某些请求，比如一些 Web API 请求，你就必须调整它才行。

<action type="Rewrite" url="/src/"/> 中的 url 将会匹配 index.html 中的基地址（base href）。

点击 Run 按钮或者按 F5 键，用调试器构建和启动应用。

按 Ctrl-F5 不带调试器的运行应用，速度会更快。

默认浏览器打开并显示《快速上手》例子应用。

尝试编辑任何项目文件，保存并刷新浏览器来查看效果。

	Visual Studio 2015 快速上手