├── Angular2VisualStudioTemplate.sln ├── Angular2VisualStudioTemplate ├── Angular2VisualStudioTemplate.csproj ├── Angular2VisualStudioTemplate.csproj.user ├── App_Start │ └── WebApiConfig.cs ├── Global.asax ├── Global.asax.cs ├── Properties │ └── AssemblyInfo.cs ├── Web.Debug.config ├── Web.Release.config ├── Web.config ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ └── main.ts ├── index.html ├── package.json ├── packages.config ├── styles.css ├── systemjs.config.extras.js ├── systemjs.config.js └── tsconfig.json ├── Angular2VisualStudioTemplateVSIX ├── 1488254936_angular.png ├── Angular2VisualStudioTemplateVSIX.csproj ├── Angular2VisualStudioTemplateVSIX.csproj.user ├── ProjectTemplates │ └── Angular 2.zip ├── Properties │ └── AssemblyInfo.cs ├── index.html ├── source.extension.vsixmanifest └── stylesheet.css ├── README.md └── UpgradeLog.htm /Angular2VisualStudioTemplate.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 14 4 | VisualStudioVersion = 14.0.25420.1 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Angular2VisualStudioTemplate", "Angular2VisualStudioTemplate\Angular2VisualStudioTemplate.csproj", "{40634F0E-CE64-4CA1-B158-C522A574C1E4}" 7 | EndProject 8 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Angular2VisualStudioTemplateVSIX", "Angular2VisualStudioTemplateVSIX\Angular2VisualStudioTemplateVSIX.csproj", "{391F536D-D93B-498B-BD51-FC0FD272FFD4}" 9 | EndProject 10 | Global 11 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 12 | Debug|Any CPU = Debug|Any CPU 13 | Release|Any CPU = Release|Any CPU 14 | EndGlobalSection 15 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 16 | {40634F0E-CE64-4CA1-B158-C522A574C1E4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 17 | {40634F0E-CE64-4CA1-B158-C522A574C1E4}.Debug|Any CPU.Build.0 = Debug|Any CPU 18 | {40634F0E-CE64-4CA1-B158-C522A574C1E4}.Release|Any CPU.ActiveCfg = Release|Any CPU 19 | {40634F0E-CE64-4CA1-B158-C522A574C1E4}.Release|Any CPU.Build.0 = Release|Any CPU 20 | {391F536D-D93B-498B-BD51-FC0FD272FFD4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 21 | {391F536D-D93B-498B-BD51-FC0FD272FFD4}.Debug|Any CPU.Build.0 = Debug|Any CPU 22 | {391F536D-D93B-498B-BD51-FC0FD272FFD4}.Release|Any CPU.ActiveCfg = Release|Any CPU 23 | {391F536D-D93B-498B-BD51-FC0FD272FFD4}.Release|Any CPU.Build.0 = Release|Any CPU 24 | EndGlobalSection 25 | GlobalSection(SolutionProperties) = preSolution 26 | HideSolutionNode = FALSE 27 | EndGlobalSection 28 | EndGlobal 29 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/Angular2VisualStudioTemplate.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | Debug 9 | AnyCPU 10 | 11 | 12 | 2.0 13 | {40634F0E-CE64-4CA1-B158-C522A574C1E4} 14 | {349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc} 15 | Library 16 | Properties 17 | AngularTest 18 | AngularTest 19 | v4.6.1 20 | true 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 2.1 29 | 30 | 31 | 32 | true 33 | full 34 | false 35 | bin\ 36 | DEBUG;TRACE 37 | prompt 38 | 4 39 | 40 | 41 | true 42 | pdbonly 43 | true 44 | bin\ 45 | TRACE 46 | prompt 47 | 4 48 | 49 | 50 | 51 | ..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.3\lib\net45\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.dll 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | ..\packages\Newtonsoft.Json.6.0.4\lib\net45\Newtonsoft.Json.dll 74 | 75 | 76 | ..\packages\Microsoft.AspNet.WebApi.Client.5.2.3\lib\net45\System.Net.Http.Formatting.dll 77 | 78 | 79 | ..\packages\Microsoft.AspNet.WebApi.Core.5.2.3\lib\net45\System.Web.Http.dll 80 | 81 | 82 | ..\packages\Microsoft.AspNet.WebApi.WebHost.5.2.3\lib\net45\System.Web.Http.WebHost.dll 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | Global.asax 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | Web.config 108 | 109 | 110 | Web.config 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 10.0 128 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | True 139 | True 140 | 3276 141 | / 142 | http://localhost:3276/ 143 | False 144 | False 145 | 146 | 147 | False 148 | 149 | 150 | 151 | 152 | 153 | 154 | This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is {0}. 155 | 156 | 157 | 158 | 159 | 166 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/Angular2VisualStudioTemplate.csproj.user: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | true 5 | ShowAllFiles 6 | 7 | 8 | 9 | 10 | 11 | index.html 12 | SpecificPage 13 | True 14 | False 15 | False 16 | False 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | True 26 | True 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/App_Start/WebApiConfig.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web.Http; 5 | 6 | namespace AngularTest 7 | { 8 | public static class WebApiConfig 9 | { 10 | public static void Register(HttpConfiguration config) 11 | { 12 | // Web API configuration and services 13 | 14 | // Web API routes 15 | config.MapHttpAttributeRoutes(); 16 | 17 | config.Routes.MapHttpRoute( 18 | name: "DefaultApi", 19 | routeTemplate: "api/{controller}/{id}", 20 | defaults: new { id = RouteParameter.Optional } 21 | ); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/Global.asax: -------------------------------------------------------------------------------- 1 | <%@ Application Codebehind="Global.asax.cs" Inherits="AngularTest.WebApiApplication" Language="C#" %> 2 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/Global.asax.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.Http; 6 | using System.Web.Routing; 7 | 8 | namespace AngularTest 9 | { 10 | public class WebApiApplication : System.Web.HttpApplication 11 | { 12 | protected void Application_Start() 13 | { 14 | GlobalConfiguration.Configure(WebApiConfig.Register); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // General Information about an assembly is controlled through the following 6 | // set of attributes. Change these attribute values to modify the information 7 | // associated with an assembly. 8 | [assembly: AssemblyTitle("AngularTest")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("Microsoft")] 12 | [assembly: AssemblyProduct("AngularTest")] 13 | [assembly: AssemblyCopyright("Copyright © Microsoft 2017")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // Setting ComVisible to false makes the types in this assembly not visible 18 | // to COM components. If you need to access a type in this assembly from 19 | // COM, set the ComVisible attribute to true on that type. 20 | [assembly: ComVisible(false)] 21 | 22 | // The following GUID is for the ID of the typelib if this project is exposed to COM 23 | [assembly: Guid("40634f0e-ce64-4ca1-b158-c522a574c1e4")] 24 | 25 | // Version information for an assembly consists of the following four values: 26 | // 27 | // Major Version 28 | // Minor Version 29 | // Build Number 30 | // Revision 31 | // 32 | // You can specify all the values or you can default the Revision and Build Numbers 33 | // by using the '*' as shown below: 34 | [assembly: AssemblyVersion("1.0.0.0")] 35 | [assembly: AssemblyFileVersion("1.0.0.0")] 36 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/Web.Debug.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/Web.Release.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 30 | 31 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/Web.config: -------------------------------------------------------------------------------- 1 |  2 | 6 | 7 | 8 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/app/app.component.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-size: 300%; 3 | color: #34495e; 4 | } 5 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/app/app.component.html: -------------------------------------------------------------------------------- 1 | 

Hello {{name}}

2 |
This template holds the TypeScript source code of the angular.io quickstart, for good starting Angular 2 client app with ASP.NET WebApi 2 backend.

3 |

See official Angular.io documentation.

4 |

See cookbook Visual Studio QuickStart.

5 |
6 |
7 |

8 | For creating angular 2 component you can use template. 9 |

10 |

This template GitHub repository.

11 |
12 | 13 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | templateUrl: 'app.component.html', 6 | styleUrls: [ 'app.component.css'], 7 | moduleId: module.id 8 | }) 9 | export class AppComponent { name = 'Angular 2'; } 10 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | imports: [ BrowserModule ], 8 | declarations: [ AppComponent ], 9 | bootstrap: [ AppComponent ] 10 | }) 11 | export class AppModule { } 12 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Angular.io QuickStart 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | Loading App 23 | 24 | 25 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi", 5 | "scripts": { 6 | "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 7 | "lint": "tslint ./app/**/*.ts -t verbose", 8 | "lite": "lite-server", 9 | "pree2e": "webdriver-manager update", 10 | "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 11 | "test-once": "tsc && karma start karma.conf.js --single-run", 12 | "tsc": "tsc", 13 | "tsc:w": "tsc -w" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "MIT", 18 | "dependencies": { 19 | "@angular/common": "~2.4.0", 20 | "@angular/compiler": "~2.4.0", 21 | "@angular/core": "~2.4.0", 22 | "@angular/forms": "~2.4.0", 23 | "@angular/http": "~2.4.0", 24 | "@angular/platform-browser": "~2.4.0", 25 | "@angular/platform-browser-dynamic": "~2.4.0", 26 | "@angular/router": "~3.4.0", 27 | 28 | "angular-in-memory-web-api": "~0.2.4", 29 | "systemjs": "0.19.40", 30 | "core-js": "^2.4.1", 31 | "rxjs": "5.0.1", 32 | "zone.js": "^0.7.4" 33 | }, 34 | "devDependencies": { 35 | "concurrently": "^3.2.0", 36 | "lite-server": "^2.2.2", 37 | "typescript": "~2.0.10", 38 | 39 | "canonical-path": "0.0.2", 40 | "tslint": "^3.15.1", 41 | "lodash": "^4.16.4", 42 | "jasmine-core": "~2.4.1", 43 | "karma": "^1.3.0", 44 | "karma-chrome-launcher": "^2.0.0", 45 | "karma-cli": "^1.0.1", 46 | "karma-jasmine": "^1.0.2", 47 | "karma-jasmine-html-reporter": "^0.2.2", 48 | "protractor": "~4.0.14", 49 | "rimraf": "^2.5.4", 50 | 51 | "@types/node": "^6.0.46", 52 | "@types/jasmine": "2.5.36" 53 | }, 54 | "repository": {} 55 | } 56 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/packages.config: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Roboto; 3 | } 4 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/systemjs.config.extras.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Add barrels and stuff 3 | * Adjust as necessary for your application needs. 4 | */ 5 | // (function (global) { 6 | // System.config({ 7 | // packages: { 8 | // // add packages here 9 | // } 10 | // }); 11 | // })(this); 12 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | 16 | // angular bundles 17 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 18 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 19 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 20 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 21 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 22 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 23 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 24 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 25 | 26 | // other libraries 27 | 'rxjs': 'npm:rxjs', 28 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 29 | }, 30 | // packages tells the System loader how to load when no filename and/or no extension 31 | packages: { 32 | app: { 33 | defaultExtension: 'js' 34 | }, 35 | rxjs: { 36 | defaultExtension: 'js' 37 | } 38 | } 39 | }); 40 | })(this); 41 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplateVSIX/1488254936_angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Burgyn/Angular2VisualStudioTemplate/1c4f348bdd576fdadf099e317c4b3aaedd00f9a4/Angular2VisualStudioTemplateVSIX/1488254936_angular.png -------------------------------------------------------------------------------- /Angular2VisualStudioTemplateVSIX/Angular2VisualStudioTemplateVSIX.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 15.0 5 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 6 | 7 | 8 | 9 | 10 | 15.0 11 | 12 | 13 | 14 | Debug 15 | AnyCPU 16 | 2.0 17 | {82b43b9b-a64c-4715-b499-d71e9ca2bd60};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC} 18 | {391F536D-D93B-498B-BD51-FC0FD272FFD4} 19 | Library 20 | Properties 21 | Angular2VisualStudioTemplateVSIX 22 | Angular2VisualStudioTemplateVSIX 23 | v4.5.2 24 | false 25 | false 26 | false 27 | false 28 | false 29 | false 30 | 31 | 32 | true 33 | full 34 | false 35 | bin\Debug\ 36 | DEBUG;TRACE 37 | prompt 38 | 4 39 | 40 | 41 | pdbonly 42 | true 43 | bin\Release\ 44 | TRACE 45 | prompt 46 | 4 47 | 48 | 49 | 50 | 51 | 52 | 53 | Always 54 | true 55 | 56 | 57 | Designer 58 | 59 | 60 | 61 | 62 | Always 63 | true 64 | 65 | 66 | 67 | 68 | 69 | 70 | 77 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplateVSIX/Angular2VisualStudioTemplateVSIX.csproj.user: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Program 5 | C:\Program Files %28x86%29\Microsoft Visual Studio 14.0\Common7\IDE\devenv.exe 6 | /rootsuffix Exp 7 | 8 | 9 | Program 10 | C:\Program Files %28x86%29\Microsoft Visual Studio 14.0\Common7\IDE\devenv.exe 11 | /rootsuffix Exp 12 | 13 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplateVSIX/ProjectTemplates/Angular 2.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Burgyn/Angular2VisualStudioTemplate/1c4f348bdd576fdadf099e317c4b3aaedd00f9a4/Angular2VisualStudioTemplateVSIX/ProjectTemplates/Angular 2.zip -------------------------------------------------------------------------------- /Angular2VisualStudioTemplateVSIX/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // General Information about an assembly is controlled through the following 6 | // set of attributes. Change these attribute values to modify the information 7 | // associated with an assembly. 8 | [assembly: AssemblyTitle("Angular2VisualStudioTemplateVSIX")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("")] 12 | [assembly: AssemblyProduct("Angular2VisualStudioTemplateVSIX")] 13 | [assembly: AssemblyCopyright("")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // Setting ComVisible to false makes the types in this assembly not visible 18 | // to COM components. If you need to access a type in this assembly from 19 | // COM, set the ComVisible attribute to true on that type. 20 | [assembly: ComVisible(false)] 21 | 22 | // Version information for an assembly consists of the following four values: 23 | // 24 | // Major Version 25 | // Minor Version 26 | // Build Number 27 | // Revision 28 | // 29 | // You can specify all the values or you can default the Build and Revision Numbers 30 | // by using the '*' as shown below: 31 | // [assembly: AssemblyVersion("1.0.*")] 32 | [assembly: AssemblyVersion("1.0.0.0")] 33 | [assembly: AssemblyFileVersion("1.0.0.0")] 34 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplateVSIX/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | Getting Started 9 | 10 | 11 | 12 |
13 | 17 | 18 |
19 |
20 |

