Ionic Side Menu Example - Ionic framework

-

Before starting let's know about Ionic framework.

What is Ionic framework?

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code. Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like “Bootstrap for Native,” but with support for a broad range of common native mobile components, slick animations, and beautiful design.

Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you’d get with a native SDK on iOS or Android but didn’t really exist before on the web. Ionic also gives you some opinionated but powerful ways to build mobile applications that eclipse existing HTML5 development frameworks. Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or PhoneGap in order to run as a native app. We strongly recommend using Cordova proper for your apps, and the Ionic tools will use Cordova underneath.


Developing Hybrid Apps With Ionic

Those familiar with web development will find the structure of an Ionic app straightforward. At its core, it’s just a web page running in an native app shell! That means we can use any kind of HTML, CSS, and Javascript we want. The only difference is, instead of creating a website that others will link to, we are building a self-contained application experience.The bulk of an Ionic app will be written in HTML, Javascript, and CSS. Eager developers might also dig down into the native layer with custom Cordova plugins or native code, but it’s not necessary to get a great app. Ionic also uses AngularJS for a lot of the core functionality of the framework. While you can still use Ionic with just the CSS portion, we recommend investing in Angular as it’s one of the best ways to build browser-based applications today.

visit https://ionicframework.com/getting-started for more..

Tutorial 

This tutorial shows how to create a Side Menu in Ionic using the starter via CLI. Ionic allows developers to create ionic starter projects to get started quickly. Ionic starter project reduces the development effort and get up to the speed quickly. To create ionic project please follow the below commands. If you haven't installed Ionic follow this link https://ionicframework.com/docs/intro/installation/.

Let's get started..

Open your terminal or Command Line Interface & run the following command;

$ ionic start myApp sidemenu

In the above command I'm creating the sidemenu starter project. Ionic also provides creating tabs with tab layouts, super with over 14 ready to use page designs, blank a bare starter project with single page & tutorial for a guided starter project visit https://ionicframework.com/docs/cli/starters.html for more

Run project;

Once the project is created successfuly goto the project directory ie., myApp and execute the following command.

$ ionic lab

Ionic provides ionic lab which makes is easy for the developers to test their apps with multiple screens and platform types. It also helps to design User Interface better and flaw free designs. It also provides ionic serve which allows to create a local dev server for app dev/testing which will be launched in the browser. It watches changes if changes are done browser will be automatically reloads new the new build.  

Once the project is built successfully the browser will be automatically opened with url http://localhost:8100/ionic-lab . 

That's it now your project will be up & running. I hope this tutorial is helpful for you. If you face any difficulty please comment in the comment box below.

Subscribe to my  YouTube Channel for more tutorials & tech reviews.


Here is the video tutorial



Comments

Post a Comment

Popular posts from this blog

Custom components in Ionic 3 - Tutorial

-
Image
Ionic provides lot components by default, but if we want to customize our App more we can create custom components. Using custom components reduce a lot of development effort and makes the app development faster & optimized. This tutorial describes creating custom components and using them in the pages across the App and also describes passing data between page and custom component.  Let's get started... First, generate a component using the following command in the ionic CLI. In this scenario, we are using an input text custom component. ionic generate component my-text The above command will create my-text component under src/components directory src/components/my-text.ts import { Component } from '@angular/core'; /**  * Generated class for the MyTextComponent component.  *  * See https://angular.io/api/core/Component for more info on Angular  * Components.  */ @Component({   selector: 'my...
Read more

Ionic 3 Dynamic Side Menu Example

-
Image
Most of the web apps contain side menu or navigation drawer as the main menu and needs the content or items to be dynamic. This tutorial describes setting up dynamic items or content in the side menu using Ionic 3. In this tutorial I'm using ionic sidemenu starter project refer my previous blog for creating ionic sidemenu starter project. Let's get started... To set up dynamic items or content for side menu we can use Ionic Events  as I'm using in this example. Ionic events is a publish-subscribe style event system for sending and responding to application-level events across the app. In this example, I'm considering a dummy login and logout functionality ie., when the user logs in and logs out the items or content of the side menu will be changed. To begin let's first import Events in app.componenent.ts. app,component.ts import { Component, ViewChild } from '@angular/core'; import { Nav, Platform } from 'ionic-angular'...
Read more