Getting Started With Ionic Blank App Using Visual Studio 2015

Before reading this article, please go through the article's link, mentioned below.

• Quick Start On Apache Cordova Using Visual Studio 2015

Apache Cordova

Apache Cordova is an open source project, which aims at allowing the mobile developers to build the Applications for all major mobile platforms, using HTML, CSS and JavaScript technologies.

What is Ionic Framework?

Ionic is a powerful HTML5 SDK, which helps you to build native-feeling mobile apps, using Web technologies like HTML, CSS and JavaScript.

Ionic is a popular front-end JavaScript framework to develop cross-platform mobile apps, using Apache Cordova. It’s an open source framework, which is used to develop mobile Applications. It provides tools and Services to build mobile UI with native look and feel.

Ionic framework needs native wrapper to be able to run on the mobile devices. You can use the Ionic Framework in Visual Studio 2015 to easily create and debug cross-platform Ionic apps.

Why use Ionic Framework?

With Ionic, we wanted to build HTML5 mobile development framework, which was focused on native or hybrid apps instead of mobile Websites.

Ionic is an open source having a permissive open source license that can be used in both commercial and open source apps, but by cultivating a strong community around the project.

Ionic Icon



Ionic Framework Features

The important features of Ionic are listed below.

• AngularJS
  Ionic is using AngularJS MVC architecture to build rich single page Applications, which are optimized for mobile devices.
  
  
• CSS components
  With native look and feel, these components offer almost all the element, which mobile Application needs. Components default styling can be easily overridden to accommodate your own design.
  
  
• JavaScript components
  These components are extending CSS components with JavaScript functionalities to cover all the mobile elements, which can't be done only with HTML and CSS.
  
  
• Cordova Plugins
  Apache Cordova plugins offer API, required for using native device functions with JavaScript code.
  
  
• Ionic CLI
  This is NodeJS utility, which is powered with the commands for starting, building, running and emulating Ionic Applications.
  
  
• Ionic View
  Very useful platform for uploading, sharing and testing your Application on the native devices.

Ionic Framework Advantages

• Ionic is used for hybrid app development. This means that you can package your Applications for IOS, Android, Windows Phone and Firefox OS, which can save a lot of working time.
  
• Starting your app is very easy since Ionic provides useful pre-generated app setup with simple layouts.
  
• The apps are built in a very clean and modular way, so it's maintainable and easy to update.

Ionic Framework Limitations

• Testing can be tricky since the Browser doesn't always give you the right information about the phone environment. There are so many different devices and platforms and you usually need to cover most of them.
  
• It can be hard to combine different native functionalities. You will run into plugin compatibility issues several times, which leads to building errors, which are hard to debug.
  
• Hybrid apps tend to be slower than the native ones, but the mobile technologies are improving fast. Thus, it will not be an issue in the near future.

Building Hybrid Apps with Ionic

Now, you must have got an understanding of what Ionic is and why it exists. Now, you are ready to start building your first app with it. Let’s see how to install and start building with Ionic.

Prerequisites

• Visual Studio 2015.
• Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below to build a Ionic Blank App, using Ionic Framework.

Step 1 Install the Ionic Framework 

Prior to installing the Ionic Framework, we must Install the most recent version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app.

In Visual studio, click on Tools menu, choose Extension and Updates option.



Step 2 Search for Install

Now, Extension and Update Window will open. Go to the Search Bar and search the keyword Ionic. It will search the Ionic templates for Visual Studio, click on Download button and Install.



Now, its downloading.



Now, click on install button.



Step 3 Create an Ionic App

Let’s be ready to create New Project. Open Visual Studio 2015 and click File -> New -> Project Option for New Apache Cordova App, using Ionic Framework.



Step 4 Give the Project Name

New Project Window will open. Subsequently, you can select an Installed -> Template -> Java Script -> Apache Cordova Apps ->Ionic JavaScript Blank.

Type Project name ionic-App1 and click OK button.



Step 5 Solution Bar

Afterwards, we create the project. Our solution should resemble, as shown below.

 

This table gives the basic idea of how we might use each one.

 

File	Why is it in your project?
bower.json	This file manages the Bower packages dependencies of our app.
build.json	This file contains parameters that Visual Studio uses to build a signed Android package.
config.xml	Contains the settings of our app.
taco.json	Defines which version of the Cordova CLI Visual Studio uses to build the project.

Step 6 Run the Application

Now, we are ready to run our Project. Thus, click the Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).

 

Output



Conclusion

I hope, you understood how to start the Ionic blank app, using Visual Studio 2015 and how to run it.