Getting Started With Ionic Tabs App Using Visual Studio 2015

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

Output Main Screen

tab-dash.html

App

Output 1Chatting Thread

tab-chats.html

App

Output 2 Individual chatting

chat-detail.html

App

Output 3 User account details

tab-account.html

App

Conclusion

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