Getting Started With Ionic Tabs App Using Visual Studio 2015

Article

Before reading this article, please go through the article links given below.

Apache Cordova

Apache Cordova is an open source project that aims at letting mobile developers build applications for all major mobile platforms using HTML, CSS and JavaScript technologies.

Ionic Framework

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

Building Ionic Tabs Apps in Visual Studio 2015

If you want to use the Ionic tabs template your app will be built with a tab menu, header, and a couple of useful screens and functionalities.

Let’s see how to start building with Ionic Tabs Apps.

Prerequisites

Visual Studio 2015
Visual Studio Tools for Apache Cordova.

Follow the below steps to build a Ionic Tabs Apps using Ionic Framework.

Step 1 Create an Ionic Tabs App

Let’s get ready to create a new project. So Open Visual Studio 2015 and Click File -> New -> Project Option for creating Ionic Tabs Apps using Ionic Framework.

App

Step 2 Giving the Project Name

Then, New Project Window will open. There, select Installed -> Template -> JavaScript -> Apache Cordova Apps -> Ionic JavaScript Tabs.

Type Project name ionic-js-tabsApp and click the OK button.

App

Step 3

Main Screen

App

Step 4

Solution Bar

App

Let's have a quick look into every folder and file available in the above-mentioned project folder structure.

Hooks
Hooks are scripts that can be triggered during the build process.
Platforms
This is the folder where Android and IOS projects are created.
Plugins
This folder contains Cordova plugins.
Resources
This folder is used for adding resources like icon and splash screen to your project.
scss
Ionic core is built with Sass. Here is where Sass file is located.
www
www is main working folder for Ionic developers.
css
CSS styling.
img
for images.
Js
contains app's main configuration file (app.js) and AngularJS components (controllers, services, directives). All of your Javascript code will be inside these folders.
Libs
libraries will be placed here.
templates
for your HTML files.
index.html
as a starting point to your app.
- bowerrc
  bowerrc is bower configuration file.
- editorconfig
  editorconfig is editor configuration file.
- gitignore
  gitignore is used to instruct what part of the app should be ignored when you want to push your app to Git repository.
- bower.json
  bower.jsonwill contains bower components and dependencies if you choose to use bower package manager.
- gulpfile.js
  gulpfile.js is used for creating automated tasks using gulp task manager.
- config.xml
  config.xml is Cordova configuration file.
- package.json
  package.json contains information about the app, dependencies and plugins that are installed using NPM package manager.

Step 5 index.html

This is the starting screen of your app. We can add our HTML coding here.

App

Step 6 List of Screens

App

chat-detail.html
It displays the Chat details of Individual users
tab-account.html
It displays the user account details(eg. Enable/Disable)
tab-chats.html
It display all the users Thread chat
tab-dash.html
It’s the dashboard
tabs.html
It displays the tab menu. (Eg. Status, Chat, Account)

Using these html Pages, we can build the mobile apps using web technologies like HTML, CSS, and JavaScript.

tab-dash.html

App

tab-chats.html

App

chat-detail.html

App

tab-account.html

App

tabs.html

App

Step 7 Run the Application

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

App