“Documentation of Ionic Material Design ”

“Ionic Material Design”

Created: 24.06.2016
By: Ionic Material Design Team
Email: ionicmaterialdesign@gmail.com

Thank you for purchasing Ionic Material Design. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Introduction
  2. Important Notes
  3. File & Folder Structure
  4. Getting Started
  5. How to edit a Project File.
  6. HTML Files and Structure
  7. CSS Files and Structure
  8. Javascript Files and Structure
  9. Configuration
  10. Component Detail
  11. Known Issues
  12. Compatibility
  13. Support
  14. Useful Resources
  15. Sources and Credits
  16. Version History

A) Introduction - top

Ionic Material Design is mobile application that developed by Ionic Framework under the design concept of Google Material Design including the functions of ngCorgova. The application will present the function of :

We hope Ionic Material Design will help you gain idea to developing your application and decrease your development period.

This document cover : Introduction of Project, Important Notes, File & Folder Structure, Installation guide, HTML Files and Structure, CSS Files and Structure, Javascript Files and Structure, Configuration, Component Detail, Known Issues, Compatibility, Support, Useful Resources, Sources and Credits, Version History. We encourage you to deeply read this document. If you have any difficulties. Please contact us at ionicmaterialdesign@gmail.com or via my user page contact form here.

B) Important Notes - top

  1. You’ll need a basic understanding of : To get this up and running. I’ve made it as simple as possible but you’ll still need to know the basics.
  2. If you would like to learn or find more information go to Useful Resources and Sources and Credits

C) File & Folder Structure - top

First of all when you extract files from a zip package you will found below directory :


C-1) Folder IonicMaterialDesign

This folder is a default file & folder structure of ionic framework, And place of Project Ionic Material Design please user below detail to access the HTML, CSS, JavaScript, Configuration file.


C-2) Folder Documentation

You will found file index.html : This is a documentation file.

C-3) File README

You will found information about project files and documentation directory.

D) Getting Started - top




D-1) Installing Ionic Framework - top

To run this Ionic Material Design project you have to install Ionic Framework by follow this step:

First, install LTS Mature and Dependable Version Node.js ( Do not use Stable Latest Features Version, Some of cordova plugin will not work 100% and you will lag with plugin issue). Then Downloading Ionic and installing all necessary dependencies for development by
open a new cmd.exe for windows or Terminal for mac and run : 

      npm install -g cordova
      npm install -g ionic

For mac user don't forgot to add admin permission by : 
      sudo npm install -g cordova
      sudo npm install -g ionic

Follow the Android and iOS platform guides to install required platform dependencies.
More: Getting Started with Ionic

Install Android SDK : To build locally using cordova-plugin-admobpro, to avoid build error, you need install some extras in Android SDK manager (type android sdk to launch it): Ref: AdMob Pro Installation .
This is the installation step :

  1. Open program Android Studio
  2. Click Configure then SDK Manager
  3. Click Luanch Standalone SDK Manager
  4. Select Extar Folder to check all extar SDK then click Install ..
  5. Select packages Android SDK License then select Accept License and click Install
  6. Wait until all SDK is installed then close the current window
  7. Click OK
  8. Close Android Studio

For Mac OS El Capitan
You will found the issue of cordova when add platform then it will get failed return (cordova keeps a cached version in your ${HOME}/.cordova folder.). Reference from Ionicframework Forum Add platform ios failed, However to fix this issue please following below steps.
Open a new Terminal and run : 

        rm -rf ~/.cordova

D-2) Open Project - top

After you extract files from a zip package. Move Folder IonicMaterialDesign to your local computer directory path.

D-3) Add Platform - top

To run project on IOS / Android you need to add ionic platform by following steps.
Open a new cmd.exe for windows or Terminal for mac and run : 

      cd your_project_path/IonicMaterialDesign
      ionic platform add ios 
      ionic platform add android

Ionic Framework will add platform to project for Build, Deploy or Emulate Application.

D-4) Add Ionic Plugin - top

You have to install below plugin for let the project work.

Install all plugin Set 1 and 2.

Open a new cmd.exe for windows or Terminal for mac.

Set 1 
        cd your_project_path/IonicMaterialDesign
        ionic plugin add cordova-plugin-statusbar
        ionic plugin add cordova-plugin-contacts
        ionic plugin add cordova-plugin-camera
        ionic plugin add cordova-plugin-vibration
        ionic plugin add cordova-plugin-device
        ionic plugin add cordova-plugin-console
        ionic plugin add cordova-plugin-transport-security
        ionic plugin add cordova-plugin-inappbrowser
        ionic plugin add cordova-plugin-splashscreen
        ionic plugin add cordova-plugin-admobpro
Set 2 
        ionic plugin add cordova-plugin-x-socialsharing
        ionic plugin add cordova-plugin-email-composer
        ionic plugin add ionic-plugin-keyboard
        ionic plugin add cordova-sms-plugin
        ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git
        ionic plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git
        ionic plugin add https://github.com/wymsee/cordova-imagePicker.git
        ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git#0.7.14
        ionic plugin add https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin
        ionic plugin add https://github.com/katzer/cordova-plugin-local-notifications

