docs(cb) First draft of Visual Studio 2015 QuickStart

Author: DeborahK

public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "compileOnSave": true
+}

public/docs/ts/latest/cookbook/_data.json

@@ -39,5 +39,10 @@
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
     "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
+  },
+
+  "visual-studio-2015": {
+    "title": "QuickStart with Visual Studio 2015",
+    "intro": "Use Visual Studio 2015 with the QuickStart files"
   }
 }

public/docs/ts/latest/cookbook/visual-studio-2015.jade

@@ -1 +1,169 @@
-Start of the Visual Studio 2015 Cookbook
+include ../_util-fns
+
+<a id="top"></a>
+:marked
+   Some developers prefer using Visual Studio as their interactive development environment or IDE.
+   For those developers, there are some additional steps required to successfully set up and use the
+   Angular 2 QuickStart files.
+   
+   In this cookbook we show how to set up the QuickStart files using Visual Studio. The steps
+   required depend on the type of Visual Studio project you use.
+   
+<a id="toc"></a>
+:marked
+   ## Table of Contents
+
+      [ASP.NET 4.x Project](#asp-net-4)
+
+:marked
+  **This cookbook is for Visual Studio, so there is no live plunker example.
+  
+.l-main-section
+<a id="asp-net-4"></a>
+:marked
+  ## ASP.NET 4.x Project
+  
+  The steps for setting up the QuickStart files with an ASP.NET 4.x project in
+  Visual Studio 2015 are as follows:
+  
+:marked
+  - [Prerequisite](#prereq): Install Node.js
+  - [Step 1](#download): Download the QuickStart files
+  - [Step 2](#setup-vs): Set up Visual Studio for TypeScript
+  - [Step 3](#create-project): Create the Visual Studio ASP.NET project
+  - [Step 4](#copy): Copy the QuickStart files into the ASP.NET project folder
+  - [Step 5](#restore): Restore required packages
+  - [Step 6](#edit-config): Edit the TypeScript configuration file
+  - [Step 7](#build-and-run): Build and run the app
+  
+  - [Step 3](#main): Add `main.#{_docsFor}`, identifying the root component to Angular
+  - [Step 4](#index): Add `index.html`, the web page that hosts the application
+
+  - [Make some changes to the app](#make-some-changes)
+  - [Wrap up](#wrap-up)
+  
+.l-main-section
+h2#prereq Prerequisite: Node.js
+
+  :marked
+    Install **[Node.js® and npm](https://nodejs.org/en/download/)**
+    if they are not already on your machine.
+  .l-sub-section
+    :marked
+      **Verify that you are running node `v5.x.x` and npm `3.x.x`**
+      by running `node -v` and `npm -v` in a terminal/console window.
+      Older and newer versions produce errors.
+
+.l-main-section
+h2#download Step 1: Download the QuickStart files
+
+  :marked
+    [Download the QuickStart source](https://github.com/angular/quickstart)
+    from github. If you download as a zip file, extract the files.
+
+.l-main-section
+h2#setup-vs Step 2: Set up Visual Studio for TypeScript
+
+  :marked
+    Ensure you have the latest version of Visual Studio 2015 installed. 
+    Then open Visual Studio 2015 and download the latest set of TypeScript tools for
+    Visual Studio as follows:
+  
+    * Open `Tools` | `Extensions and Updates`.
+    * Select `Online` in the tree on the left.
+    * Search for `TypeScript` in the search box in the upper right.
+    * Select the latest TypeScript version (`TypeScript 1.8.4 for Visual Studio 2015`).
+    * Download and install the package.
+
+.l-main-section
+h2#create-project Step 3: Create the Visual Studio ASP.NET project
+
+  :marked
+    Create the ASP.NET 4.x project as follows:
+    
+    * In Visual Studio, select `File` | `New` | `Project` from the menu.
+    * In the template tree, select `Templates` | `Visual C#` (or `Visual Basic`) | `Web`.
+    * Select the `ASP.NET Web Application` template, give the project a name, and click OK.
+    * Select the desired ASP.NET 4.5.2 template and click OK.
+      We selected the `Empty` template with no added folders, no authentication and no hosting,
+      but you can pick the template and options appropriate for your project.
+    
+.l-main-section
+h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder
+
+  :marked
+    Copy the QuickStart files downloaded from github to the folder containing the `.csproj` folder.
+    Include the files in the project as follows:
+    
+    * Click the `Show All Files` button in Solution Explorer to show all of the files in the project.
+    * Right-click on each folder/file to be included in the project and select `Include in Project`.
+      Minimally, include the following folder/files:
+      * app folder
+        <br>You may see a dialog that asks if you want to search for TypeScript Typings, select `No`.
+      * styles.css
+      * index.html
+      * package.json
+      * tsconfig.json
+      * typings.json
+    
+.l-main-section
+h2#restore Step 5: Restore the required packages
+
+  :marked
+    Restore the packages required for an Angular application as follows:
+    
+    * Right-click on the packages.json file in Solution Explorer and select `Restore Packages`.
+      <br>This uses npm to install all of the packages defined in the package.json file. This may take some time.
+    * If desired, open the Output window (`View` | `Output`) to watch the npm commands execute.
+    * When the restore is finished, you should see a message that states: `npm command completed with exit code 0`.
+      <br>You may also see some warnings which can be ignored.
+    * Click the `Refresh` icon in Solution Explorer and you should see the node_modules as a hidden folder in the project. (It is recommended that you do
+      *not* including this folder in the project using `Include in Project`.)
+    
+  .alert.is-important
+    :marked
+      If you see errors here such as `angular/compiler is not in the npm registry`, then your Visual Studio 2015
+      may be using an older version of npm. To use the latest installed version of npm:
+      
+      * Use `Tools` | `Options` to open the Options dialog.
+      * 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 your path before using its own version of the external tools.
+      * Click OK to close the dialog.
+      
+.l-main-section
+h2#edit-config Step 6: Edit the TypeScript configuration file
+
+  :marked
+    There is one additional option in the TypeScript configuration (`tsconfig.json`) file that is not required when using other editors, 
+    but is required if using Visual Studio 2015. Add line 13 to the tsconfig.json file as shown here. After making this change
+    exit Visual Studio and reopen it to reload the project.
+    
+  +makeJson('cb-visual-studio-2015/ts/tsconfig.json', null, 'tsconfig.json (scripts)')
+
+.l-main-section
+h2#build-and-run Step 7: Build and run the app
+
+  :marked
+    Click the Run button or press F5 to build and run the application.
+    
+    This launches the default browser and runs the QuickStart sample application.
+    
+    You can then edit any of the project files and *save*. Then refresh the browser to
+    see your changes. 
+    
+  .alert.is-important
+    :marked
+      If you see errors on compilation such as `Property ‘map’ does not exist on type ‘Observable<Response>’` or
+      `Observable cannot be found`, then exit Visual Studio and follow the instructions here: 
+      https://github.com/Microsoft/TypeScript/issues/8518
+
+      This involves replacing your `C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js` file. 
+      NOTE: This requires admin privileges.
+
+  .alert.is-important
+    :marked
+      When you add routing to the application, the refresh only works when there is no routing path in the address bar.
+    
+:marked
+  [Back to top](#top)