Getting Started With Ionic Blank App Using Visual Studio 2015

Introduction

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 mobile developers to build applications for all major mobile platforms, using HTML, CSS, and JavaScript technologies.

What is the 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 a native look and feel.

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

Why use the Ionic Framework?

With Ionic, we wanted to build an 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 uses AngularJS MVC architecture to build rich single page Applications, which are optimized for mobile devices.
• CSS components: With a native look and feel, these components offer almost all the elements, that mobile Applications 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 a NodeJS utility, that 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 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 a 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 native ones, but 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 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 an Ionic Blank App, using the 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 the Tools menu, and choose the Extension and Updates option.

Step 2. Search for Install

Now, the 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 the Download button, and Install.

Now, it's downloading.

Now, click on the install button.

Step 3. Create an Ionic App

Let’s be ready to create a 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 the Project name as ionic-App1 and click the OK button.

Step 5. Solution Bar

Afterward, we create a 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 package 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 is used 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.