Now your project is ready to run.

D-5) Install Crosswalk Browser - top

Crosswalk is an open source project that allows you to specify a version of Chrome to use as your web browser in Android. The compiled app will have your code hosted inside of this Chrome webview. Performancr will better than devise browser. You can find mor information at Ionic Crosswalk

Install Crosswalk Browser

Open a new cmd.exe for windows or Terminal for mac. 

        cd your_project_path/IonicMaterialDesign
        ionic browser add crosswalk

Now your project is ready for Crosswalk.

D-6) Run and Debug On Browser - top

Use ionic serve -l to start a local development and run on browser.
Open a new cmd.exe for windows or Terminal for mac and run : 

      cd your_project_path/IonicMaterialDesign
      ionic serve -l


Important : Function that required device environment will not working on browser.
Learn More Option: Ionic Testing and Live Development

You can debug on browser by :

  1. Open google chrome
  2. Open debug console by right click and click inspect element
    Learn More : Ionic Google Chrome Inspect Element

D-7) Android Build - top

To build project to android platform you have to install android and java runtime to your computer by following instruction of :
Ionic Framework walkthrough installing Cordova, Android
Or Youtube walkthrough of Ionic Framework channel : Youtube walkthrough on installing Cordova, Android

After install success to build android you have to follow this step:
Open a new cmd.exe for windows or Terminal for mac and run : 

      cd your_project_path/IonicMaterialDesign
      ionic build android

Build result will paste at Folder platforms - This is a place of android and ios project after build ionic will paste it here.

D-8) IOS Build - top

To build project to IOS platform you can build it only mac computer by following step:

  1. Open a new cmd.exe for windows or Terminal for mac and run : 
          cd your_project_path/IonicMaterialDesign
      ionic build ios

    Build result will paste at Folder platforms - This is a place of android and ios project after build ionic will paste it here.
  2. Open your Xcode by go to your project path. your_project_path/platforms/ios/IonicMaterialDesign.xcodeproj. You can run it by select your IOS device or device emulator. and click play button.
  3. Important for Xcode 7. You have to set build option to disabled Bitcode for using Google AdMob by following step :
    • Open your xcode by go to your project path. your_project_path/platforms/ios/IonicMaterialDesign.xcodeproj.
    • Click Project Property
    • Click Build Setting
    • Change to Enable Bitcode to No

D-9) Deploy To Android device - top

To install this Ionic Material Design project to your Android device you have to follow this step:
Open a new cmd.exe for windows or Terminal for mac and run : 

      cd your_project_path/IonicMaterialDesign
      ionic run android
Important : You have to installing Cordova, Android to your computer.
Learn More : Android Build Section
Note : You have to set your android device to debug mode and connect it to computer before run command.

D-10) Deploy To IOS device - top

To install this Ionic Material Design project to your IOS device you have to follow this step:

  1. Open a new cmd.exe for windows or Terminal for mac and run : 
          cd your_project_path/IonicMaterialDesign
      ionic build ios
    Note : You have to connect ios device to computer before run command.
  2. Open your xcode by go to your project path. your_project_path/platforms/ios/IonicMaterialDesign.xcodeproj
  3. Select your IOS device or device emulator.
  4. Click build button. It will install to your IOS device

D-11) Sass Setup - top

Ionic Material Design use Powerfull tool Ionic Sass for default css file.
Directory : project_path/scss :

Setup

You have to install gulpjs is required for run sass by :
open a new cmd.exe for windows or Terminal for mac and run : 

       cd your_project_path
       npm install gulp

Then setup Sass 
       ionic setup sass

Note: After you success sass setup. It will change css reference at index.html (head section). You Need to manual set it back. by add below code to index.html file at head section 


    
    <link rel="stylesheet" href="css/ionic.app.css">
    <link rel="stylesheet" href="css/style.css">
    ...

Learn more: Ionic Sass

After save file style.scss file nodejs will convert to css file at path www/css/style.css. We reference style.css at www/index.html

Important: To convert file scss to css file you need to run ionic server for start gup task :
Open a new cmd.exe for windows or Terminal for mac and run : 

      cd your_project_path/IonicMaterialDesign
      ionic serve -l

D-12) Icon and Splash Screen - top

To change Application Icon and Splash Screen Ionic Framework have tool for create it to all device size and platform by following step.

  1. Create icon by save an icon.png, icon.psd or icon.ai file within the resources directory at the root of the project. The icon image's minimum dimensions should be 192x192 px, and should have no rounded corners. Note that each platform will apply it's own mask and effects to the icons. For example, iOS will automatically apply it's custom rounded corners, so the source file should not already come with rounded corners. This Photoshop icon template provides the recommended size and guidelines of the artwork's safe zone.

  2. Create splash screen by save a splash.png ,splash.psd or splash.ai file within the resources directory at the root of the project. Splash screen dimensions vary for each platform, device and orientation, so a square source image is required the generate each of various sizes. The source image's minimum dimensions should be 2208x2208 px, and its artwork should be centered within the square, knowing that each generated image will be center cropped into landscape and portrait images. The splash screen's artwork should roughly fit within a center square (1200x1200 px). This Photoshop splash screen template provides the recommended size and guidelines of the artwork's safe zone. Additionally, when the Orientation preference config is set to either landscape or portrait mode, then only the necessary images will be generated.

  3. open a new cmd.exe for windows or Terminal for mac and run : 
        cd your_project_path/IonicMaterialDesign
    ionic resources

    Ionic framework will create image file all size and platform at resources/ios and android directory at the root of the project

  4. Deploy to device new application icon and splash screen will change.
    Deploy To Android device
    Deploy To IOS device

