{"id":3341,"date":"2015-03-12T09:00:00","date_gmt":"2015-03-12T09:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2015\/03\/12\/a-preview-of-angular-2-and-typescript-in-visual-studio\/"},"modified":"2022-05-18T06:00:21","modified_gmt":"2022-05-18T13:00:21","slug":"a-preview-of-angular-2-and-typescript-in-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/a-preview-of-angular-2-and-typescript-in-visual-studio\/","title":{"rendered":"A Preview of Angular 2 and TypeScript in Visual Studio"},"content":{"rendered":"<p>Last week, at <a href=\"http:\/\/www.ng-conf.org\/\">ng-conf<\/a>, the Angular team at Google provided the web developer world with an update on the state of <a href=\"http:\/\/www.angular.io\/\">Angular 2<\/a>. They were joined on stage by a member of the TypeScript team, <a href=\"http:\/\/www.twitter.com\/jntrnr\">Jonathan Turner<\/a>, to also announce that <a href=\"http:\/\/blogs.msdn.com\/b\/typescript\/archive\/2015\/03\/05\/angular-2-0-built-on-typescript.aspx\">Angular 2 will be built using TypeScript<\/a>. Jonathan then <a href=\"https:\/\/www.youtube.com\/watch?v=Xw93oketp18&amp;list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7\">demoed<\/a> a preview of the upcoming TypeScript 1.5 release via an Angular 2 sample application.<\/p>\n<p>This post will walk you through the Visual Studio editor support for the new language features in TypeScript as well as Angular 2.<\/p>\n<h2>Opening the Angular 2 demo project in Visual Studio<\/h2>\n<p>At the time I&rsquo;m writing this blog post, there isn&rsquo;t an official preview version of Angular with TypeScript that you can download via NuGet to use in your projects. To help you experiment with the tooling experience in Visual Studio, we&rsquo;ve built a <a href=\"https:\/\/github.com\/Microsoft\/ngconf2015demo\">demo project<\/a> with TypeScript 1.5 and Angular 2 that you can download and use today.<\/p>\n<p>You can use either <a href=\"https:\/\/www.visualstudio.com\/downloads\/download-visual-studio-vs\">Visual Studio 2013<\/a> or <a href=\"https:\/\/www.visualstudio.com\/en-us\/news\/vs2015-vs.aspx\">Visual Studio 2015 CTP 6<\/a> to explore the demo. To get started:<\/p>\n<ul>\n<li>For Visual Studio 2013, you&rsquo;ll to need <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/2d42d8dc-e085-45eb-a30b-3f7d50d55304\">install TypeScript 1.4 support<\/a>. If you already have the <a href=\"https:\/\/www.visualstudio.com\/en-us\/news\/vs2015-vs.aspx\">Visual Studio 2015 CTP<\/a>, proceed to step 2.<\/li>\n<li>Clone the <a href=\"https:\/\/github.com\/Microsoft\/ngconf2015demo\">ngconf2015demo repository<\/a> from GitHub. I&rsquo;m placing it in my local c:src folder. From a command prompt:<\/li>\n<\/ul>\n<blockquote>\n<p><span style=\"font-family: consolas;font-size: small\">C:&gt; cd src<\/span><\/p>\n<p><span style=\"font-size: small\"><span style=\"font-family: consolas\">C:src&gt; git clone <\/span><a href=\"https:\/\/github.com\/Microsoft\/ngconf2015demo.git\"><span style=\"font-family: consolas\">https:\/\/github.com\/Microsoft\/ngconf2015demo.git<\/span><\/a><\/span><\/p>\n<\/blockquote>\n<ul>\n<li>Follow the <a href=\"https:\/\/github.com\/Microsoft\/ngconf2015demo\/blob\/master\/readme.md\">instructions<\/a> from the project site to update Visual Studio with support for TypeScript 1.5. I&rsquo;m going to use Visual Studio 2015 for this post, so I&rsquo;ll follow the directions to update for that version.<\/li>\n<li>Open the demo project in Visual Studio. You can use the File | Open | Web Site&hellip; menu and open the c:srcngconf2015demo folder cloned from GitHub. Here&rsquo;s how the solution explorer appears in Visual Studio after doing this:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/0310.1Angular2TypeScriptSolutionExplorerafterDemoProjectisopenedinVisualStudio_thumb_40438D6A.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border-width: 0px\" title=\"Solution Explorer after Demo Project is opened in Visual Studio\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/0310.1Angular2TypeScriptSolutionExplorerafterDemoProjectisopenedinVisualStudio_thumb_40438D6A.png\" alt=\"Solution Explorer after Demo Project is opened in Visual Studio\" width=\"229\" height=\"413\" border=\"0\" \/><\/a><\/p>\n<p>Because this demo uses pre-release features of the TypeScript compiler, it&rsquo;s using a custom version of the compiler that is copied into the tsc folder of this project. This means you can&rsquo;t easily build and run this project from Visual Studio (we&rsquo;re working on fixing this by the time TypeScript 1.5 is released.) For now, you can explore the editor support in Visual Studio and use the command line to build and preview the project following the directions on the <a href=\"https:\/\/github.com\/Microsoft\/ngconf2015demo\/blob\/master\/readme.md\">ngconf2015demo project site<\/a>.<\/p>\n<h2>Editing an Angular 2 application with TypeScript 1.5<\/h2>\n<p>Now that we&rsquo;re all set up, let&rsquo;s look at how Visual Studio and the new language features in TypeScript 1.5 will help you build apps using Angular 2.<\/p>\n<h2>Referencing Angular modules<\/h2>\n<p>When building an Angular 2 app, you&rsquo;ll start by importing core Angular modules for use in the app. You can see an example of this in the todo.ts file provided in the TodoMVC sample:<\/p>\n<p><span style=\"font-family: consolas;font-size: small\"><span style=\"color: #0000ff\">import<\/span> {Component, Template} from <span style=\"color: #800000\">&#8216;annotations&#8217;<\/span>; <br \/><span style=\"color: #0000ff\">import<\/span> {bootstrap, Foreach} from <span style=\"color: #800000\">&#8216;angular2\/angular2&#8217;<\/span>;<\/span><\/p>\n<p>As this is pre-release code, the imports are likely to change in the final version of Angular 2. The important thing to note is that the import code you see here is written using the module syntax for the next version of the JavaScript language, ECMAScript 6 (also known as ES6). TypeScript 1.5 provides full support for ES6 modules.<\/p>\n<p>You&rsquo;ll see that we&rsquo;re importing an Angular Component annotation, which is an important concept in Angular 2 apps (more about Components in a moment). In this case, you may be interested in understanding what the Component annotation looks like, Visual Studio&rsquo;s code navigation features can help here. For example, if you right-click on Component and choose &ldquo;Peek Definition&rdquo;:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/0654.2Angular2TypeScriptMenutoChoosePeekDefinition_thumb_629B22E3.png\"><img decoding=\"async\" style=\"margin-left: 0px;margin-right: 0px;border-width: 0px\" title=\"Menu to Choose Peek Definition\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/0654.2Angular2TypeScriptMenutoChoosePeekDefinition_thumb_629B22E3.png\" alt=\"Menu to Choose Peek Definition\" width=\"423\" height=\"144\" border=\"0\" \/><\/a><\/p>\n<p>You&rsquo;ll see the following:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/3884.3Angular2TypeScriptPeekDefitionWindow_thumb_3E09955F.png\"><img decoding=\"async\" style=\"margin-left: 0px;margin-right: 0px;border-width: 0px\" title=\"Peek Defition Window\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/3884.3Angular2TypeScriptPeekDefitionWindow_thumb_3E09955F.png\" alt=\"Peek Defition Window\" width=\"543\" height=\"210\" border=\"0\" \/><\/a><\/p>\n<p>If you&rsquo;d rather open up the full file where this annotation is defined, you can also use &ldquo;Go to Definition&rdquo; on the module import statement and Visual Studio will open the file that contains it:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/3480.4Angular2TypeScriptToopenthefullfileclickonGoToDefinition_thumb_04868568.png\"><img decoding=\"async\" style=\"margin-left: 0px;margin-right: 0px;border-width: 0px\" title=\"To open the full file click on Go To Definition\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/3480.4Angular2TypeScriptToopenthefullfileclickonGoToDefinition_thumb_04868568.png\" alt=\"To open the full file click on Go To Definition\" width=\"401\" height=\"106\" border=\"0\" \/><\/a><\/p>\n<h2>Defining Components<\/h2>\n<p>In Angular 2, applications are based upon components, which structure and represent the UI. You can see in our sample ToDo MVC project, in todo.ts, where the main TodoApp component is defined.<\/p>\n<p>Annotations are a new feature in TypeScript 1.5 that will let you attach additional data to classes, such as configuration metadata. This is also a language feature being discussed for the JavaScript language as part of the ECMAScript 7 specification process. Angular 2 with TypeScript leverages annotations heavily in its developer experience.<\/p>\n<p>A component is a class decorated with an @Component annotation, which identifies to Angular that your class represents an Angular Component. In Visual Studio, when you&rsquo;re authoring a component, IntelliSense understands annotations and can suggest valid configuration parameters for them:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/2656.5Angular2TypeScriptIntelliSenseforAngularComponentAnnotations_thumb_001004A1.png\"><img decoding=\"async\" style=\"margin-left: 0px;margin-right: 0px;border-width: 0px\" title=\"IntelliSense for Angular Component Annotations\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/2656.5Angular2TypeScriptIntelliSenseforAngularComponentAnnotations_thumb_001004A1.png\" alt=\"IntelliSense for Angular Component Annotations\" width=\"393\" height=\"97\" border=\"0\" \/><\/a><\/p>\n<p>In this example, I&rsquo;ve invoked IntelliSense by using the Ctrl+J keyboard sequence inside of the call to @Component. Here&rsquo;s an example of a class with the @Component annotation fully defined:<\/p>\n<p><span style=\"font-family: consolas;font-size: small\">@Component({ <br \/>&nbsp;&nbsp;&nbsp; selector: <span style=\"color: #800000\">&#8216;todo-app&#8217;<\/span>, <br \/>&nbsp;&nbsp;&nbsp; componentServices: [] <br \/>}) <br \/><span style=\"color: #0000ff\">class<\/span> TodoApp {&nbsp; <br \/>}<\/span><\/p>\n<p>As you can see, the TodoApp component is configured and bound to a &lsquo;todo-app&rsquo; element on the HTML page (index.html) for the app.<\/p>\n<h2>Finding Components used in an application<\/h2>\n<p>One of the benefits of annotations is that they make it easier for tools to understand your source code. As an example, it&rsquo;s now easy to find where Components are used throughout your project. In Visual Studio, you can use the &ldquo;Find All References&rdquo; feature for an annotation to find all source code that uses that annotation:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/8623.6Angular2TypeScriptFindallReferencesforanAnnotation_thumb_34442DE7.png\"><img decoding=\"async\" style=\"margin-left: 0px;margin-right: 0px;border-width: 0px\" title=\"Find all References for an Annotation\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/8623.6Angular2TypeScriptFindallReferencesforanAnnotation_thumb_34442DE7.png\" alt=\"Find all References for an Annotation\" width=\"474\" height=\"152\" border=\"0\" \/><\/a><\/p>\n<p>And a list of all sources using the @Component annotation is then shown:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/6813.7Angular2TypeScriptResultofFindAllReferencesinFindSymbolResultswindow_thumb_6878572D.png\"><img decoding=\"async\" style=\"margin-left: 0px;margin-right: 0px;border-width: 0px\" title=\"Result of Find All References in Find Symbol Results window\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/6813.7Angular2TypeScriptResultofFindAllReferencesinFindSymbolResultswindow_thumb_6878572D.png\" alt=\"Result of Find All References in Find Symbol Results window\" width=\"555\" height=\"131\" border=\"0\" \/><\/a><\/p>\n<h2>Working with Dependencies<\/h2>\n<p>Dependency management has always been a core part of Angular, with dependency injection built-in. When using TypeScript with Angular 2, you specify dependencies between your classes simply by referencing Types. For example, the TodoApp class below depends upon an AngularFire class as part of the @Component annotation and in its constructor. When the app runs, Angular will ensure that an instance of the AngularFire type is created correctly and passed to the class constructor:<\/p>\n<p><span style=\"font-family: consolas;color: #aeaeae;font-size: small\">@Component({ <br \/>&nbsp;&nbsp;&nbsp; selector: &#8216;todo-app&#8217;, <br \/>&nbsp;&nbsp;&nbsp; componentServices: [ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style=\"color: #000000\">AngularFire<\/span> <br \/>&nbsp;&nbsp;&nbsp; ]})&nbsp;&nbsp;&nbsp; <br \/>class TodoApp { <br \/>&nbsp;&nbsp;&nbsp; todoService: FirebaseArray; <br \/>&nbsp;&nbsp;&nbsp; todoEdit: any; <\/span><\/p>\n<p><span style=\"font-family: consolas;color: #aeaeae;font-size: small\">&nbsp;&nbsp;&nbsp; <span style=\"color: #0000ff\">constructor<\/span><span style=\"color: #000000\">(sync: AngularFire) {<\/span> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.todoService = sync.asArray(); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.todoEdit = null; <br \/>&nbsp;&nbsp;&nbsp; } <br \/>}<\/span><\/p>\n<p>And, since you&rsquo;re using types to define dependencies, you can take advantage of the tooling benefits provided by a typed language like TypeScript and use refactoring tools with high confidence. For example, if you want to rename the AngularFire class in this example, you can use the &ldquo;Rename&rdquo; option in VS to change its name throughout the full project:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/0143.8Angular2TypeScriptUseRenameoptionfromContextMenutorenameAngularFieclassnamethroughouttheproject_thu_71D41C61.png\"><img decoding=\"async\" style=\"margin-left: 0px;margin-right: 0px;border-width: 0px\" title=\"Use Rename option from Context Menu to rename AngularFie class name throughout the project\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/0143.8Angular2TypeScriptUseRenameoptionfromContextMenutorenameAngularFieclassnamethroughouttheproject_thu_71D41C61.png\" alt=\"Use Rename option from Context Menu to rename AngularFie class name throughout the project\" width=\"463\" height=\"68\" border=\"0\" \/><\/a><\/p>\n<p>Visual Studio will then find and replace references for you, throughout all the files in your project:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/2625.9Angular2TypeScriptVisualStudiowillfindandreplaceallreferencesforyou_thumb_1F553C25.png\"><img decoding=\"async\" style=\"margin-left: 0px;margin-right: 0px;border-width: 0px\" title=\"Visual Studio will find and replace all references for you\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/2625.9Angular2TypeScriptVisualStudiowillfindandreplaceallreferencesforyou_thumb_1F553C25.png\" alt=\"Visual Studio will find and replace all references for you\" width=\"392\" height=\"217\" border=\"0\" \/><\/a><\/p>\n<h2>Using Angular 2 with JavaScript<\/h2>\n<p>In this post, I&rsquo;ve given you a glimpse at how Visual Studio and TypeScript 1.5 will be able to help you when building Angular 2 application. You can also build Angular 2 apps using plain old ES5 or the upcoming ES6 version JavaScript. When developing an Angular 2 app using JavaScript in Visual Studio, you&rsquo;ll get all the features of the JavaScript editor, including IntelliSense, Go to Definition, and the navigation bar. As Angular 2 solidifies, we&rsquo;ll continue to build new editor features in Visual Studio for Angular developers.<\/p>\n<h2>Looking forward to the release of Angular 2<\/h2>\n<p>Angular 2 is considered an &ldquo;Alpha Preview&rdquo; at the time of this writing, and we&rsquo;ll continue to work with the Angular team as it reaches full release quality. We want to continue to build a great experience in Visual Studio not just for TypeScript developers, but web developers in general who are working with JavaScript, HTML, and CSS.<\/p>\n<h2>Try it out and share your feedback<\/h2>\n<p>You can start experimenting with Angular 2 today, following the tutorial on the Angular website <a href=\"http:\/\/www.angular.io\">http:\/\/www.angular.io<\/a>, but be aware that the documentation doesn&rsquo;t refer to the upcoming TypeScript workflow just yet. To see a preview of Angular 2 working with TypeScript 1.5, check out the demo site at <a href=\"http:\/\/www.github.com\/microsoft\/ngconf2015demo\">http:\/\/www.github.com\/microsoft\/ngconf2015demo<\/a>. We&rsquo;d love to hear any feedback you have.<\/p>\n<p>Finally, if you want to learn more about TypeScript, install the latest TypeScript tools for <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/2d42d8dc-e085-45eb-a30b-3f7d50d55304\">Visual Studio 2013<\/a> (also included as part of <a href=\"https:\/\/www.visualstudio.com\/en-us\/news\/vs2015-vs.aspx\">Visual Studio 2015 CTP 6<\/a>) and check out the <a href=\"http:\/\/www.typescriptlang.org\/\">TypeScript website<\/a> for documentation and samples.<\/p>\n<p>&nbsp;<\/p>\n<table style=\"width: 652px\" border=\"0\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"167\"><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/4774.JordanMatthiesen_thumb_2CBB4F2B.jpg\"><img decoding=\"async\" style=\"border-width: 0px\" title=\"Jordan Matthiesen\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/03\/4774.JordanMatthiesen_thumb_2CBB4F2B.jpg\" alt=\"Jordan Matthiesen\" width=\"153\" height=\"153\" border=\"0\" \/><\/a><\/td>\n<td valign=\"top\" width=\"483\"><strong>Jordan Matthiesen <\/strong>&#8211; Program Manager, Visual Studio JavaScript tools team (<a href=\"http:\/\/www.twitter.com\/JMatthiesen\">@JMatthiesen<\/a>)<\/p>\n<p>Jordan has been at Microsoft for 3 years, working on JavaScript tooling for client application developers. Prior to this, he worked for 14 years developing web applications and products using ASP.NET\/C#, HTML, CSS, and lots and lots of JavaScript.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Last week, at ng-conf, the Angular team at Google provided the web developer world with an update on the state of Angular 2. They were joined on stage by a member of the TypeScript team, Jonathan Turner, to also announce that Angular 2 will be built using TypeScript. Jonathan then demoed a preview of the [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4980,155,1029],"tags":[237,223,85,5,136,137,376,124,125,126,196],"class_list":["post-3341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java","category-visual-studio","category-web","tag-net","tag-angularjs","tag-asp-net","tag-csharp","tag-css","tag-html","tag-java","tag-javascript","tag-typescript","tag-visual-studio-2013","tag-visual-studio-2015"],"acf":[],"blog_post_summary":"<p>Last week, at ng-conf, the Angular team at Google provided the web developer world with an update on the state of Angular 2. They were joined on stage by a member of the TypeScript team, Jonathan Turner, to also announce that Angular 2 will be built using TypeScript. Jonathan then demoed a preview of the [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/3341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=3341"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/3341\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=3341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=3341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=3341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}