Creating a Visual Studio Extension

21 | 22 |

This project enables developers to create an extension for Visual Studio. The solution contains a VSIX project that packages the extension into a VSIX file. This file is used to install an extension for Visual Studio.

23 |

Add new features

24 | 25 |
    26 |
  1. Right-click the project node in Solution Explorer and select Add>New Item.
    2. 27 |
  2. In the Add New Item dialog box, expand the Extensibility node under Visual C# or Visual Basic.
    3. 28 |
  3. Choose from the available item templates: Visual Studio Package, Editor Items (Classifier, Margin, Text Adornment, Viewport Adornment), Command, Tool Window, Toolbox Control, and then click Add.
    4. 29 |
30 | 31 |

The files for the template that you selected are added to the project. You can start adding functionality to your item template, press F5 to run the project, or add additional item templates.

32 | 33 |

Run and debug

34 |

To run the project, press F5. Visual Studio will:

35 | 36 |
    37 |
  • Build the extension from the VSIX project.
    • 38 |
  • Create a VSIX package from the VSIX project.
    • 39 |
  • When debugging, start an experimental instance of Visual Studio with the VSIX package installed.
    • 40 |
41 | 42 |

In the experimental instance of Visual Studio you can test out the functionality of your extension without affecting your Visual Studio installation.