Learn More : Icon and Splash Screen

D-13) Update project to latest version - top

Please follow below step to update project for the latest version of Ionic Material Design.
You have to uninstall all plugin from your project and install it again by using below upgrade procedure :

  1. Create copy of Backup you project
  2. Open a new cmd.exe for windows or Terminal for mac.
  3. Remove platfrom IOS and Android 
    cd your_project_path/IonicMaterialDesign
ionic platform remove android
ionic platform remove ios
  4. Uninstall all plugin by remove all plugin in project. 
    cd your_project_path/IonicMaterialDesign
ionic plugin remove cordova-plugin-googleplayservices
ionic plugin remove com.cordova.plugins.sms
ionic plugin remove com.synconset.imagepicker
ionic plugin remove org.apache.cordova.splashscreen
ionic plugin remove cordova-plugin-admob
ionic plugin remove cordova-plugin-camera
ionic plugin remove cordova-plugin-console
ionic plugin remove cordova-plugin-contacts
ionic plugin remove cordova-plugin-flashlight
ionic plugin remove cordova-plugin-inappbrowser
ionic plugin remove cordova-plugin-splashscreen
ionic plugin remove cordova-plugin-transport-security
ionic plugin remove cordova-plugin-vibration
ionic plugin remove cordova-plugin-whitelist
ionic plugin remove cordova-plugin-x-socialsharing
ionic plugin remove cordova-sqlite-storage
ionic plugin remove de.appplant.cordova.plugin.email-composer
ionic plugin remove de.appplant.cordova.plugin.local-notification
ionic plugin remove ionic-plugin-keyboard
ionic plugin remove org.devgeeks.Canvas2ImagePlugin
ionic plugin remove com.google.admobsdk
ionic plugin remove cordova-plugin-app-event
ionic plugin remove cordova-plugin-crosswalk-webview
ionic plugin remove cordova-plugin-admobpro
ionic plugin remove cordova-plugin-email-composer
ionic plugin remove cordova-plugin-extension
ionic plugin remove cordova-plugin-image-picker
ionic plugin remove cordova-plugin-device
ionic plugin remove cordova-plugin-statusbar
  5. Update file package.json by :
    • Open file at root path ~/IonicMaterialDesign/package.json
    • Set value of cordovaPlugins to empty array []
    • Save the file.
  6. Update file ~/IonicMaterialDesign/config.xml by :
    • Remove XML node <preference name="xwalk...*" value="...*" > like below list
      1. <preference name="xwalkVersion" value="14+" />
      2. <preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect" />
      3. <preference name="xwalkMode" value="embedded" />
      4. <preference name="xwalkMultipleApk" value="true" />
  7. Open directory of your project IonicMaterialDesign rename or remove folder platforms and plugins
  8. This version we have update below file for new feature of Ionic Material Design
    You can copy below file from new package and then paste to your project :

    1. SCSS/style.scss
    2. www/css/style.css
    3. www/css/style.min.css

  9. Following installation step of project documentation D1 – D10 at

E) How to edit a Project File. - top

You can use below editors to edit project file on Windows and Mac :
  • Sublimetext
  • Webstorm
  • Brackets
  • Atom
    • By download and install to your computer.

    F) HTML Files and Structure - top

    Please find HTML structure of Ionic Material Design :

    1. index.html : This is a main HTML file of project default page when application start and all reference of css and javascript lib is here.
      • If you would like to add or update reference of CSS, Javascript Lib, Angular Controller, Angular Module, You can add or update it at <head> section
      • Ionic navigation bar section is a directive of Ionic Framework for show application navigation bar. And present a view to the page.
        Learn more: Ionic ion-nav-bar
      • If you would like to add or edit Angular custom template you would do the following:
        1. Go to Angular custom template section
        2. Add new template by create new script :
        Learn more about Angular themplete
      • File Structure : 
        <!--This is a main HTML file of project default page when application start.-->
<!--All reference of css and javascript lib is here.-->

<!DOCTYPE html>
<html>

