Getting Started With Ionic Tabs App Using Visual Studio 2015

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

• Quick Start On Apache Cordova Using Visual Studio 2015
• Getting Started with Ionic Blank App Using Visual Studio 2015

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.



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.



Step 3

Main Screen



Step 4

Solution Bar



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.



Step 6 List of Screens

• 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



tab-chats.html



chat-detail.html



tab-account.html



tabs.html



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).



Output Main Screen

tab-dash.html



Output 1Chatting Thread

tab-chats.html



Output 2 Individual chatting

chat-detail.html



Output 3 User account details

tab-account.html



Conclusion

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