Visual Studio 2015 快速起步

有些开发者喜欢用Visual Studio。

Some developers prefer Visual Studio as their Integrated Development Environment (IDE).

本烹饪宝典介绍了在Visual Studio 2015的ASP.NET 4.x项目中，用Angular实现“快速起步”所需的步骤。

This cookbook describes the steps required to set up and use the Angular QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project.

ASP.NET 4.x 项目

ASP.NET 4.x Project

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

To set up the QuickStart files with an ASP.NET 4.x project in Visual Studio 2015, follow these steps:

• 前提条件: 安装Node.js

  Prerequisite: Install Node.js.

• 前提条件: 安装Visual Studio 2015 Update 3

  Prerequisite: Install Visual Studio 2015 Update 3.

• 前提条件: 配置External Web tools

  Prerequisite: Configure external web tools.

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

  Prerequisite: Install TypeScript 2.2 for Visual Studio 2015.

• 第一步: 下载“快速起步”的文件

  Step 1: Download the QuickStart files.

• 第二步: 创建Visual Studio ASP.NET项目

  Step 2: Create the Visual Studio ASP.NET project.

• 第三步: 把“快速起步”中的文件拷贝到ASP.NET的项目目录中

  Step 3: Copy the QuickStart files into the ASP.NET project folder.

• 第四步: 恢复需要的包

  Step 4: Restore required packages.

• 第五步: 构建和运行应用程序

  Step 5: Build and run the app.

前提条件: Node.js

Prerequisite: Node.js

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

Install Node.js® and npm if they are not already on your machine.

前提条件: Visual Studio 2015 Update 3

Prerequisite: Visual Studio 2015 Update 3

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

The minimum requirement for developing Angular applications with Visual Studio is Update 3. Earlier versions do not follow the best practices for developing applications with TypeScript. To view your version of Visual Studio 2015, go to Help | About Visual Studio.

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

If you don't have it, install Visual Studio 2015 Update 3. Or use Tools | Extensions and Updates to update to Update 3 directly from Visual Studio 2015.

前提条件: 配置External Web tools

Prerequisite: Configure External Web tools

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

Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio:

• 到Tools | Options打开Options对话框

  Open the Options dialog with Tools | Options.

• 在左边树型项目中，选择Projects and Solutions | External Web Tools。

  In the tree on the left, select Projects and Solutions | External Web Tools.

• On the right, move the $(PATH) entry above the $(DevEnvDir) entries. This tells Visual Studio to use the external tools (such as npm) found in the global path before using its own version of the external tools.

• 在右侧，将$(PATH)移动到 $(DevEnvDir)上面。这样，Visual Stuio就会在使用自带的外部工具时，优先使用全局路径中的外部工具（比如npm）。

  Click OK to close the dialog.

• 点击OK关闭对话框。

  Restart Visual Studio for this change to take effect.

• 重启Visual Studio，以让设置变化生效。

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

Visual Studio now looks first for external tools in the current workspace and if it doesn't find them, it looks in the global path. If Visual Studio doesn't find them in either location, it will use its own versions of the tools.

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

Prerequisite: Install TypeScript 2.2 for Visual Studio 2015

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

While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2.2, which you need to develop Angular applications.

要安装TypeScript 2.2：

To install TypeScript 2.2:

• 下载并安装 TypeScript 2.2 for Visual Studio 2015

  Download and install TypeScript 2.2 for Visual Studio 2015

• 或通过npm安装：npm install -g typescript@2.2。

  OR install it with npm: npm install -g typescript@2.2.

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

You can find out more about TypeScript 2.2 support in Visual studio here.

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

At this point, Visual Studio is ready. It’s a good idea to close Visual Studio and restart it to make sure everything is clean.

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

Step 1: Download the QuickStart files

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

Download the QuickStart source from GitHub. If you downloaded as a zip file, extract the files.

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

Step 2: Create the Visual Studio ASP.NET project

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

Create the ASP.NET 4.x project in the usual way as follows:

• 在Visual Studio中，选择File | New | Project菜单。

  In Visual Studio, select File | New | Project from the menu.