<!--head section This is a place of all reference of css and javascript lib-->
<head>
    <!-- Meta section -->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no"> <!-- To disable phone number typing.-->
    <!-- end Meta section -->
    <title></title>

    <!-- Font reference section -->
    <link href="lib/robotodraft/robotodraft.css">
    <!-- end Font reference section -->

    <!-- CSS reference section -->
    <link rel="stylesheet" href="css/ionic.app.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet prefetch" href="lib/angular-material/angular-material.css">
    <link rel="stylesheet" href="lib/font-awesome-4.4.0/css/font-awesome.css">
    <!-- end CSS reference section -->

    <!-- Ionic javascript lib -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- end Ionic javascript lib -->

    <!-- Angular javascript lib -->
    <script src="lib/angular-messages/angular-messages.js"></script>
    <script src="lib/angular-aria/angular-aria.js"></script>
    <script src="lib/angular-material/angular-material.js"></script>
    <!-- end Angular javascript lib -->

    <!-- Cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
    <!-- end Cordova script -->

    <!--ionic framework ngIOS9UIWebViewPatch-->
    <!--Learn more about ngIOS9UIWebViewPatch at : http://blog.ionic.io/ios-9-potential-breaking-change/-->
    <script src="lib/ngIOS9UIWebViewPatch/angular-ios9-uiwebview.patch.js"></script>
    <!--end ionic framework ngIOS9UIWebViewPatch-->

    <!-- app.js section-->
    <script src="js/app.js"></script>
    <!-- end app.js section-->

    <!-- Controllers section-->
    <script src="js/controllers.js"></script>
    <script src="js/shared/directives.js"></script>
    <script src="js/shared/filter.js"></script>
    <script src="js/shared/controllers.js"></script>
    <script src="templates/menu/js/controllers.js"></script>
    <script src="templates/material-user-interface/dashboard/js/controllers.js"></script>
    <script src="templates/application-storage/sqLite/js/controllers.js"></script>
    <script src="templates/application-storage/sqLite/js/services.js"></script>
    <script src="templates/application-storage/local-application-db/js/controllers.js"></script>
    <script src="templates/application-storage/local-application-db/js/services.js"></script>
    <script src="templates/social-network-connect/facebook/js/controllers.js"></script>
    <script src="templates/social-network-connect/instagram/js/controllers.js"></script>
    <script src="templates/social-network-connect/google-plus/js/controllers.js"></script>
    <script src="templates/social-network-connect/foursquare/js/controllers.js"></script>
    <script src="templates/social-network-connect/dropbox/js/controllers.js"></script>
    <script src="templates/share-application-content/social-share/js/controllers.js"></script>
    <script src="templates/share-application-content/email-message/js/controllers.js"></script>
    <script src="templates/hardware-connect/device-information/js/controllers.js"></script>
    <script src="templates/hardware-connect/mobile-contract/js/controllers.js"></script>
    <script src="templates/hardware-connect/flash-light/js/controllers.js"></script>
    <script src="templates/hardware-connect/vibration/js/controllers.js"></script>
    <script src="templates/advertising-application/googleAdmob/js/controllers.js"></script>
    <script src="templates/hardware-connect/image-picker/js/controllers.js"></script>
    <script src="templates/social-network-connect/wordpress/js/controllers.js"></script>
    <script src="templates/material-user-interface/dashboard/js/controllers.js"></script>
    <script src="templates/material-user-interface/default-user-interface/js/controllers.js"></script>
    <script src="templates/themes/menu-dashboard/js/controllers.js"></script>
    <script src="templates/themes/expense-dashboard/js/controllers.js"></script>
    <script src="templates/themes/catalog/js/controllers.js"></script>
    <script src="templates/push-notification/single-push-notification/js/controllers.js"></script>
    <script src="templates/push-notification/schedule-push-notification/js/controllers.js"></script>
    <!-- end Controllers section-->

    <!-- jQuery section-->
    <script src="lib/jQuery/jquery.js"></script>
    <!-- end jQuery section-->

</head><!-- end head section-->

<!--body section-->
<body ng-app="starter" class="hide-native-scroll-y">

<!--Custom Style section-->
<style type="text/css">
    {{customStyle}}
</style><!-- end Custom Style section-->

<!-- Ionic navigation bar section-->
<ion-nav-view></ion-nav-view>
<!-- end Ionic navigation bar section-->

</body><!-- end body section-->


<!-- Angular custom template section-->

<!--Share template confirm-dialog section-->
<script type="text/ng-template" id="confirm-dialog.html">
    <md-dialog aria-label="confirm-dialog">
        <form>
            <md-dialog-content>
                <div>
                    <h2 class="md-title">{{displayOption.title}}</h2>

                    <p>{{displayOption.content}}</p>
                </div>
            </md-dialog-content>
            <div class="md-actions" layout="row">
                <a class="md-primary-color dialog-action-btn" ng-click="cancel()">
                    {{displayOption.cancel}}
                </a>
                <a class="md-primary-color dialog-action-btn" ng-click="ok()">
                    {{displayOption.ok}}
                </a>
            </div>
        </form>
    </md-dialog>
</script> <!-- end share template confirm-dialog section-->

<!-- Share template toast section-->
<script type="text/ng-template" id="toast.html">
    <md-toast class="toast-form">
        <span flex>{{displayOption.title}}</span>
    </md-toast>
</script><!-- end share template toast section-->

<!-- end Angular custom template section-->

</html>
    2. templates html : Ionic Material Design use ion-nav-view and ion-content for present children view to navigation bar directive of Ionic framework. If you would like to edit templates html view, You can add html to Content section and please use below html structure : 
          
        
        

            
      
                
      
                    This is a sample

      All section of html will have label section name, ID that reference to css. If you would like to edit you can open projectPath/scss/style.scss then find id of reference and edit it.

    G) CSS Files and Structure - top

    Ionic Material Design use css library as below :

    Default CSS of Project.

    This project use Ionic Sass to create default CSS file . You can go to Sass Setup Section to setup sass.

    If you would like to edit default CSS of project. Open style.scss file at path scss/style.scss you will found a section of :

    Structure : 
    //global variable section

