Powered by Blogger.

Saturday, January 10, 2015

Tag: , , , ,

Visual Studio Project Templates for Ionic Framework

[UPDATE: this blog was moved to a new one]

This extension was removed from Visual Studio Gallery in favor of Ionic's official one.

On my previous post I wrote about how to start a project in Ionic Creator and export it to continue with development within Visual Studio.

Today, I would like to introduce the Ionic Project Template Visual Studio Extension that I created to simplify the process and be able to have a project already setup with the basic Ionic templates from Visual Studio (of course it is not a replacement for Ionic Creator, there you can drag and drop more components and set their style, but once you get familiar with Ionic, you would probably appreciate to be able to start the project quicker and apply the style yourself). You can find the extension in the Visual Studio Gallery.

Remember that you need to have the Visual Studio Tools for Apache Cordova installed first.

How to Use the Extension

Once you have the Visual Studio Tools for Apache Cordova installed, and the Ionic Project Templates extension installed (remember to restart Visual Studio after installing the extension), just go to the File menu, then New, then New project.

The New Project dialog appears (as in the picture in the beginning of the post). Under Javascript you should now see the Ionic Project Templates installed. Just select the one you would like to start with and give it a name, a path where to save it, and optionally add it to source control as you would do with any other project.

About the Templates

The templates will provide you the basic structure that you would get when exporting them from Ionic Creator. Well, maybe a little bit more. Some are tuned and with namings to help you understand what is what (like the tabs template). They also include the project structure (Ionic Creator only gives an index.html unless you export it using the Ionic CLI), with all their dependencies and the code adjusted to run with the Visual Studio Tools for Apache Cordova. Version 1.0 of the extension comes with Ionic's Beta 14.

There are 5 templates included in the VS Extension:
  • Blank Ionic App
  • A template with a built-in login page
  • A template with a built-in side menu
  • A template with a built-in signup page
  • And a template with built-in tabs


Do you want to improve the templates and keep the extension up to date? Feel free to join the GitHub project!

In case you have comments or questions, feel free to leave a comment either here or in the Visual Studio Gallery page.

Hope it helps!

About Nereo Lopez

Hi, this is Nereo. I've spent my first professional years as .Net Software Engineer, and then moved more into Agile Methodologies. Anyway, I keep playing with all the new technologies that appear, and specially love Hybrid Apps!

10 comentarios:

  1. Will these templates work in VS2015 Preview?

    1. Hey Ramon, to be honest, I haven't tried it. Not sure if the latest VS Extension SDK provides support for it, if it is in the supported Targets I completely missed it. Have to double check.

      Anyway, if you try it first, just drop the result here :) Maybe VS 2013 extensions work out of the box for VS2015... haven't read about it.


  2. Should those be ItemTemplates that are available to add to a Cordova project?

    1. Hey Jeff. I believe I see what you mean. It would be also nice to have different views available as templates in the New Item Dialog. Notice that in this case a whole project is created with all the Ionic dependencies, and therefore, it must be a Project Template.
      Visual Studio Item Templates are items to be added to a project. I will consider adding the individual views as Item Templates as part of the Extension, but for them to work, they'll have to be added to a properly set up Ionic project.

      If you want to participate, feel free to collaborate in the Github project.

      Thanks for the great suggestion!

  3. That was great! Thanks for this extension released.

    1. Thanks kptn. Next update will arrive with Item Templates as suggested by Jeff :)

  4. great article about using extension in Visual Studio

  5. Great information. Thanks for providing us such a useful information. Keep up the good work and continue providing us more quality information from time to time.

    Hire Ionic Framework Developers

  6. This comment has been removed by a blog administrator.

  7. This comment has been removed by a blog administrator.