43 | 44 |
45 |
46 |
47 |

Visual Studio Extensibility Resources

48 | 49 |
    50 |
  1. MSDN documentation
    Detailed documentation and API reference material for building extensions.
    2. 51 |
  2. Extension samples on GitHub
    Use a sample project to kickstart your development.
    3. 52 |
  3. Extensibility chat room on Gitter
    Meet other extension developers and exchange tips and tricks for extension development.
    4. 53 |
  4. Channel 9 videos on extensibility
    Watch videos from the product team on Visual Studio extensibility.
    5. 54 |
  5. Extensibility Tools 2015
    Install an optional helper tool that adds extra IDE support for extension authors.
    6. 55 |
56 |

Give us feedback

57 | 60 |
61 |
62 |
63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplateVSIX/source.extension.vsixmanifest: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular2VisualStudioTemplate 6 | Template for creating Angular 2 web app with ASP.NET 4.6 WebApi 2 backend 7 | 1488254936_angular.png 8 | Angular 2, ASP.NET 4.6, WebApi 2 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Angular2VisualStudioTemplateVSIX/stylesheet.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | color: #1E1E1E; 6 | font-size: 13px; 7 | font-family: "Segoe UI", Helvetica, Arial, sans-serif; 8 | line-height: 1.45; 9 | word-wrap: break-word; 10 | } 11 | 12 | /* General & 'Reset' Stuff */ 13 | 14 | 15 | .container { 16 | width: 980px; 17 | margin: 0 auto; 18 | } 19 | 20 | section { 21 | display: block; 22 | margin: 0; 23 | } 24 | 25 | h1, h2, h3, h4, h5, h6 { 26 | margin: 0; 27 | } 28 | 29 | /* Header,
30 | header - container 31 | h1 - project name 32 | h2 - project description 33 | */ 34 | 35 | #header { 36 | color: #FFF; 37 | background: #68217a; 38 | position:relative; 39 | } 40 | #hangcloud { 41 | width: 190px; 42 | height: 160px; 43 | background: url("../images/bannerart03.png"); 44 | position: absolute; 45 | top: 0; 46 | right: -30px; 47 | } 48 | h1, h2 { 49 | font-family: "Segoe UI Light", "Segoe UI", Helvetica, Arial, sans-serif; 50 | line-height: 1; 51 | margin: 0 18px; 52 | padding: 0; 53 | } 54 | #header h1 { 55 | font-size: 3.4em; 56 | padding-top: 18px; 57 | font-weight: normal; 58 | margin-left: 15px; 59 | } 60 | 61 | #header h2 { 62 | font-size: 1.5em; 63 | margin-top: 10px; 64 | padding-bottom: 18px; 65 | font-weight: normal; 66 | } 67 | 68 | 69 | #main_content { 70 | width: 100%; 71 | display: flex; 72 | flex-direction: row; 73 | } 74 | 75 | 76 | h1, h2, h3, h4, h5, h6 { 77 | font-weight: bolder; 78 | } 79 | 80 | #main_content h1 { 81 | font-size: 1.8em; 82 | margin-top: 34px; 83 | } 84 | 85 | #main_content h1:first-child { 86 | margin-top: 30px; 87 | } 88 | 89 | #main_content h2 { 90 | font-size: 1.4em; 91 | font-weight: bold; 92 | } 93 | p, ul { 94 | margin: 11px 18px; 95 | } 96 | 97 | #main_content a { 98 | color: #06C; 99 | text-decoration: none; 100 | } 101 | ul { 102 | margin-top: 13px; 103 | margin-left: 18px; 104 | padding-left: 0; 105 | } 106 | ul li { 107 | margin-left: 18px; 108 | padding-left: 0; 109 | } 110 | #lpanel { 111 | width: 620px; 112 | float: left; 113 | } 114 | #rpanel ul { 115 | list-style-type: none; 116 | width: 300px; 117 | } 118 | #rpanel ul li { 119 | line-height: 1.8em; 120 | } 121 | #rpanel { 122 | background: #e7e7e7; 123 | width: 360px; 124 | float: right; 125 | } 126 | 127 | #rpanel div { 128 | width: 300px; 129 | } 130 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular2VisualStudioTemplate 2 | Template for creating Angular 2 web app with Visual Studio 3 | 4 | Holds the TypeScript source code of the [angular.io quickstart](https://angular.io/docs/ts/latest/quickstart.html), for good starting Angular 2 client app with ASP.NET WebApi 2 backend. 5 | 6 | 7 | This template create ASP.NET WebApi 2 backend with Angular 2 client. 8 | Holds the TypeScript source code of the angular.io quickstart,for good starting Angular 2 client app with ASP.NET WebApi 2 backend. 9 | 10 | 11 | 12 | For creating angular 2 component you can use [template](https://marketplace.visualstudio.com/items?itemName=Mino.Angular2ComponentTemplate). 13 | 14 | See official Angular.io [documentation](https://angular.io/docs/ts/latest/). 15 | 16 | See cookbook [Visual Studio QuickStart](https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html). 17 | 18 | You can install from [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Mino.Angular2VisualStudioTemplate) 19 | 20 | [Miňo Martiniak](https://twitter.com/MinoMartiniak) 21 | -------------------------------------------------------------------------------- /UpgradeLog.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Burgyn/Angular2VisualStudioTemplate/1c4f348bdd576fdadf099e317c4b3aaedd00f9a4/UpgradeLog.htm --------------------------------------------------------------------------------