//colors variable section
$color_white: white;
$color_gray: gray;
$color_alto: #dbdbdb;
$color_black: black;
$color_mercury: #e5e5e5;
$color_black_14: rgba(0, 0, 0, 0.14);
$color_black_12: rgba(0, 0, 0, 0.12);
$color_black_20: rgba(0, 0, 0, 0.2);
$color_black_084: rgba(0, 0, 0, 0.084);
$color_black_098: rgba(0, 0, 0, 0.098);
$color_black_haze_approx: #f6f6f6;
$color_angular: #E15258;
$color_ionic: #3079AB;
$color_material: #E59A13;
$color_ios: #45AFA8;
$color_facebook: #3c5c99;
$color_google_plus: #d73d32;
$color_instagram: #517fa4;
$color_foursquare: #f94777;
$color_dropbox: #017ee6;
$color_wordoress: #0087BE;
$color_romance_approx: #fefefe;
$color_alabaster: #fafafa;
$color_gondola_40_approx: rgba(34, 25, 25, 0.4);
$color_celeste_approx: #ccc;
$color_mine_shaft_approx: #333;
$color_carnation_approx: #ff5252;
$color_chenin_approx: #e3cf7a;
$color_red_orange_approx: #f44336;
$color_border_under_line: rgba(0, 0, 0, 0.12);
$color_md_tabs_border: #E1E1E1;
$color_md-whiteframe: #fff;
$color_border_menu_dashboard: rgba(225, 225, 225, 0.69);
$color_news_header: #2882D8;

//fonts variable section
$font_roboto_draft: RobotoDraft;
$font_roboto: Roboto;
$font_helvetica_neue: Helvetica Neue;
$font_sans-serif: sans-serif;
$font_arial: Arial;

//urls variable section
$url_background_cover_pixels: url(../img/background_cover_pixels.png);
$url_background_cover_contract_us: url(../img/contract_us_bg.jpg);
$url_background_cover_try_app_01: url(../img/slide_01.png);
$url_background_cover_try_app_02: url(../img/slide_02.png);
$url_background_cover_try_app_03: url(../img/slide_03.png);
$url_background_cover_try_app_04: url(../img/slide_04.png);
$url_background_cover_try_app_05: url(../img/slide_05.png);
$url_background_cover_try_app_06: url(../img/slide_06.png);
$url_background_cover_try_app_07: url(../img/slide_07.png);
$url_background_cover_try_app_08: url(../img/slide_08.png);
$url_background_cover_restaurant_01: url(../img/food_01.png);
$url_background_cover_restaurant_02: url(../img/food_02.png);
$url_background_cover_restaurant_03: url(../img/food_03.png);

//end global variable section

//global class section

    If you would like to edit a specific section of the site, simply find the appropriate label, section, ID in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

    Grid system.

    This project use Ionic Framework Grid System. If you would like to create or edit layout you can use Column Percentage Class names for view layout by using this structure : 

    
    
    .col.col-50
    
    
    .col
    
    
    .col
    

    


    
    
    .col.col-75
    
    
    .col
    

    


    
    
    .col
    
    
    .col.col-75
    

    


    
    
    .col
    
    
    .col

    Learn more about: Ionic Framework Grid System.

    H) Javascript Files and Structure - top

    This application imports three Javascript files.


    Learn more about framework : Ionic Framework, Angular Material, Angular Messages, Angular Aria, ngCordova

    All Javascript framework is reference at www/index.html at <head> section :

    <!--head section This is a place of all reference of css and javascript lib-->
