{"id":7665,"date":"2016-08-03T10:02:00","date_gmt":"2016-08-03T18:02:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/?p=7665"},"modified":"2019-10-24T17:38:45","modified_gmt":"2019-10-25T00:38:45","slug":"create-high-quality-mobile-apps-with-ionic-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/create-high-quality-mobile-apps-with-ionic-visual-studio\/","title":{"rendered":"Create high quality mobile apps with Ionic &amp; Visual Studio"},"content":{"rendered":"<p>Are you a web developer building mobile applications today? Are you considering joining the ranks of web developers moving beyond the mobile web to mobile app development? If so, then we have a treat for you \u2013 <b>a new set of Visual Studio templates, building on top of the <\/b><a href=\"http:\/\/cordova.io\"><b>Apache Cordova<\/b><\/a><b> platform, <\/b><a href=\"http:\/\/www.ionicframework.com\"><b>Ionic UI framework<\/b><\/a><b>, and using the <\/b><a href=\"http:\/\/www.typescriptlang.org\/\"><b>TypeScript<\/b><\/a><b> language.<\/b><\/p>\n<p>If you\u2019re not familiar with it already, Ionic is a hugely popular starting point for Cordova developers; helping you build apps for Android, iOS, and Windows 10 devices with a great user experience. Native SDKs provide a set of ready-made UI controls that are optimized for mobile devices. HTML, on the other hand, only provides a set of primitives \u2013 essentially rectangles \u2013 to draw your UI. Ionic delivers HTML-based controls for the mobile developer. Do you need a tab control? Ionic\u2019s got it. Do you need a listview? Ionic\u2019s got it\u2026 and more.<\/p>\n<p>Our <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkId=398477\">Tools for Apache Cordova<\/a> (TACO) team, has been working closely with the Ionic team over the past year to make sure Visual Studio developers have a first-class experience when using the Ionic framework and the TypeScript language, which is the language of choice for developing with the upcoming <a href=\"http:\/\/ionicframework.com\/docs\/v2\/\">Ionic 2<\/a> framework. This week, we\u2019re releasing two new sets of Ionic templates using the TypeScript language:<\/p>\n<ul>\n<li>A brand new set of <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/b21470f5-d29f-44a1-8f4b-8a3f96ac5860\">Ionic 2 (Beta 10) Templates<\/a><\/li>\n<li>An update to the existing <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/4e44ba8b-a4c8-4106-b70e-00d63241a54a\">Ionic 1 Templates<\/a>, adding TypeScript support<\/li>\n<\/ul>\n<p>Download them now by clicking the links above, or read on to learn a bit more about them<\/p>\n<h2>Try the future today, with Ionic 2<\/h2>\n<p>The Ionic team is working tirelessly toward an RC release of the next version of Ionic, based on Angular 2. Our team is likewise working on having great Ionic 2 support in Visual Studio and today we\u2019re sharing with you an early version of Ionic 2 templates, based on the current Ionic 2 Beta 10 release.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/08\/2016-08-03-VS-TACO-Ionic-Templates-Tab-Template.png\" width=\"227\" height=\"424\" \/><\/p>\n<p>This set of templates includes the same three templates as the Ionic 1 release described above:<\/p>\n<ul>\n<li>Blank<\/li>\n<li>SideMenu<\/li>\n<li>Tabs<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/08\/2016-08-03-VS-TACO-Ionic-Templates-New-TS-template.png\" width=\"548\" height=\"320\" \/><\/p>\n<p>Our team is releasing these templates as an experiment in Visual Studio 2015 while working to make an excellent Ionic 2 developer experience in Visual Studio \u201c15\u201d &#8211; the next version of Visual Studio.<\/p>\n<p>There are a few rough edges in the developer experience, which are noted in the Project Readme page you\u2019ll see when first creating a project with the templates. Most notably, <b>you\u2019ll need to do the following when using these Ionic 2 templates<\/b>:<\/p>\n<ul>\n<li>Install <a href=\"https:\/\/go.microsoft.com\/fwlink\/?LinkId=691129\">Update 3 or later of Visual Studio 2015<\/a><\/li>\n<li>Install the <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/c94a02e9-f2e9-4bad-a952-a63a967e3935\">latest release of the ASP.NET Web tooling<\/a><\/li>\n<li>After creating your project for the first time, wait for the \u201c(Restoring)\u201d message to disappear from the dependencies item in the Solution Explorer<\/li>\n<li>Before building, open the Task Runner Explorer from the <b>View | Other Windows | Task Runner Explorer<\/b> menu. This will enable Visual Studio to run the custom Gulp build script used by this template<\/li>\n<\/ul>\n<p>To learn more about the framework and how to use these beta templates, see our newly released <a href=\"https:\/\/aka.ms\/ionic2vstutorial\">Getting Started with Ionic 2<\/a> tutorial!<\/p>\n<h2>TypeScript and Ionic 1; better tooling through types<\/h2>\n<p>For a while now, <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/4e44ba8b-a4c8-4106-b70e-00d63241a54a\">Ionic 1 templates for JavaScript devs<\/a> have been available to TACO developers. With this update we made some minor updates to the JavaScript templates and added a set of new templates using the TypeScript programming language.<\/p>\n<p>The same three Ionic templates are now available for JavaScript and TypeScript developers:<\/p>\n<ul>\n<li>Blank<\/li>\n<li>Side Menu<\/li>\n<li>Tabs<\/li>\n<\/ul>\n<p>Once installed, you\u2019ll find these from the <b>File | New Project\u2026<\/b> menu, under the <b>JavaScript | Apache Cordova Apps<\/b> and <b>TypeScript | Apache Cordova Apps<\/b> categories.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/08\/2016-08-03-VS-TACO-Ionic-Templates-New-Ionic-1-template3.png\" width=\"567\" height=\"325\" \/><\/p>\n<p>With TypeScript support now included, you get the same tooling benefits as other TypeScript developers. Some of the highlights include:<\/p>\n<ul>\n<li>High accuracy IntelliSense for your code<\/li>\n<li>Refactoring tools<\/li>\n<li>Find References throughout your source<\/li>\n<li>Move through your code with symbol-based navigation<\/li>\n<\/ul>\n<p>To learn more about working with Visual Studio &amp; Ionic 1, check out our <a href=\"http:\/\/taco.visualstudio.com\/en-us\/docs\/tutorial-ionic\/\">Getting Started with Ionic 1 guide<\/a>.<\/p>\n<h2>Help us make the Ionic experience great!<\/h2>\n<p>Please try the <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/b21470f5-d29f-44a1-8f4b-8a3f96ac5860\">Ionic 2<\/a> and <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/4e44ba8b-a4c8-4106-b70e-00d63241a54a\">Ionic 1<\/a> TypeScript templates and let us know what you think! To learn more about working with these templates read the <a href=\"https:\/\/aka.ms\/ionic2vstutorial\">Getting Started with Ionic 2<\/a> and <a href=\"http:\/\/taco.visualstudio.com\/en-us\/docs\/tutorial-ionic\/\">Getting Started with Ionic 1<\/a> tutorials.<\/p>\n<p>You can post comments directly on the download pages for these extensions, or send us <a href=\"mailto:vscordovatools@microsoft.com\">direct emails<\/a>, <a href=\"http:\/\/stackoverflow.com\/tags\/visual-studio-cordova\">talk with us on Stack Overflow<\/a>, <a href=\"http:\/\/twitter.com\/vscordovatools\">send us a tweet on Twitter<\/a>, or provide feedback for our documentation directly on our <a href=\"http:\/\/taco.visualstudio.com\/\">documentation site<\/a>.<\/p>\n<table border=\"0\" width=\"631\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"200\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/08\/Jordan-Matthiesen.jpg\" width=\"186\" height=\"186\" \/><\/td>\n<td valign=\"top\" width=\"388\"><b>Jordan Matthiesen (<\/b><a href=\"http:\/\/twitter.com\/jmatthiesen\"><b>@JMatthiesen<\/b><\/a><b>)<\/b><\/p>\n<p>Program Manager, JavaScript mobile developer tools<\/p>\n<p>Jordan works at Microsoft on JavaScript tooling for web and mobile application developers. He\u2019s been a developer for over 18 years, and currently focuses on talking to as many awesome mobile developers as possible. When not working on dev tools, you\u2019ll find him enjoying quality time with his wife, 4 kids, dog, cat, and a cup of coffee.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Are you a web developer building mobile applications today? Are you considering joining the ranks of web developers moving beyond the mobile web to mobile app development? If so, then we have a treat for you \u2013 a new set of Visual Studio templates, building on top of the Apache Cordova platform, Ionic UI framework, [&hellip;]<\/p>\n","protected":false},"author":2302,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4980,1028,155,1029],"tags":[237,85,197,880,137,376,124,125],"class_list":["post-7665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java","category-mobile","category-visual-studio","category-web","tag-net","tag-asp-net","tag-cordova","tag-get-started","tag-html","tag-java","tag-javascript","tag-typescript"],"acf":[],"blog_post_summary":"<p>Are you a web developer building mobile applications today? Are you considering joining the ranks of web developers moving beyond the mobile web to mobile app development? If so, then we have a treat for you \u2013 a new set of Visual Studio templates, building on top of the Apache Cordova platform, Ionic UI framework, [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/7665","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\/2302"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=7665"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/7665\/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=7665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=7665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=7665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}