Getting Started With Ionic Side Menu App Using Visual Studio 2015

Before reading this article, please go through the articles 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, which aims to allow the mobile developers to build Applications for all the 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 Side Menu Apps in Visual Studio 2015: Let’s see how to start building with Ionic Side Menu Apps.

Prerequisites

• Visual Studio 2015

Visual Studio Tools for Apache Cordova.

Follow the steps mentioned below to build Ionic Side Menu Apps, using Ionic Framework.

Step 1

Create an Ionic Side Menu App

Let’s be ready to create a new project. Thus, open Visual Studio 2015 and click File -> New -> Project Option to create Ionic Side Menu Apps, using Ionic Framework.



Step 2 Giving the Project Name

New Project Window will open, where you can select an Installed -> Template -> Java Script -> Apache Cordova Apps ->Ionic JavaScript SideMenu.

Type Project Name Ionic-js-sidemenuApp and click OK button.



Step 3

Main Screen will look as follows.



Step 4

Solution Bar is as follows.



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

• Hooks-  Hooks are the scripts, which can be triggered during 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 to add resources like icon and splash screen to your project.
• scss-  Ionic core is built with Sass. Here, Sass file is located.
• www-  www is main working folder for Ionic developers.
• css-  It is CSS styling.
• img-  It is for images.
• Js contains apps main configuration file (app.js) and AngularJS components (controllers, services, directives). All your JavaScript code will be inside these folders.
• Libs-  In it, libraries will be placed.
• templates-  This is for your HTML files.
• index.html-  It is a starting point to your app.
• bowerrc is bower configuration file.
• .editorconfig is an editor configuration file.
• .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 will contain bower components and dependencies if you choose to use bower package manager.
• gulpfile.js is used to create automated tasks, using gulp task manager.
• config.xml is Cordova configuration file.
• package.json contains an information about the app, dependencies and plugins, which 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 is mentioned.



Browse.html 

Here, we can browse the related items.

Login.html

It’s the login screen

Menu.html
 
It displays the menu, which is present in the app.

Playlist.html

It display the playlist.

Search.html

It displays the searched items.

Using these HTML pages, we can build the native screens for mobile apps, using Web technologies like HTML, CSS and JavaScript.

browse.html



login.html



Menu.html



Playlist.html



Search.html



Step 7

 

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 of the Main Screen is as follows



Output 1

 

Menu List is as follows.



Output 2

 

Login screen is as follows.



Output 3

 

Browser screen is as follows.



Output 4

 

Search screen is as follows.



Conclusion

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