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#(或VisualBasic) |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 服务器，你要做下列修改：
做完这些修改之后，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 不带调试器的运行应用，速度会更快。
默认浏览器打开并显示《快速上手》例子应用。
尝试编辑任何项目文件，保存并刷新浏览器来查看效果。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
