Skip to main content

17 posts tagged with "Ionic"

View All Tags

How to create a basic ionic3 + mobile application

· One min read
  1. To start a new app, open your terminal/command prompt and run the following command

ionic start IonicMobileProject sidemenu

  1. To view the app in browser  run the following commands

cd IonicMobileProject/

ionic serve

Progressive Web App (PWA)

· 2 min read

A Progressive Web App (PWA) is an web application which gives an App like experience on mobile devices. PWA are developed with web technologies. These apps need not be installed and can be just access on the mobile browser by adding a short cut to the Home screen using ‘Add to Home Screen’ browser option. PWA fills the gap between mobile websites and mobile apps.

Currently PWA are developed by many Software companies you can find the references from PWA Rocks website

Basic Ionic1 CLI commands

· One min read

  1. To start a new application
    ionic start NagIonic sidemenu

  2. Navigate to the project folder NagIonic

  3. To Launch an app in browser
    Ionic serve –lab

  4. Add platforms
    ionic platform add ios
    ionic platform add android
    ionic platform add windows

  5. Add icon and splash
    Place icon.png (192X192 px), splash.png(
    2208×2208 px) in resources folder
    ionic resources

  6. To run app on device
    ionic run android

Ionic – AngularJS templates

· 2 min read

The following code snippets demonstrates the format/template which can be used in Ionic or in Angularjs Applications

/**************************
 * Controller 
 **************************/

(function () {
  'use strict';
  var injectParams = [ /* 'dependency1' */];
 
  function SampleCtrl( /* dependency1 */) {
    var SampleVm = this;
 
    //Bindable Properties and functions
    SampleVm.dummyProperty = '';
    SampleVm.dummyBindableFunc = dummyBindableFunc;
 
    //Functions
    function dummyBindableFunc() { 
    }
 
    function myNormalFunc() { 
    } 
  };
 
  SampleCtrl.$inject = injectParams;
  angular.module('app.myModule').controller('SampleCtrl', SampleCtrl);
})();


/**************************
 * Factory 
 **************************/
(function () {
  'use strict';
  var injectParams = [ /* 'dependency1' */];
 
  function sampleFactory( /* dependency1 */) {
    var exports = {
      getData: getData
    };
 
    return exports;
    ////////////////
 
    function getData() { 
    } 
  }
 
  sampleFactory.$inject = injectParams;
  angular.module('app.myModule').factory('sampleFactory', sampleFactory);
})();

/**************************
 * Filter 
 **************************/
(function () {
  'use strict';
 
  function sampleFilter() {
 
    return sampleFilterFunc;
    ////////////////
 
    function sampleFilterFunc(parameters) {
      return parameters;
    } 
  }
 
  angular.module('app.myModule').filter('sampleFilter', sampleFilter);
})();

/**************************
 * Directive 
 **************************/
(function () {
  'use strict';
  var injectParams = [ /* 'dependency1' */];
 
  function customDirective( /* dependency1 */) {
 
    var directive = {
      link: link,
      restrict: 'EA',
      replace: true,
      templateUrl: 'app/myDirective/myDirective.html',
      controller: 'customController',
      controllerAs: 'custom'
    };
    return directive;
 
    function link(scope, element, attrs) {
    }
  };
 
  customDirective.$inject = injectParams;
  angular.module('app.myModule').directive('customDirective', customDirective);
})();

Ionic 2 Tutorial

· 3 min read

Introduction​

Ionic 2 is an open source cross platform application development framework. For the below questions your answer is YES and you can use the Ionic 2 for your app development.

  1. I want to develop Apps for Android, iOS, Windows but don't know there respective technologies like Java for Android apps, objective-C/Swift for iOS apps, C# for windows apps ?
  2. Do you know only web front-end technologies like HTML/CSS/Javascript  and  likes to develop mobile/tablet app?
  3. We want to develop the app with less effort and faster ?

Ionic 2 apps can be developed with Angular 2 and preferably with  typescript.

 Development environment setup​

To install the development environment perform the below steps

  1. Install Node.js 6 or greater  Download the installer
  2. Open cmd and use the following commands to install the Ionic CLI and Cordova
    npm install -g ionic
    npm install -g cordova

Create a sample first app​

To create first sample app, Open the cmd window and use the below command
ionic start sampleApp --v2

  1. To run your app, cd into the sampleApp directory

  2. To run on browser  ionic serve

  3. To run on ios ionic run ios

  4. To run on Android ionic run android

  5. To know the environment details use ionic info

Your system information:

Cordova CLI: 6.1.1  
Gulp version: CLI version 3.9.1  
Gulp local: Local version 3.9.1  
Ionic Framework Version: 2.0.0-rc.1  
Ionic CLI Version: 2.1.0  
Ionic App Lib Version: 2.1.0-beta.1  
OS: Windows 8.1  
Node Version: v6.2.1

Generate new Page and Service​

  1. To create a page in the sampleApp  use
ionic g page [pageName]
ionic g page demoPage

CLI creates the following three files under 'sampleApp/src/pages/demo-page'

  • demo-page.html -> the view code
  • demo-page.ts -> component/class code similar to controller
  • demo-page.scss -> your style/sass code
  1. To create a service, replace page with provider:
ionic g provider [providerName]
ionic g provider demoData

CLI creates the demo-data.ts under 'sampleApp/src/providers/' folder this file serves likes service/factory.

  1. Add DemoPage module in 'sampleApp\src\app\app.module.ts'
import { NgModule } from '@angular/core';  
import { IonicApp, IonicModule } from 'ionic-angular';  
import { MyApp } from './app.component';  
import { AboutPage } from '../pages/about/about';  
import { ContactPage } from '../pages/contact/contact';  
import { HomePage } from '../pages/home/home';  
import { TabsPage } from '../pages/tabs/tabs';  
import { DemoPage } from '../pages/demo-page/demo-page'; //import DemoPage   
  
@NgModule({  
  declarations: [ 
    MyApp,  
    AboutPage,  
    ContactPage,  
    HomePage,  
    TabsPage,  
    DemoPage //Add DemoPage  
  ],  
  imports: [ 
    IonicModule.forRoot(MyApp)  
  ],  
  bootstrap: [IonicApp],  
  entryComponents: [ 
    MyApp,  
    AboutPage,  
    ContactPage,  
    HomePage,  
    TabsPage,  
    DemoPage //Add DemoPage  
  ],  
  providers: []  
})  
export class AppModule {}

  1. Add button on Home.html

    Show DemoPage

  2. Add the code to navigate in the HomePage class

     goToDemoPage(){  
     this.navCtrl.push(DemoPage);  
     }

  3. Launch the app and click on the 'SHOW DEMOPAGE' Button you will be navigated to the DemoPage

Bingo !!! you created a new page and plugged in app and implemented the navigation.