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

A 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 the OK button.

Step 3. The 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, 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 to add resources like icons and splash screens to your project.
• scss: The ionic core is built with Sass. Here, the Sass file is located.
• www: www is the main working folder for Ionic developers.
• css: It is CSS styling.
• img: It is for images.
• Js contains the app's 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 for your app.
• bowerrc is the 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 the Git repository.
• bower.json will contain bower components and dependencies if you choose to use a bower package manager.
• gulpfile.js is used to create automated tasks, using gulp task manager.
• config.xml is a Cordova configuration file.
• package.json contains 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. A list of Screens is mentioned.

1. Browse.html: Here, we can browse the related items.
2. Login.html: It’s the login screen
3. Menu.html: It displays the menu, which is present in the app.
4. Playlist.html: It displays the playlist.
5. Search.html: It displays the searched items.

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

1. browse.html
   
2. login.html
   
3. Menu.html
   
4. Playlist.html
   
5. 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).

The output of the Main Screen is as follows.

Output 1. Menu List is as follows.

Output 2. The login screen is as follows.

Output 3. The browser screen is as follows.

Output 4. The 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.