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 an Ionic Tabs App using the 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, the New Project Window will open. There, select Installed -> Template -> JavaScript -> Apache Cordova Apps -> Ionic JavaScript Tabs.

Type the 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 icons and splash screens to your project.
• scss: The ionic core is built with Sass. Here is where the Sass file is located.
• www: www is the main working folder for Ionic developers.
• css: CSS styling.
• img: for images.
• Js: contains the 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.
  • bowers: bowers is the 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 the Git repository.
  • bower.json: bower.jsonwill contain Bower components and dependencies if you choose to use a Bower package manager.
  • gulpfile.js: gulpfile.js is used for creating automated tasks using gulp task manager.
  • config.xml: config.xml is a Cordova configuration file.
  • package.json: package.json contains information about the app, dependencies, and plugins that are installed using the 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 displays all the user's 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 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) to run the Application. (Apache Ripple is a free mobile simulator).

Output Main Screen
 

tab-dash.html

Output 1. Chatting Thread.

tab-chats.html

Output 2. Individual chatting.

chat-detail.html

Output 3. User account details.

tab-account.html

Conclusion

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