How to create vertical menu with sub menu using CSS

HTML Part:

<div id="menuwrapper">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Product 1</a>
                    <ul>
                        <li><a href="#">Sub Product 1</a></li>
                        <li><a href="#">Sub Product 2</a></li>
                        <li><a href="#">Sub Product 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
            </ul>
        </li>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="#">Faqs</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Where are we?</a></li>
            </ul>
        </li>
        <li><a href="#">Help</a>
    </ul>
</div>


CSS Part:
/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    background-color:#7f95db;
    border-bottom:solid 1px white;
    width:150px;
    cursor:pointer;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#6679e9;
    position:relative;
}

/* We apply the link style */
#menuwrapper ul li a{
    padding:5px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:150px;
    top:0px;
    display:block;
}

/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{
    background-color:#cae25a;
}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
    background-color:#b1b536;
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:#454444;
    display:inline-block;
    width:120px;
}

/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
    position:absolute;
    display:none;
}

/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{
    display:block;
    left:150px;
    top:0;
}

/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{
    background:#86d3fa;
}

/* We change the background color for the level 3 submenu when hovering the menu */

#menuwrapper ul li:hover ul li:hover ul li:hover{
    background:#358ebc;
}

/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{
    color:#ffffff;
}

/* Clear float */
.clear{
    clear:both;

}

How to check internet Connection using Ionic V 1

Add Network information cordova plugin

Syntax:   

cordova plugin add cordova-plugin-network-information

// Check for network connection
    if(window.Connection) {
      if(navigator.connection.type == Connection.NONE) {
        $ionicPopup.confirm({
          title: 'No Internet Connection',
          content: 'Please check your Internet connection and try again.'

        })
        .then(function(result) {
          if(!result) {
            ionic.Platform.exitApp();
          }
        });
      }
    }

Note: You must test only mobile.

Ionic Get Current date [Get current date using Angularjs]

Show Full Date: (Method 1)

$scope.currDate = new Date();

alert($scope.currDate )

Output like this:
Wed Aug 16 2017 12:11:06 GMT+0530 (India Standard Time)



Show Full Date: (Method 2)

var date = new Date();

$scope.FromDate = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' +
date.getDate()).slice(-2);

Output like this:
2017-08-16


Get Current Date Only:
var date = new Date();

$cur_date = date.getDate();
alert($cur_date)

Get Current Month Only:
var date = new Date();
$cur_mon = date.getMonth() + 1;
alert($cur_mon)

Get Current Year:
var date = new Date();
$cur_year = date.getFullYear();
alert($cur_year)

Error with $http.get in angularJS — Response :Success & Error ionic

// Simple GET request example:

$http({

  method: 'GET',

  url: '/someUrl'

}).then(function successCallback(response) {

    // this callback will be called asynchronously

    // when the response is available

     var data = response.data;

    var status = response.status;

    var statusText = response.statusText;

    var headers = response.headers;

    var config = response.config;

    $scope.user = data;

    console.log(data);

  }, function errorCallback(response) {

    // called asynchronously if an error occurs

    // or server returns response with an error status.

     var data = response.data;

    var status = response.status;

    var statusText = response.statusText;

    var headers = response.headers;

    var config = response.config;

    $scope.user = data;

    console.log(data);

  });

More Details: 

https://docs.angularjs.org/api/ng/service/$http

Ionic 3 - Syntax for ionic version 3

Ionic 3 CLI Syntax

Check the installed version of Node.js:
npm version

Check the installed version of Git:
git --version

Check ionic version Details:
ionic info

Check Java version:
java -version

Install Cordova:
npm install -g cordova ionic

Ionic Framework Installation:
npm install -g ionic

*****************************************************************
Create New App(Name: samApp)

Syntax:
ionic start [<name>] [<template>]
name ..................... The name of your project directory
template ................. The starter template to use (e.g. blank, tabs; use --list to see all)

Examples:
    $ ionic start
    $ ionic start --list
    $ ionic start samApp blank
    $ ionic start samApp tabs --cordova
    $ ionic start samApp blank --type=ionic1

The Starter Ionic Template:
tabs ............... ionic-angular A starting project with a simple tabbed interface
blank .............. ionic-angular A blank starter project
sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.
conference ......... ionic-angular A project that demonstrates a realworld application
tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
aws ................ ionic-angular AWS Mobile Hub Starter
tabs ............... ionic1 A starting project for Ionic using a simple tabbed interface
blank .............. ionic1 A blank starter project for Ionic
sidemenu ........... ionic1 A starting project for Ionic using a side menu with navigation in the content area
maps ............... ionic1 An Ionic starter project using Google Maps and a side menu


*****************************************************************

Start a local dev server for app dev/testing:

ionic serve
Examples:
$ ionic serve -lcs
$ ionic serve --lab -lcs
More Details: http://ionicframework.com/docs/cli/serve/

Stop Ionic Serve

Ctrl + C

Manage Cordova platform targets:

Synopsis:
$ ionic cordova platform [<action>] [<platform>]
Examples
$ ionic cordova platform
$ ionic cordova platform add ios
$ ionic cordova platform add android
$ ionic cordova platform rm android

Generate pipes, components, pages, directives, providers, and tabs 

(ionic-angular >= 3.0.0)

Synopsis:
$ ionic generate [<type>] [<name>]
Examples:
$ ionic generate
$ ionic generate component
$ ionic generate directive
$ ionic generate page
$ ionic generate pipe
$ ionic generate provider
$ ionic generate tabs
$ ionic generate component foo
$ ionic generate page Login
$ ionic generate pipe MyFilterPipe

Manage Cordova plugins:

Synopsis:
$ ionic cordova plugin [<action>] [<plugin>]
Examples:
$ ionic cordova plugin
$ ionic cordova plugin add cordova-plugin-inappbrowser@latest
$ ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID=XXXXX
$ ionic cordova plugin rm cordova-plugin-camera
More: http://ionicframework.com/docs/cli/cordova/plugin/

Automatically create icon and splash screen resources

Synopsis:
$ ionic cordova resources [<platform>]
Examples:
$ ionic cordova resources
$ ionic cordova resources ios
$ ionic cordova resources android
More: http://ionicframework.com/docs/cli/cordova/resources/

Build (prepare + compile) an Ionic project for a given platform

Synopsis:
$ ionic cordova build [<platform>]
Examples:
$ ionic cordova build ios
$ ionic cordova build ios --prod --release
$ ionic cordova build android
$ ionic cordova build android --prod --release

Login with your Ionic ID:

Synatx: ionic login [<email>] [<password>]
Example: ionic login hello@example.com secret

Upload a new snapshot of your app:

Synopsis: $ ionic upload 
Examples:
$ ionic upload
$ ionic upload --deploy=dev
$ ionic upload --deploy=production --note="add menu entry" --metadata='{"custom_data":true}'

*****************************************************************

Ionic Publishing Part:** Click here

Remove Console:
$ ionic cordova plugin rm cordova-plugin-console

Production Release Builds: (To run or build your app for production, run)
ionic cordova build --release android

Release:
ionic cordova build --release android

*****************************************************************

Ionic Clear:

npm cache clear

npm cache clean -f

npm install npm -g

Ionic Update:

npm install -g cordova

npm install -g ionic@latest

Ionic Uninstall:
npm uninstall node

npm uninstall -g cordova
npm uninstall -g ionic

npm uninstall cordova ionic


*****************************************************************


More Details: http://ionicframework.com/docs/cli/