<head>
    <!-- Meta section -->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no"> <!-- To disable phone number typing.-->
    <!-- end Meta section -->
    <title></title>

    <!-- Font reference section -->
    <link href="lib/robotodraft/robotodraft.css">
    <!-- end Font reference section -->

    <!-- CSS reference section -->
    <link rel="stylesheet" href="css/ionic.app.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet prefetch" href="lib/angular-material/angular-material.css">
    <link rel="stylesheet" href="lib/font-awesome-4.4.0/css/font-awesome.css">
    <!-- end CSS reference section -->

    <!-- Ionic javascript lib -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- end Ionic javascript lib -->

    <!-- Angular javascript lib -->
    <script src="lib/angular-messages/angular-messages.js"></script>
    <script src="lib/angular-aria/angular-aria.js"></script>
    <script src="lib/angular-material/angular-material.js"></script>
    <!-- end Angular javascript lib -->

    <!-- Cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
    <!-- end Cordova script -->

    <!--ionic framework ngIOS9UIWebViewPatch-->
    <!--Learn more about ngIOS9UIWebViewPatch at : http://blog.ionic.io/ios-9-potential-breaking-change/-->
    <script src="lib/ngIOS9UIWebViewPatch/angular-ios9-uiwebview.patch.js"></script>
    <!--end ionic framework ngIOS9UIWebViewPatch-->

    <!-- app.js section-->
    <script src="js/app.js"></script>
    <!-- end app.js section-->

    <!-- Controllers section-->
    <script src="js/controllers.js"></script>
    <script src="js/shared/directives.js"></script>
    <script src="js/shared/filter.js"></script>
    <script src="js/shared/controllers.js"></script>
    <script src="templates/menu/js/controllers.js"></script>
    <script src="templates/material-user-interface/dashboard/js/controllers.js"></script>
    <script src="templates/application-storage/sqLite/js/controllers.js"></script>
    <script src="templates/application-storage/sqLite/js/services.js"></script>
    <script src="templates/application-storage/local-application-db/js/controllers.js"></script>
    <script src="templates/application-storage/local-application-db/js/services.js"></script>
    <script src="templates/social-network-connect/facebook/js/controllers.js"></script>
    <script src="templates/social-network-connect/instagram/js/controllers.js"></script>
    <script src="templates/social-network-connect/google-plus/js/controllers.js"></script>
    <script src="templates/social-network-connect/foursquare/js/controllers.js"></script>
    <script src="templates/social-network-connect/dropbox/js/controllers.js"></script>
    <script src="templates/share-application-content/social-share/js/controllers.js"></script>
    <script src="templates/share-application-content/email-message/js/controllers.js"></script>
    <script src="templates/hardware-connect/device-information/js/controllers.js"></script>
    <script src="templates/hardware-connect/mobile-contract/js/controllers.js"></script>
    <script src="templates/hardware-connect/flash-light/js/controllers.js"></script>
    <script src="templates/hardware-connect/vibration/js/controllers.js"></script>
    <script src="templates/advertising-application/googleAdmob/js/controllers.js"></script>
    <script src="templates/hardware-connect/image-picker/js/controllers.js"></script>
    <script src="templates/social-network-connect/wordpress/js/controllers.js"></script>
    <script src="templates/material-user-interface/dashboard/js/controllers.js"></script>
    <script src="templates/material-user-interface/default-user-interface/js/controllers.js"></script>
    <script src="templates/themes/menu-dashboard/js/controllers.js"></script>
    <script src="templates/themes/expense-dashboard/js/controllers.js"></script>
    <script src="templates/themes/catalog/js/controllers.js"></script>
    <script src="templates/push-notification/single-push-notification/js/controllers.js"></script>
    <script src="templates/push-notification/schedule-push-notification/js/controllers.js"></script>
    <!-- end Controllers section-->

    <!-- jQuery section-->
    <script src="lib/jQuery/jquery.js"></script>
    <!-- end jQuery section-->

</head><!-- end head section-->

    I) Configuration - top

    I-1) Theme Color - top

    If you would like to change theme color of this application please following below step :

    1. Open File www/js/app.js
    2. Go to Line : 297 
      $mdThemingProvider
 .theme('default')
 .primaryPalette('pink')
 .accentPalette('red');
    3. You can change the primaryPalette and accentPalette of theme by using below support color :
      • red
      • pink
      • purple
      • purple
      • deep-purple
      • indigo
      • blue
      • light-blue
      • cyan
      • teal
      • green
      • light-green
      • lime
      • yellow
      • amber
      • orange
      • deep-orange
      • brown
      • grey
      • blue-grey
    4. Build project again theme color will change.
    Learn more about about :

    I-2) Android Keyboard - top

    To disable push up the screen when android keyboard was show up.

    1. Go to AndroidManifest.xml by project path : yourProjectPaht/platforms/android/AndroidManifest.xml
    2. Put adjustPan for android:windowSoftInputMode in tag activity

    I-3) Disable phone number typing - top

    To disable phone number typing.
    Go to yourProjectPath/www/index.html and put this following code in the meta area on head section. 

                     <meta name="format-detection" content="telephone=no">

    I-4) Phone call - top

    To allow application to using mobile phone call.
    Go to yourProjectPath/config.xml and put this following code in the access area. 

                    <access origin="tel:*" launch-external="yes"/>

    J) Component Detail - top

    This is the main feature of Ionic Material Design Application that include of many components. In this section will introduce you all component detail. You will know what is it, how it work and how to use it.

    Source Code Structure
    We have added a comment of description how to get the component work in source code.

    This is the sample structure:

    HTML : 
    







    
    
        
            
        
    
    

    
    
        
    
            
    SQLite Database
    

            
    Application Storage
    
        
    
        
            
        
        
    

    
    
        
        

            
                
                    
                
            

            

                

                
    {{ contract.firstName }} {{ contract.lastName }}
    Java Script : 
    // Controller will call ContractDB Services to present data to html view.