• 在模板树中，选择Templates | Visual C#(或Visual Basic) | Web菜单。

  In the template tree, select Templates | Visual C# (or Visual Basic) | Web.

• 选择ASP.NET Web Application模板，输入项目名，点击“OK”按钮。

  Select the ASP.NET Web Application template, give the project a name, and click OK.

• 选择自己喜欢的ASP.NET 4.5.2模板，点击OK。

  Select the desired ASP.NET 4.5.2 template and click OK.

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

Step 3: Copy the QuickStart files into the ASP.NET project folder

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

Copy the QuickStart files you downloaded from GitHub into the folder containing the .csproj file. Include the files in the Visual Studio project as follows:

• 在Solution Explorer中点击Show All Files按钮，显示项目中所有隐藏文件。

  Click the Show All Files button in Solution Explorer to reveal all of the hidden files in the project.

• 右键点击每个目录和文件，选择Include in Project。 最少要添加下列文件：

  Right-click on each folder/file to be included in the project and select Include in Project. Minimally, include the following folder/files:

  • src/app目录（如果询问是否要搜索TypeScript类型，回答No）

    src/app folder (answer No if asked to search for TypeScript Typings)

• src/styles.css

• src/index.html

• package.json

• src/tsconfig.json

• typings.json

第四步: 恢复需要的包

Step 4: Restore the required packages

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

Restore the packages required for an Angular application as follows:

• 在Solution Explorer中右键点击package.json，选择Restore Packages。
  这样，Visual Studio会使用npm来安装在package.json中定义的所有包. 这可能需要花一点时间。

  Right-click on the package.json file in Solution Explorer and select Restore Packages.
  This uses npm to install all of the packages defined in the package.json file. It may take some time.

• 如果愿意，打开Output窗口(View | Output)来监控npm命令的执行情况。

  If desired, open the Output window (View | Output) to watch the npm commands execute.

• 忽略所有警告。

  Ignore the warnings.

• 当恢复完成后，将会出现一条消息：Installing packages complete。耐心点，这相当耗时间。

  When the restore is finished, a message in the bottom message bar of Visual Studio should say: Installing packages complete. Be patient. This could take a while.

• 在Solution Explorer里，点击Refresh图标。

  Click the Refresh icon in Solution Explorer.

• 不要将node_modules目录添加到项目中，让它隐藏。

  Do not include the node_modules folder in the project. Let it be a hidden project folder.

第五步：构建和运行应用

Step 5: Build and run the app

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

First, ensure that src/index.html is set as the start page. Right-click index.html in Solution Explorer and select option Set As Start Page.

To run in VS with F5

Most Visual Studio developers like to press the F5 key and see the IIS server come up. To use the IIS server with the QuickStart app, you must make the following three changes.

1. In index.html, change base href from <base href="/"> to <base href="/src/">.
2. Also in index.html, change the scripts to use /node_modules with a slash instead of node_modules without the slash.
3. In src/systemjs.config.js, near the top of the file, change the npm path to /node_modules/ with a slash.

For apps that use routing

If your app uses routing, you need to teach the server to always return index.html when the user asks for an HTML page for reasons explained in the Deployment guide.

Everything seems fine while you move about within the app. But you'll see the problem right away if you refresh the browser or paste a link to an app page (called a "deep link") into the browser address bar.

You'll most likely get a 404 - Page Not Found response from the serer for any address other than / or /index.html.

You have to configure the server to return index.html for requests to these "unknown" pages. The lite-server development server does out-of-the-box. If you've switched over to F5 and IIS, you have to configure IIS to do it. This section walks through the steps to adapt the QuickStart application.

Configure IIS rewrite rules

Visual Studio ships with IIS Express, which has the rewrite module baked in. However, if you're using regular IIS you'll have to install the rewrite module.

Tell Visual Studio how to handle requests for route app pages by adding these rewrite rules near the bottom of the web.config:

<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>

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

Build and launch the app with debugger by clicking the Run button or by pressing F5.

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

The default browser opens and displays the QuickStart sample application.

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

Try editing any of the project files. Save and refresh the browser to see the changes.