// 
// For using sqlite you have to install $cordovaSQLite by running the following 
// command in your cmd.exe for windows or Terminal for mac:
// cd your project path
// $ ionic plugin remove io.litehelpers.cordova.sqlite
// $ ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
//
// Learn more about $cordovaSQLite :
// http://ngcordova.com/docs/plugins/sqlite/
//
// Controller of Contract List Page.
appControllers.controller('contractListCtrl', function ($scope, $filter, $mdDialog, $timeout, $ionicModal, $state, $mdBottomSheet, ContractDB) {
    
    // initialForm is the first activity in the controller. 
    // It will initial all variable data and let the function works when page load.
    $scope.initialForm = function () {
        // $scope.contracts  is the variable that store data from ContractDB service.
        $scope.contracts = [];

        // $scope.filterText  is the variable that use for searching.
        $scope.filterText = "";
        
        // The function for show/hide loading progress.
        $timeout(function () {
            if ($scope.isAndroid) {
                jQuery('#contract-list-loading-progress').show();
            }
            else {
                jQuery('#contract-list-loading-progress').fadeIn(700);
            }
        }, 400);
        $timeout(function () {

            ////Get all contracts.
            $scope.getContractList();

            jQuery('#contract-list-loading-progress').hide();
            jQuery('#contract-list-content').fadeIn();
        }, 3000);// End loading progress.

    };// End initialForm.

    // getContractList is for get all contracts. 
    // By calling ContractDB.all() service.
    $scope.getContractList = function () {
        $scope.contracts = ContractDB.all();
    };//End getContractList.

    // updateContract is for update contracts. 
    // By sending contract to ContractDB.update(contract) service.
    // Parameter :  
    // contract = contract that user select from view.
    $scope.updateContract = function (contract) {
        ContractDB.update(contract);
    };// End updateContract.

    // navigateTo is for navigate to other page 
    // by using targetPage to be the destination page 
    // and sending objectData to the destination page.
    // Parameter :  
    // targetPage = destination page.
    // objectData = object that will sent to destination page.
    $scope.navigateTo = function (targetPage, objectData) {
        $state.go(targetPage, {
            contractdetail: objectData,
            actionDelete: (objectData == null ? false : true)
        });
    };// End navigateTo.

    $scope.initialForm();

});// End of Contract List Page  Controller.

    J-1) Application Storage - top

    Every application have to store data. We will introduce you to using application storage to store data in your application by using SQLite and LocalStorage.

    J-1-1) SQLite Database - top

    SQLite is the best way to store data to application storage. It allow you to manage complex relational database.

    Advantage of SQLite it have unlimit ability to store data. It will create the sqlite file that store in the application. Also can store more complex data such as relation between tables.

    We use SQLite function to create a small contract application that including function to :

    Project file path :

    J-1-2) Local Storage Database - top

    LocalStorage have ability to store data by HTML5 loacalStorage function.

    We use LocalStorage function to create a notes application that including function to :

    Project file path :

    J-2) Social Network Connect - top

    Using Social Network Connect for connect your application with social network. You can use it to be your application log in authentication and get user profile information from social network. Also it can retrieve data object of user timeline.

    Advantage of Social Network Connect is you don't need to create login page for your application just use social log in authentication. And it is easy for user to login.

    J-2-1) WordPress - top

    Getting WordPress feed by input your WordPress URL to application. It will use WP REST API for connecting with WordPress Feed.

    The function include:

    Project file path :

    Install WP REST API

    To getting WordPress feed you have to install WP REST API plugin to your WordPress by this following instruction :

    J-2-2) Facebook - top

    Use cordovaOauth for connect with facebook to get user profile information, user timeline and friend list by calling facebook API.

    The function include:

    Project file path :

    Important :

    1. You have to register the application API before using this feature. Then add App ID to file: www/app.js at global variable section to get the function work.
    2. This feature is not support Ionic View because of ngCordova Oauth issue, However the ticket has been raised on Github of Ionic Framework at https://github.com/driftyco/ionic-view-issues/issues/45
    3. This feature is required device environment it will not working on browser.

    Facebook API Registration :

    To connect with facebook you have to register facebook application developer to get APP ID by this following :

    J-2-3) Google Plus - top

    Use cordovaOauth for connect with Google to get user profile information and user activity by calling Google API.

    The function include:

    Project file path :

    Important :

    1. You have to register the application API before using this feature. Then add App ID to file: www/app.js at global variable section to get the function work.
    2. This feature is not support Ionic View because of ngCordova Oauth issue, However the ticket has been raised on Github of Ionic Framework at https://github.com/driftyco/ionic-view-issues/issues/45
    3. This feature is required device environment it will not working on browser.

    Google API Registration :

    To connect with google you have to register google application developer to get Client ID by this following :

    J-2-4) Instagram - top

    Use cordovaOauth for connect with instagram to get user profile information and user feed by calling instagram API.

    The function include:

    Project file path :

    Important :

    1. You have to register the application API before using this feature. Then add App ID to file: www/app.js at global variable section to get the function work.
    2. This feature is not support Ionic View because of ngCordova Oauth issue, However the ticket has been raised on Github of Ionic Framework at https://github.com/driftyco/ionic-view-issues/issues/45
    3. This feature is required device environment it will not working on browser.

    Instagram API Registration :

    To connect with instagram you have to register instagram application developer to get Client ID by this following :

    J-2-5) Foursquare - top

    Use cordovaOauth for connect with foursquare to get user profile information and user tips feed by calling foursquare API.

    The function include:

    Project file path :

    Important :

    1. You have to register the application API before using this feature. Then add App ID to file: www/app.js at global variable section to get the function work.
    2. This feature is not support Ionic View because of ngCordova Oauth issue, However the ticket has been raised on Github of Ionic Framework at https://github.com/driftyco/ionic-view-issues/issues/45
    3. This feature is required device environment it will not working on browser.

    Foursqure API Registration :

    To connect with foursquare you have to register foursquare application developer to get Client ID by this following :

    J-2-6) Dropbox - top

    Use cordovaOauth for connect with dropbox to get user profile information and user files directory feed by calling dropbox API.

    The function include:

    Project file path :

    Important :

    1. You have to register the application API before using this feature. Then add App ID to file: www/app.js at global variable section to get the function work.
    2. This feature is not support Ionic View because of ngCordova Oauth issue, However the ticket has been raised on Github of Ionic Framework at https://github.com/driftyco/ionic-view-issues/issues/45
    3. This feature is required device environment it will not working on browser.

    Dropbox API Registration :

    To connect with dropbox you have to register dropbox application developer to get App Key by this following :

    J-3) Share Application Content - top

    Share Application Content is for share content from the application to social network by using feature of ngCordova.

    J-3-1) Social Share - top

    Using cordovaSocialSharing for share application content to social network and using Canvas2ImagePlugin for save image to mobile gallery.

    The function include:

    Project file path :

    Important :

    J-3-2) Email & Message - top

    Using cordovaSocialSharing for send email from the application and using cordovaSMS for sent message.

    The function include:

    Project file path :

    Important :

    J-4) Advertising Application - top

    J-4-1) Google AdMob - top

    Using Google AdMob for earning money to your application. By using AdMob Pro.

    The function include:

    Project file path :

    Note: AdMob will show random advertising by google AdMob.

    Important :

    Google AdMob Registration :

    You have to register google AdMob by this following :

    J-5)Push Notification - top

    Push Notification is for sent local notification from application to interactive with user.

    J-5-1) Single Push - top

    To send notification for interact with user by sending single message.

    The function include:

    Project file path :

    Important :

    J-5-2) Schedule Push - top

    To send notification for interact with user by sending message with schedule queue.

    The function include:

    Project file path :

    Important :

    J-6)Map API Connect - top

    Map API Connect is for connect the application with map application.

    J-6-1) IOS Map - top

    To connect the application with map application.

    The function include:

    Project file path :

    Important :

    J-6-2) Android Map - top

    To connect the application with map application.

    The function include:

    Project file path :

    Important :

    J-7) Hardware Connect - top

    Hardware Connect is for connecting with mobile feature by using ngCordova.

    J-7-1) Mobile Contract - top

    Using cordovaContacts for connecting the application to mobile contract.

    The function include:

    Project file path :

    Important :

    J-7-2) Image Picker - top

    Using cordovaImagePicker for selecting image from mobile gallery.

    The function include:

    Project file path :

    Important :

    J-7-3) Vibration - top

    Using cordovaVibration for using mobile vibration.

    The function include:

    Project file path :

    Important :

    J-7-4) Flashlight - top

    Using cordovaFlashlight for using mobile flashlight.

    The function include:

    Project file path :

    Important :

    J-7-5) Device Information - top

    Using ionic.Platform.device for get device information.

    The function include:

    Project file path :

    Important :

    J-8) Material Design Themes - top

    Material theme that will help you to generate idea to create your powerful application.

    Project file path :

    K) Known Issues - top

    Ionic View :

    HTML Button Tag :

    Problem : Ionic Material Design doesn't support HTML button Tag, Because Angular material and angular-aria will have double event when tap at the HTML button Tag on Mobile Browser.

    Solution : Ionic Material Design avoid this issue by using HTML a to create button by : 

    <a class="md-raised md-button" href="#" ng-click="doSomeThing()">Button</a>
    To create button : .

    Social connect :

    Foursquare and Dropbox feed API have no paging so it cannot do load more function.

    Social share :

    1. For send email user must add email to the native mail application before sent e-mail.
    2. Facebook and Twitter sharing can not send a text via ngCordova API to shareing screen. However user can type text message on sharing screen.
    3. The reference limitation of $cordovaSocialSharing :

      Learn more: ngcordova socialSharing

    Mobile contract :

    For get all contracts you have to wait more than 2 sec for loading contracts form device (depend on data size).

    Image size

    Application will lag and slow if image size are large.

    L) Compatibility - top

    This project was tested in :

    Compatible with:

    M) Support - top

    If you found any bug, please use the theme comment section or report it to us describing:

    1. Device platform
    2. Device version
    3. Problem details
    4. Explain how to reproduce the problem, step by step.

    Important : We not support the error case of this project from :

    N) Useful Resources - top

    Please use this following link to help you find useful information :

    O)Sources and Credits - top

    I've used the following Icons, Framework, Idea , Inspiration or Other files as listed. - Also a thanks to all the awesome resources I've used for the development of this project.

    Resources used in Development

    Resources used in Design

    P)Version History - top

    Once again, thank you so much for purchasing Ionic Material Design. As I said at the beginning, I'd be glad to help you if you have any questions relating to this project. No guarantees, but I'll do my best to assist. If you have a more general question relating to the project on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

    Ionic Material Design Team

    Go To Table of Contents