├── .DS_Store ├── AndroidFileDirectoryInfo ├── README.md ├── home.html ├── home.scss └── home.ts ├── Angular-Http-Common-GET-Example ├── README.md ├── app │ ├── app.component.ts │ ├── app.html │ ├── app.module.ts │ ├── app.scss │ └── main.ts ├── httpcommon.png ├── pages │ └── home │ │ ├── home.html │ │ ├── home.scss │ │ └── home.ts └── providers │ └── user │ └── user.ts ├── Angular2-Time-Interval-Example ├── README.md ├── interval │ ├── interval.html │ ├── interval.module.ts │ ├── interval.scss │ └── interval.ts └── ionic-angular-time-interval-example.png ├── AppList ├── README.md ├── home.html ├── home.scss ├── home.ts └── ionic3-installed-app-list.png ├── FileManagerApp ├── README.md ├── home.html ├── home.scss ├── home.ts └── ionic-file-manager-app.png ├── Ionic-App-Health-Centre-FREE-REST-API ├── .DS_Store └── README.md ├── ObjectArraySortPipe ├── README.md ├── demo.html └── sort-pipe.ts ├── README.md ├── RoundProgressBarExample ├── README.md ├── ionic3-round-progressbar-example.png ├── progressbar.html ├── progressbar.module.ts ├── progressbar.scss └── progressbar.ts ├── SMSOTPVerificationAutomate ├── README.md ├── home │ ├── home.html │ ├── home.scss │ └── home.ts ├── ionic-3-sms-otp-verification-automate.png └── otp-receive │ ├── otp-receive.html │ ├── otp-receive.module.ts │ ├── otp-receive.scss │ └── otp-receive.ts ├── YoutubeVideoPlayer ├── README.md ├── app │ ├── app.component.ts │ ├── app.html │ ├── app.module.ts │ ├── app.scss │ └── main.ts ├── ionic-3-youtube-player-example.png ├── pages │ └── home │ │ ├── home.html │ │ ├── home.scss │ │ └── home.ts └── pipes │ ├── pipes.module.ts │ └── youtube │ └── youtube.ts ├── file upload ├── README.md ├── home.html ├── home.scss ├── home.ts └── upload.php ├── filemanager ├── home.html ├── home.scss └── home.ts ├── lazyNavigation ├── README.md ├── contact │ ├── contact.html │ ├── contact.module.ts │ ├── contact.scss │ └── contact.ts └── home │ ├── home.html │ ├── home.scss │ └── home.ts ├── readSMSList ├── README.md ├── home.html ├── home.ts ├── ionic-3-framework-sms-read-list.png └── pipes │ ├── .DS_Store │ └── first-caps │ └── first-caps.ts └── standardNavigation ├── README.md ├── app.module.ts ├── contact ├── contact.html ├── contact.module.ts ├── contact.scss └── contact.ts └── home ├── home.html ├── home.scss └── home.ts /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/.DS_Store -------------------------------------------------------------------------------- /AndroidFileDirectoryInfo/README.md: -------------------------------------------------------------------------------- 1 |

Get Android File System Info

2 | 3 | https://ampersandacademy.com/tutorials/ionic-framework-3/get-android-internal-storage-file-system-information-using-ionic3 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /AndroidFileDirectoryInfo/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic File Plugin 5 | 6 | 7 | 8 | 9 | 10 |

File Directory Info

11 | 12 | 13 |
applicationDirectory
14 |
{{applicationDirectory}}
15 | 16 | 17 | 18 |
applicationStorageDirectory
19 |
{{applicationStorageDirectory}}
20 | 21 | 22 | 23 |
dataDirectory
24 |
{{dataDirectory}}
25 | 26 | 27 |
cacheDirectory
28 |
{{cacheDirectory}}
29 | 30 | 31 |
externalApplicationStorageDirectory
32 |
{{externalApplicationStorageDirectory}}
33 | 34 | 35 |
externalDataDirectory
36 |
{{externalDataDirectory}}
37 | 38 | 39 |
externalCacheDirectory
40 |
{{externalCacheDirectory}}
41 | 42 | 43 |
externalRootDirectory
44 |
{{externalRootDirectory}}
45 | 46 | 47 |
tempDirectory
48 |
{{tempDirectory}}
49 | 50 | 51 |
getFreeDiskSpace
52 |
{{getFreeDiskSpace}}
53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /AndroidFileDirectoryInfo/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | .name { 3 | font-size: 22px; 4 | color: #db0a95 5 | } 6 | .value { 7 | font-size: 18px; 8 | color: #1009e2 9 | } 10 | } -------------------------------------------------------------------------------- /AndroidFileDirectoryInfo/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { File } from '@ionic-native/file'; 4 | 5 | @Component({ 6 | selector: 'page-home', 7 | templateUrl: 'home.html' 8 | }) 9 | export class HomePage { 10 | 11 | nativepath: string; 12 | applicationDirectory=''; 13 | applicationStorageDirectory=''; 14 | dataDirectory=''; 15 | cacheDirectory=''; 16 | externalApplicationStorageDirectory=''; 17 | externalDataDirectory=''; 18 | externalCacheDirectory=''; 19 | externalRootDirectory=''; 20 | tempDirectory=''; 21 | getFreeDiskSpace:any=''; 22 | constructor(public navCtrl: NavController, private fileCtrl: File) { 23 | this.goToDir(); 24 | } 25 | 26 | public goToDir() 27 | { 28 | this.applicationDirectory=this.fileCtrl.applicationDirectory; 29 | this.applicationStorageDirectory=this.fileCtrl.applicationStorageDirectory; 30 | this.dataDirectory=this.fileCtrl.dataDirectory; 31 | this.cacheDirectory=this.fileCtrl.cacheDirectory; 32 | this.externalApplicationStorageDirectory=this.fileCtrl.externalApplicationStorageDirectory; 33 | this.externalDataDirectory=this.fileCtrl.externalDataDirectory; 34 | this.externalCacheDirectory=this.fileCtrl.externalCacheDirectory; 35 | this.externalRootDirectory=this.fileCtrl.externalRootDirectory; 36 | this.tempDirectory=this.fileCtrl.tempDirectory; 37 | this.fileCtrl.getFreeDiskSpace().then(data=>{ 38 | this.getFreeDiskSpace=data; 39 | }) 40 | 41 | 42 | } 43 | 44 | 45 | } 46 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Angular 4.3 HttpClient (Accessing REST Web Services With Angular) 3 | 4 | In Angular 4.3 the new HttpClientModule has been introduced. This new module is available in package @angular/common/http and a complete re-implementation of the former HttpModule. The new HttpClient service is included in HttpClientModule and can be used to initiate HTTP request and process responses within your application. 5 | 6 | ## REST API Resource 7 | 8 | https://randomuser.me/api/?results=5 9 | 10 | # Steps: 11 | 12 | 1. Create Project 13 | 14 | ` ionic start demo blank ` 15 | 16 | 2. Create provider 17 | 18 | ` cd demo ` 19 | 20 | ` ionic g provider user ` 21 | 22 | # Learn Ionic 3 23 | 24 | https://ampersandacademy.com/tutorials/ionic-framework-3 25 | 26 | https://ampersandacademy.com/tutorials/ionic-framework-version-2 27 | 28 | # Demo 29 | 30 | 31 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Platform } from 'ionic-angular'; 3 | import { StatusBar } from '@ionic-native/status-bar'; 4 | import { SplashScreen } from '@ionic-native/splash-screen'; 5 | 6 | import { HomePage } from '../pages/home/home'; 7 | @Component({ 8 | templateUrl: 'app.html' 9 | }) 10 | export class MyApp { 11 | rootPage:any = HomePage; 12 | 13 | constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { 14 | platform.ready().then(() => { 15 | // Okay, so the platform is ready and our plugins are available. 16 | // Here you can do any higher level native things you might need. 17 | statusBar.styleDefault(); 18 | splashScreen.hide(); 19 | }); 20 | } 21 | } 22 | 23 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/app/app.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { UserProvider } from './../providers/user/user'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { ErrorHandler, NgModule } from '@angular/core'; 4 | import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; 5 | import { SplashScreen } from '@ionic-native/splash-screen'; 6 | import { StatusBar } from '@ionic-native/status-bar'; 7 | 8 | import { MyApp } from './app.component'; 9 | import { HomePage } from '../pages/home/home'; 10 | import { UserProvider } from '../providers/user/user'; 11 | import { HttpClientModule } from '@angular/common/http'; 12 | 13 | @NgModule({ 14 | declarations: [ 15 | MyApp, 16 | HomePage 17 | ], 18 | imports: [ 19 | BrowserModule, 20 | IonicModule.forRoot(MyApp), 21 | HttpClientModule 22 | ], 23 | bootstrap: [IonicApp], 24 | entryComponents: [ 25 | MyApp, 26 | HomePage 27 | ], 28 | providers: [UserProvider, 29 | StatusBar, 30 | SplashScreen, 31 | {provide: ErrorHandler, useClass: IonicErrorHandler}, 32 | UserProvider 33 | ] 34 | }) 35 | export class AppModule {} 36 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/app/app.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/theming/ 2 | 3 | 4 | // App Global Sass 5 | // -------------------------------------------------- 6 | // Put style rules here that you want to apply globally. These 7 | // styles are for the entire app and not just one component. 8 | // Additionally, this file can be also used as an entry point 9 | // to import other Sass files to be included in the output CSS. 10 | // 11 | // Shared Sass variables, which can be used to adjust Ionic's 12 | // default Sass variables, belong in "theme/variables.scss". 13 | // 14 | // To declare rules for a specific mode, create a child rule 15 | // for the .md, .ios, or .wp mode classes. The mode class is 16 | // automatically applied to the element in the app. 17 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/httpcommon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/Angular-Http-Common-GET-Example/httpcommon.png -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Blank 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

{{x.name.title}}.{{x.name.first}}

19 |

{{x.email}}

20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | import { UserProvider } from './../../providers/user/user'; 2 | import { Component } from '@angular/core'; 3 | import { NavController } from 'ionic-angular'; 4 | 5 | @Component({ 6 | selector: 'page-home', 7 | templateUrl: 'home.html' 8 | }) 9 | export class HomePage { 10 | 11 | constructor(public navCtrl: NavController,private userProvider:UserProvider) { 12 | 13 | } 14 | users:any; 15 | get() 16 | { 17 | this.userProvider.getRandomData().then(data=>{ 18 | this.users=data 19 | }); 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /Angular-Http-Common-GET-Example/providers/user/user.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient, HttpHeaders } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | 4 | /* 5 | Generated class for the UserProvider provider. 6 | 7 | See https://angular.io/guide/dependency-injection for more info on providers 8 | and Angular DI. 9 | */ 10 | @Injectable() 11 | export class UserProvider { 12 | 13 | constructor(public http: HttpClient) { 14 | console.log('Hello UserProvider Provider'); 15 | } 16 | 17 | ip="https://randomuser.me/api/?results=10" 18 | getRandomData() 19 | { 20 | return new Promise(resolve => { 21 | 22 | this.http.get(this.ip,{ 23 | headers: new HttpHeaders().set('Content-Type', 'application/json'), 24 | responseType: 'json' 25 | }) 26 | .subscribe(res => { 27 | //alert("list from web "+JSON.stringify(res)); 28 | resolve(res["results"]); 29 | }, (err) => { 30 | alert("failed=="+JSON.stringify(err)); 31 | resolve([]) 32 | }); 33 | }); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Angular2-Time-Interval-Example/README.md: -------------------------------------------------------------------------------- 1 | ### Ionic3 Angular 2 Interval Example 2 | 3 | 4 | 5 | 6 | This example shows the one second interval call using the Angular2 and Ionic 3 7 | -------------------------------------------------------------------------------- /Angular2-Time-Interval-Example/interval/interval.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | interval 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | {{x.sno}}-{{x.ctime|date:'fullTime'}} 20 | 21 | 22 | -------------------------------------------------------------------------------- /Angular2-Time-Interval-Example/interval/interval.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { IntervalPage } from './interval'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | IntervalPage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(IntervalPage), 11 | ], 12 | }) 13 | export class IntervalPageModule {} 14 | -------------------------------------------------------------------------------- /Angular2-Time-Interval-Example/interval/interval.scss: -------------------------------------------------------------------------------- 1 | page-interval { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /Angular2-Time-Interval-Example/interval/interval.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | import { IntervalObservable } from 'rxjs/observable/IntervalObservable'; 4 | /** 5 | * Generated class for the IntervalPage page. 6 | * 7 | * See https://ionicframework.com/docs/components/#navigation for more info on 8 | * Ionic pages and navigation. 9 | */ 10 | 11 | @IonicPage() 12 | @Component({ 13 | selector: 'page-interval', 14 | templateUrl: 'interval.html', 15 | }) 16 | export class IntervalPage { 17 | 18 | intervals: any =[]; 19 | constructor() { 20 | IntervalObservable.create(1000).subscribe(n => { 21 | 22 | this.intervals.push({sno:n,ctime:Date.now()}); //n will start from 0 23 | }); 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /Angular2-Time-Interval-Example/ionic-angular-time-interval-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/Angular2-Time-Interval-Example/ionic-angular-time-interval-example.png -------------------------------------------------------------------------------- /AppList/README.md: -------------------------------------------------------------------------------- 1 | Get the List of Installed App using the Ionic 3. 2 | 3 | Get App List tutorial using the below link. 4 | 5 | https://ampersandacademy.com/tutorials/ionic-framework-3/get-list-of-installed-app-using-ionic-3-framework 6 | 7 | 8 | -------------------------------------------------------------------------------- /AppList/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Installed App List 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {{x}} 15 | 16 | 17 | -------------------------------------------------------------------------------- /AppList/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /AppList/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController,Platform } from 'ionic-angular'; 3 | 4 | declare var window:any; 5 | 6 | 7 | @Component({ 8 | selector: 'page-home', 9 | templateUrl: 'home.html' 10 | }) 11 | export class HomePage { 12 | 13 | applist:any=[]; 14 | 15 | constructor(public platform:Platform) { 16 | 17 | this.getAppList(); 18 | } 19 | 20 | 21 | getAppList() 22 | { 23 | 24 | this.platform.ready().then((d)=>{ 25 | 26 | 27 | 28 | window.plugins.packagemanager.show(true, (s)=> { 29 | alert(JSON.stringify(s) ); 30 | this.applist=s; 31 | }, (e)=>{ 32 | alert('Error'); 33 | }); 34 | 35 | 36 | }); 37 | 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /AppList/ionic3-installed-app-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/AppList/ionic3-installed-app-list.png -------------------------------------------------------------------------------- /FileManagerApp/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Preview of the File Manager Application using Ionic3

4 | 6 | 7 |

How to create the File Manager Application using the Ionic3?

8 | https://ampersandacademy.com/tutorials/ionic-framework-3/create-file-manager-mobile-application-using-the-ionic-3-framework 9 | -------------------------------------------------------------------------------- /FileManagerApp/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic File Manager App 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{x.name}} 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /FileManagerApp/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | .file-color { 3 | color: #0109a3 !important; 4 | } 5 | } -------------------------------------------------------------------------------- /FileManagerApp/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { File } from '@ionic-native/file'; 4 | 5 | @Component({ 6 | selector: 'page-home', 7 | templateUrl: 'home.html' 8 | }) 9 | export class HomePage { 10 | 11 | private dirs:any; 12 | 13 | constructor(public navCtrl: NavController, private fileCtrl: File) { 14 | this.goToDir(); 15 | } 16 | 17 | public goToDir() 18 | { 19 | 20 | this.fileCtrl.listDir(this.fileCtrl.externalRootDirectory,'').then( 21 | (list) => { 22 | 23 | this.dirs=list; 24 | } 25 | ); 26 | 27 | 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /FileManagerApp/ionic-file-manager-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/FileManagerApp/ionic-file-manager-app.png -------------------------------------------------------------------------------- /Ionic-App-Health-Centre-FREE-REST-API/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/Ionic-App-Health-Centre-FREE-REST-API/.DS_Store -------------------------------------------------------------------------------- /Ionic-App-Health-Centre-FREE-REST-API/README.md: -------------------------------------------------------------------------------- 1 | ### Health Centre List Application 2 | 3 | The Health Centre List is the Ionic 2 application developed at Ampersand Academy. This application contains the health centers information in India. You can search that information by state, district, taluk and pin code and locate the hospitals(health center). 4 | 5 | You can get this app using the below URL. 6 | 7 | https://play.google.com/store/apps/details?id=com.ionicframework.health108419&hl=en 8 | 9 | 10 | We releasing the data(REST API contains JSON data) of this App for free to use. If you are an Ionic Framework Developer, then you can design your mobile application using the same data(REST API). 11 | 12 | ## Get the REST API documentation using the below link. 13 | 14 | https://ampersandacademy.com/users/health-info-api 15 | 16 | It needs a login. Please login using your Gmail. 17 | 18 | This REST API had 9 important topics. Explore them. They are listed below. 19 | 20 | 1. Get the list of available states 21 | 2. Get the list of available districts based on states 22 | 3. Get the list of available taluk based on districts 23 | 4. Get the list of available hospitals based on states 24 | 5. Get the list of available hospitals based on districts 25 | 6. Get the list of available hospitals based on taluk 26 | 7. Get particular health center information 27 | 8. Get nearest health center list 28 | 9. Get health center list by pin code 29 | -------------------------------------------------------------------------------- /ObjectArraySortPipe/README.md: -------------------------------------------------------------------------------- 1 | # Object Array Sort Ascending Order 2 | 3 | You can easily sort your array of objects using this pipe in Ionic 2&3. 4 | 5 | ### Step1. 6 | 7 | Create pipe using below command 8 | 9 | `ionic g pipe ascending' 10 | 11 | ### Step2. 12 | 13 | Copy and paste the transform code from the sort-pipe.ts file 14 | 15 | ### Step3. 16 | 17 | Add the pipe to app.module.ts file 18 | 19 | ### Step4. 20 | 21 | Create html view using the reverse. 22 | 23 | ``` 24 | 25 | 26 | 27 | ``` 28 | 29 | Here ascending is the pipe name. 30 | 31 | fieldName will be your object property name 32 | 33 | Enjoy :-) 34 | -------------------------------------------------------------------------------- /ObjectArraySortPipe/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /ObjectArraySortPipe/sort-pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from "@angular/core"; 2 | 3 | @Pipe({ 4 | name: "sort" 5 | }) 6 | export class ArraySortPipe implements PipeTransform { 7 | transform(array: any[], field: string): any[] { 8 | array.sort((a: any, b: any) => { 9 | if (a[field] < b[field]) { 10 | return -1; 11 | } else if (a[field] > b[field]) { 12 | return 1; 13 | } else { 14 | return 0; 15 | } 16 | }); 17 | return array; 18 | } 19 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![HitCount](http://hits.dwyl.io/{username}/{project}.svg)](http://hits.dwyl.io/{username}/{project}) 2 | 3 | # Ionic4 Book 4 | 5 | Hi I am writing a book for Ionic4. Will be released soon. 6 | 7 | Book Link 8 | 9 | # Ionic 4 Tutorial 10 | 11 | Get All the Ionic 4 tutorials and sample code from the below link. 12 | 13 | https://github.com/bharathirajatut/ionic4 14 | 15 | # ionic3 16 | 17 | This repository contains complete source code for Ionic 3 tutorial from https://ampersandacademy.com/tutorials/ionic-framework-3. 18 | 19 | I will try many Ionic 3 specific scripts and will write them as separate tutorial. 20 | 21 | You can follow this repo to get more tested and working script for the Ionic 3. 22 | 23 | You can find more tutorials for Ionic 3 using 24 | 25 | https://ampersandacademy.com/tutorials/ionic-framework-3 26 | 27 | ## Enroll Ionic 4 Classroom Training 28 | 29 | 30 | 31 | At Ampersand Academy, I am giving Ionic 4 training. If you are interested to join, Please visit the below link. 32 | https://ampersandacademy.com/contact-ampersand-academy-chennai.html 33 | 34 | ## Download Ionic 4Curriculum 35 | 36 | https://ampersandacademy.com/course/ionic-4-framework-training.html 37 | 38 | 39 | 40 | # Other Repo related to Ionic 41 | 42 | 1. Tinder application cards 43 | 44 | https://ampersandacademy.com/tutorials/ionic-framework-3/ionic-3-tinder-like-cards 45 | 46 | 47 | 2. Tinder demo app(UI Only) 48 | 49 | https://github.com/bharathirajatut/tinder-ui 50 | 51 | 52 | # Angular Material 6 Free Theme 53 | 54 | https://github.com/bharathirajatut/angular-material-6-theme 55 | 56 | https://ampersandacademy.com/angular-material-6-theme/ 57 | 58 | ### Ionic 4 Tutorials and Source Code Links 59 | 60 | 1. Install Ionic 4 on Windows 62 | 2. Camera plugin Example 63 | 3. Image Upload using PHP 64 | 4. Image Picker Example 65 | 5. Tabs Example 66 | 6. Phonegap Push Notification Example 67 | 7. Ionic 4 Modal Page Example 68 | 8. HTTP REST API GET Method Example Using Random User API 69 | 9. Ionic 4 Angular - How to process the JSON Object/Array? 70 | 10. Sample Login and Register Screen UI 71 | 11. Ionic 4 Geolocation Tutorial using Geolocation Plugin 72 | 12. Ionic 4 Location Accuracy Plugin Example ( Programmatically enable location using Ionic) 73 | 13. Ionic 4 Calendar UI Example 1 74 | 14. Ionic 4 Slides Example 75 | 15. Ionic 4 Infinite Scroll Example 76 | 16. Ionic 4 Google Map Example using Native Plugin 77 | 17. Ionic 4 Get Device Information 78 | -------------------------------------------------------------------------------- /RoundProgressBarExample/README.md: -------------------------------------------------------------------------------- 1 |

How to create the Round Progress Bar in Ionic 3?

2 | 3 | Install the Progress Bar module using 4 | 5 | ```bash 6 | npm install angular-svg-round-progressbar --save 7 | ``` 8 | To learn more about this, please visit the below link. 9 | 10 | https://ampersandacademy.com/tutorials/ionic-framework-3/how-to-create-a-working-round-progress-bar-in-ionic3 11 | 12 | Preview of the Round Progress bar in Browser using the Ionic serve --lab. 13 | 14 | -------------------------------------------------------------------------------- /RoundProgressBarExample/ionic3-round-progressbar-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/RoundProgressBarExample/ionic3-round-progressbar-example.png -------------------------------------------------------------------------------- /RoundProgressBarExample/progressbar.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | Round Progress Bar Page 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Full Circle Example

18 | 19 |

Semi Circle Example

20 | 21 | 22 | -------------------------------------------------------------------------------- /RoundProgressBarExample/progressbar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { ProgressbarPage } from './progressbar'; 4 | import { RoundProgressModule } from 'angular-svg-round-progressbar'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | ProgressbarPage, 9 | ], 10 | imports: [ 11 | IonicPageModule.forChild(ProgressbarPage), 12 | RoundProgressModule 13 | ], 14 | }) 15 | export class ProgressbarPageModule {} 16 | -------------------------------------------------------------------------------- /RoundProgressBarExample/progressbar.scss: -------------------------------------------------------------------------------- 1 | page-progressbar { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /RoundProgressBarExample/progressbar.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | 4 | /** 5 | * Generated class for the ProgressbarPage page. 6 | * 7 | * See https://ionicframework.com/docs/components/#navigation for more info on 8 | * Ionic pages and navigation. 9 | */ 10 | 11 | @IonicPage() 12 | @Component({ 13 | selector: 'page-progressbar', 14 | templateUrl: 'progressbar.html', 15 | }) 16 | export class ProgressbarPage { 17 | 18 | max=100 19 | current=35 20 | constructor(public navCtrl: NavController, public navParams: NavParams) { 21 | } 22 | 23 | 24 | ionViewDidLoad() { 25 | console.log('ionViewDidLoad ProgressbarPage'); 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/README.md: -------------------------------------------------------------------------------- 1 | Automate SMS OTP Verification Using Ionic3 with Nexmo 2 | 3 | 4 | https://ampersandacademy.com/tutorials/ionic-framework-3/automate-sms-otp-verification-using-ionic3-with-nexmo-part1 5 | 6 | https://ampersandacademy.com/tutorials/ionic-framework-3/automate-sms-otp-verification-using-ionic3-with-nexmo-part2 7 | 8 | 9 | -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Mobile Number Verification 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Enter Mobile Number 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController,Platform,AlertController } from 'ionic-angular'; 3 | import {Http, Headers } from '@angular/http'; 4 | import 'rxjs/add/operator/map'; 5 | import { OtpReceivePage } from '../otp-receive/otp-receive'; 6 | 7 | 8 | @Component({ 9 | selector: 'page-home', 10 | templateUrl: 'home.html' 11 | }) 12 | export class HomePage { 13 | 14 | mobile=''; 15 | constructor(public alertCtrl: AlertController, 16 | public http:Http, 17 | public navCtrl:NavController) { 18 | 19 | 20 | 21 | } 22 | 23 | sendOTP() 24 | { 25 | 26 | if(this.mobile.length!=12) 27 | { 28 | let alert = this.alertCtrl.create({ 29 | title: 'Mobile Number Required!', 30 | subTitle: 'Please enter your 10 digit mobile number with 91 country code!', 31 | buttons: ['OK'] 32 | }); 33 | alert.present(); 34 | } 35 | else 36 | { 37 | this.http.get('http://192.168.0.100/nexmosms/send-sms.php?mobile='+this.mobile) 38 | .map(res => res.json()) 39 | .subscribe(res => { 40 | 41 | console.log(JSON.stringify(res)); 42 | this.navCtrl.push(OtpReceivePage,{mobileno:this.mobile}) 43 | }, (err) => { 44 | alert("failed"); 45 | }); 46 | } 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/ionic-3-sms-otp-verification-automate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/SMSOTPVerificationAutomate/ionic-3-sms-otp-verification-automate.png -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/otp-receive/otp-receive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | OTP Receive Page 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Enter OTP 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/otp-receive/otp-receive.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { OtpReceivePage } from './otp-receive'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | OtpReceivePage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(OtpReceivePage), 11 | ], 12 | }) 13 | export class OtpReceivePageModule {} 14 | -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/otp-receive/otp-receive.scss: -------------------------------------------------------------------------------- 1 | page-otp-receive { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /SMSOTPVerificationAutomate/otp-receive/otp-receive.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Component } from '@angular/core'; 3 | import { IonicPage,NavController,Platform,AlertController,NavParams } from 'ionic-angular'; 4 | import { AndroidPermissions } from '@ionic-native/android-permissions'; 5 | 6 | import {Http, Headers } from '@angular/http'; 7 | import 'rxjs/add/operator/map'; 8 | 9 | 10 | 11 | declare var SMS:any; 12 | declare var document:any; 13 | 14 | 15 | @IonicPage() 16 | @Component({ 17 | selector: 'page-otp-receive', 18 | templateUrl: 'otp-receive.html', 19 | }) 20 | export class OtpReceivePage { 21 | 22 | 23 | otp=''; 24 | mobile=''; 25 | 26 | 27 | constructor(public alertCtrl: AlertController, 28 | public platform:Platform, 29 | public androidPermissions: AndroidPermissions, 30 | public http:Http, 31 | public navCtrl:NavController, 32 | public navParams: NavParams) { 33 | 34 | this.mobile=this.navParams.get('mobile'); 35 | 36 | document.addEventListener('onSMSArrive', function(e){ 37 | var sms = e.data; 38 | 39 | console.log("received sms "+JSON.stringify( sms ) ); 40 | 41 | if(sms.address=='HP-611773') //look for your message address 42 | { 43 | this.otp=sms.body.substr(0,4); 44 | this.stopSMS(); 45 | this.verify_otp(); 46 | } 47 | 48 | 49 | 50 | }); 51 | this.checkPermission(); 52 | } 53 | checkPermission() 54 | { 55 | this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_SMS).then( 56 | success => { 57 | 58 | //if permission granted 59 | this.receiveSMS(); 60 | }, 61 | err =>{ 62 | 63 | this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_SMS). 64 | then(success=>{ 65 | this.receiveSMS(); 66 | }, 67 | err=>{ 68 | console.log("cancelled") 69 | }); 70 | }); 71 | 72 | this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_SMS]); 73 | 74 | } 75 | receiveSMS() 76 | { 77 | 78 | if(SMS) SMS.startWatch(function(){ 79 | console.log('watching started'); 80 | }, function(){ 81 | console.log('failed to start watching'); 82 | }); 83 | } 84 | stopSMS() 85 | { 86 | if(SMS) SMS.stopWatch(function(){ 87 | console.log('watching stopped'); 88 | }, function(){ 89 | console.log('failed to stop watching'); 90 | }); 91 | } 92 | 93 | verifyOTP() 94 | { 95 | console.log("verify otp"); 96 | if(this.mobile.length==0) 97 | { 98 | let alert = this.alertCtrl.create({ 99 | title: 'OTP Required!', 100 | subTitle: 'Please enter your OTP and proceed', 101 | buttons: ['OK'] 102 | }); 103 | alert.present(); 104 | } 105 | else 106 | { 107 | this.http.get('http://192.168.0.100/nexmosms/verify_otp.php?mobile'+this.mobile+'&otp='+this.otp) 108 | .map(res => res.json()) 109 | .subscribe(res => { 110 | 111 | console.log(JSON.stringify(res)); 112 | //write your logic once otp validation is done 113 | 114 | }, (err) => { 115 | console.log("failed"); 116 | }); 117 | } 118 | } 119 | 120 | 121 | } 122 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/README.md: -------------------------------------------------------------------------------- 1 |

How to play youtube videos on Ionic 3 Framework?

2 | 3 | This repo conatains the source code to play youtube videos on your Ionic 3 application. 4 | 5 | Step1: Create an array of youtube video links 6 | Step2: Show the link using the iframe. 7 | Step3: Iframe had some security problem. So bypass the security using the Pipe. 8 | 9 | That's all. 10 | 11 | Note: Use youtube embed url. https://www.youtube.com/embed/QFkqslSeFZs. 12 | 13 | Please copy paste the required files. 14 | 15 | You can preview this using the Browser. 16 | 17 | 18 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Platform } from 'ionic-angular'; 3 | import { StatusBar } from '@ionic-native/status-bar'; 4 | import { SplashScreen } from '@ionic-native/splash-screen'; 5 | 6 | import { HomePage } from '../pages/home/home'; 7 | @Component({ 8 | templateUrl: 'app.html' 9 | }) 10 | export class MyApp { 11 | rootPage:any = HomePage; 12 | 13 | constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { 14 | platform.ready().then(() => { 15 | // Okay, so the platform is ready and our plugins are available. 16 | // Here you can do any higher level native things you might need. 17 | statusBar.styleDefault(); 18 | splashScreen.hide(); 19 | }); 20 | } 21 | } 22 | 23 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/app/app.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { YoutubePipe } from './../pipes/youtube/youtube'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { ErrorHandler, NgModule } from '@angular/core'; 4 | import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; 5 | import { SplashScreen } from '@ionic-native/splash-screen'; 6 | import { StatusBar } from '@ionic-native/status-bar'; 7 | 8 | import { MyApp } from './app.component'; 9 | import { HomePage } from '../pages/home/home'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | MyApp, 14 | HomePage, 15 | YoutubePipe 16 | ], 17 | imports: [ 18 | BrowserModule, 19 | IonicModule.forRoot(MyApp) 20 | ], 21 | bootstrap: [IonicApp], 22 | entryComponents: [ 23 | MyApp, 24 | HomePage 25 | ], 26 | providers: [ 27 | StatusBar, 28 | SplashScreen, 29 | {provide: ErrorHandler, useClass: IonicErrorHandler} 30 | ] 31 | }) 32 | export class AppModule {} 33 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/app/app.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/theming/ 2 | 3 | 4 | // App Global Sass 5 | // -------------------------------------------------- 6 | // Put style rules here that you want to apply globally. These 7 | // styles are for the entire app and not just one component. 8 | // Additionally, this file can be also used as an entry point 9 | // to import other Sass files to be included in the output CSS. 10 | // 11 | // Shared Sass variables, which can be used to adjust Ionic's 12 | // default Sass variables, belong in "theme/variables.scss". 13 | // 14 | // To declare rules for a specific mode, create a child rule 15 | // for the .md, .ios, or .wp mode classes. The mode class is 16 | // automatically applied to the element in the app. 17 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/ionic-3-youtube-player-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/YoutubeVideoPlayer/ionic-3-youtube-player-example.png -------------------------------------------------------------------------------- /YoutubeVideoPlayer/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Blank 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {{video.title}} 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | 4 | @Component({ 5 | selector: 'page-home', 6 | templateUrl: 'home.html' 7 | }) 8 | export class HomePage { 9 | 10 | videos:any=[{ 11 | title:"5 Reasons to become a Business Analyst - Ampersand Academy", 12 | url:"https://www.youtube.com/embed/QFkqslSeFZs" 13 | }, 14 | { 15 | title:"Features of R Programming Language - Why Learn?", 16 | url:"https://www.youtube.com/embed/7hItW37XdFo" 17 | }] 18 | constructor(public navCtrl: NavController) { 19 | 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/pipes/pipes.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { YoutubePipe } from './youtube/youtube'; 3 | @NgModule({ 4 | declarations: [YoutubePipe], 5 | imports: [], 6 | exports: [YoutubePipe] 7 | }) 8 | export class PipesModule {} 9 | -------------------------------------------------------------------------------- /YoutubeVideoPlayer/pipes/youtube/youtube.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { DomSanitizer } from '@angular/platform-browser'; 3 | 4 | /** 5 | * Generated class for the YoutubePipe pipe. 6 | * 7 | * See https://angular.io/api/core/Pipe for more info on Angular Pipes. 8 | */ 9 | @Pipe({ 10 | name: 'youtube', 11 | }) 12 | export class YoutubePipe implements PipeTransform { 13 | /** 14 | * Takes a value and makes it lowercase. 15 | */ 16 | constructor(private dom:DomSanitizer) 17 | { 18 | 19 | } 20 | transform(value: string, ...args) { 21 | 22 | return this.dom.bypassSecurityTrustResourceUrl(value); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /file upload/README.md: -------------------------------------------------------------------------------- 1 | This repo contains the source code for Ionic 3 file uploading with camera and transfer plugin. 2 | 3 | Tested with Moto G4 Plus. 4 | 5 | To know more 6 | 7 | https://ampersandacademy.com/tutorials/ionic-framework-3/upload-image-to-the-php-server-using-ionic-3-file-transfer-and-camera-plugin 8 | 9 | -------------------------------------------------------------------------------- /file upload/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Blank 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /file upload/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /file upload/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | 4 | import { Camera, CameraOptions } from '@ionic-native/camera'; 5 | import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer'; 6 | 7 | 8 | @Component({ 9 | selector: 'page-home', 10 | templateUrl: 'home.html' 11 | }) 12 | export class HomePage { 13 | 14 | constructor(private transfer: FileTransfer,private camera: Camera) { 15 | 16 | } 17 | 18 | upload() 19 | { 20 | 21 | let options = { 22 | 23 | quality: 100 24 | }; 25 | 26 | 27 | this.camera.getPicture(options).then((imageData) => { 28 | // imageData is either a base64 encoded string or a file URI 29 | // If it's base64: 30 | 31 | const fileTransfer: FileTransferObject = this.transfer.create(); 32 | 33 | let options1: FileUploadOptions = { 34 | fileKey: 'file', 35 | fileName: 'name.jpg', 36 | headers: {} 37 | 38 | } 39 | 40 | fileTransfer.upload(imageData, 'https://ampersandacademy.com/ionic/upload.php', options1) 41 | .then((data) => { 42 | // success 43 | alert("success"); 44 | }, (err) => { 45 | // error 46 | alert("error"+JSON.stringify(err)); 47 | }); 48 | 49 | 50 | }); 51 | 52 | 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /file upload/upload.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /filemanager/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Blank 5 | 6 | 7 | 8 | 9 | 10 | The world is your oyster1. 11 | 12 | applicationDirectory - {{applicationDirectory}} applicationStorageDirectory-{{applicationStorageDirectory}} dataDirectory - {{dataDirectory}} cacheDirectory - {{cacheDirectory}} externalApplicationStorageDirectory -{{externalApplicationStorageDirectory}} 13 | externalDataDirectory -{{externalDataDirectory}} externalCacheDirectory - {{externalCacheDirectory}} externalRootDirectory - {{externalRootDirectory}} tempDirectory - {{tempDirectory}} getFreeDiskSpace - {{getFreeDiskSpace}} 14 | 15 | 16 | 17 | 18 | 19 | {{x.name}} 20 | 21 | 22 |

File Info

23 | 24 | 25 | {{x}} 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | {{x.name}} 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /filemanager/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /filemanager/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { File } from '@ionic-native/file'; 4 | 5 | @Component({ 6 | selector: 'page-home', 7 | templateUrl: 'home.html' 8 | }) 9 | export class HomePage { 10 | info:any=[]; 11 | private dirs:any; 12 | nativepath: string; 13 | applicationDirectory=''; 14 | applicationStorageDirectory=''; 15 | dataDirectory=''; 16 | cacheDirectory=''; 17 | externalApplicationStorageDirectory=''; 18 | externalDataDirectory=''; 19 | externalCacheDirectory=''; 20 | externalRootDirectory=''; 21 | tempDirectory=''; 22 | getFreeDiskSpace:any=''; 23 | constructor(public navCtrl: NavController, private fileCtrl: File) { 24 | this.goToDir(); 25 | } 26 | randomcolor="red"; 27 | list=[{'color':'',name:'H1'}, 28 | {'color':'',name:'H2'}, 29 | {'color':'',name:'H3'}] 30 | isPressed=false; 31 | ce(x,index) 32 | { 33 | if(this.isPressed) 34 | { 35 | if(this.list[index].color=='red') 36 | { 37 | this.list[index].color=''; 38 | } 39 | else 40 | { 41 | this.list[index].color='red'; 42 | } 43 | 44 | } 45 | } 46 | pe(x,index) 47 | { 48 | if(!this.isPressed) 49 | { 50 | this.isPressed=true; 51 | this.list[index].color='red'; 52 | } 53 | else 54 | { 55 | 56 | } 57 | 58 | 59 | } 60 | public goToDir() 61 | { 62 | this.applicationDirectory=this.fileCtrl.applicationDirectory; 63 | this.applicationStorageDirectory=this.fileCtrl.applicationStorageDirectory; 64 | this.dataDirectory=this.fileCtrl.dataDirectory; 65 | this.cacheDirectory=this.fileCtrl.cacheDirectory; 66 | this.externalApplicationStorageDirectory=this.fileCtrl.externalApplicationStorageDirectory; 67 | this.externalDataDirectory=this.fileCtrl.externalDataDirectory; 68 | this.externalCacheDirectory=this.fileCtrl.externalCacheDirectory; 69 | this.externalRootDirectory=this.fileCtrl.externalRootDirectory; 70 | this.tempDirectory=this.fileCtrl.tempDirectory; 71 | this.fileCtrl.getFreeDiskSpace().then(data=>{ 72 | this.getFreeDiskSpace=data; 73 | }) 74 | this.fileCtrl.listDir(this.fileCtrl.externalRootDirectory,'').then( 75 | (list) => { 76 | alert(JSON.stringify(list)); 77 | // 78 | for(let x=0;x{ 84 | 85 | // 86 | this.fileCtrl. 87 | getFile(de,list[x].name,{}).then(data=>{ 88 | 89 | data.file(tmpFile=> { 90 | 91 | alert(JSON.stringify(tmpFile) ); 92 | 93 | console.log('tmpFile', tmpFile); 94 | console.log('tmpFile.size', tmpFile.size); 95 | 96 | }, ((error) => alert(JSON.stringify(error) ))); 97 | this.info.push(JSON.stringify(data)); 98 | 99 | }); 100 | 101 | // 102 | 103 | }); 104 | //break 105 | } 106 | else 107 | { 108 | /*this.fileCtrl.resolveDirectoryUrl(this.fileCtrl.externalRootDirectory).then(de=>{ 109 | 110 | this.fileCtrl.getDirectory(de,list[x].name,{}).then(data=>{ 111 | data.getMetadata(meta=>{ 112 | alert(JSON.stringify(meta)); 113 | }); 114 | 115 | }); 116 | }); 117 | break; 118 | */ 119 | } 120 | 121 | } 122 | 123 | 124 | 125 | // 126 | this.dirs=list; 127 | } 128 | ); 129 | 130 | 131 | } 132 | 133 | public loadList(list: any) 134 | { 135 | 136 | } 137 | 138 | open(x) 139 | { 140 | 141 | } 142 | 143 | } 144 | -------------------------------------------------------------------------------- /lazyNavigation/README.md: -------------------------------------------------------------------------------- 1 | Ionic 3 Lazy loading Page Navigation Example. 2 | 3 | https://ampersandacademy.com/tutorials/ionic-framework-3/navigate-route-to-another-page-using-ionic-3 4 | 5 | 6 | This approach is available in Ionic 3 7 | -------------------------------------------------------------------------------- /lazyNavigation/contact/contact.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | contact 11 | 12 | 13 | 14 | 15 | 16 | 17 | This is contact page 18 | -------------------------------------------------------------------------------- /lazyNavigation/contact/contact.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { ContactPage } from './contact'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | ContactPage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(ContactPage), 11 | ], 12 | }) 13 | export class ContactPageModule {} 14 | -------------------------------------------------------------------------------- /lazyNavigation/contact/contact.scss: -------------------------------------------------------------------------------- 1 | page-contact { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /lazyNavigation/contact/contact.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | 4 | /** 5 | * Generated class for the ContactPage page. 6 | * 7 | * See https://ionicframework.com/docs/components/#navigation for more info on 8 | * Ionic pages and navigation. 9 | */ 10 | 11 | @IonicPage() 12 | @Component({ 13 | selector: 'page-contact', 14 | templateUrl: 'contact.html', 15 | }) 16 | export class ContactPage { 17 | 18 | constructor(public navCtrl: NavController, public navParams: NavParams) { 19 | } 20 | 21 | ionViewDidLoad() { 22 | console.log('ionViewDidLoad ContactPage'); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /lazyNavigation/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Blank 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lazyNavigation/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /lazyNavigation/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | 4 | 5 | 6 | @Component({ 7 | selector: 'page-home', 8 | templateUrl: 'home.html' 9 | }) 10 | export class HomePage { 11 | 12 | constructor(private navCtrl:NavController) 13 | { 14 | 15 | } 16 | goContact() 17 | { 18 | this.navCtrl.push('ContactPage'); 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /readSMSList/README.md: -------------------------------------------------------------------------------- 1 | Ionic 3 SMS List APP 2 | 3 | https://ampersandacademy.com/tutorials/ionic-framework-3/ionic-3-read-sms-and-display-sender-message-as-list 4 | 5 | Screenshot of the source code. 6 | 7 | 8 | 9 | 10 | Tested on Moto G4 Plus(Android Device). 11 | -------------------------------------------------------------------------------- /readSMSList/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Message List 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

{{x.address}}

16 |

{{x.body}}

17 | 18 | 19 | -------------------------------------------------------------------------------- /readSMSList/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController,Platform } from 'ionic-angular'; 3 | declare var SMS:any; 4 | import { AndroidPermissions } from '@ionic-native/android-permissions'; 5 | 6 | @Component({ 7 | selector: 'page-home', 8 | templateUrl: 'home.html' 9 | }) 10 | export class HomePage { 11 | 12 | 13 | messages:any=[]; 14 | constructor(public platform:Platform,public androidPermissions: AndroidPermissions) { 15 | this.checkPermission() 16 | } 17 | checkPermission() 18 | { 19 | this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_SMS).then( 20 | success => { 21 | 22 | //if permission granted 23 | this.ReadSMSList(); 24 | }, 25 | err =>{ 26 | 27 | this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_SMS). 28 | then(success=>{ 29 | this.ReadSMSList(); 30 | }, 31 | err=>{ 32 | alert("cancelled") 33 | }); 34 | }); 35 | 36 | this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_SMS]); 37 | 38 | } 39 | ReadSMSList() 40 | { 41 | 42 | this.platform.ready().then((readySource) => { 43 | 44 | let filter = { 45 | box : 'inbox', // 'inbox' (default), 'sent', 'draft' 46 | indexFrom : 0, // start from index 0 47 | maxCount : 20, // count of SMS to return each time 48 | }; 49 | 50 | if(SMS) SMS.listSMS(filter, (ListSms)=>{ 51 | this.messages=ListSms 52 | }, 53 | 54 | Error=>{ 55 | alert(JSON.stringify(Error)) 56 | }); 57 | 58 | }); 59 | } 60 | 61 | } 62 | -------------------------------------------------------------------------------- /readSMSList/ionic-3-framework-sms-read-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/readSMSList/ionic-3-framework-sms-read-list.png -------------------------------------------------------------------------------- /readSMSList/pipes/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bharathirajatut/ionic3/53320cba8dc43ede12292e51c44befa20cd9d6f1/readSMSList/pipes/.DS_Store -------------------------------------------------------------------------------- /readSMSList/pipes/first-caps/first-caps.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | /** 4 | * Generated class for the FirstCapsPipe pipe. 5 | * 6 | * See https://angular.io/api/core/Pipe for more info on Angular Pipes. 7 | */ 8 | @Pipe({ 9 | name: 'firstCaps', 10 | }) 11 | export class FirstCapsPipe implements PipeTransform { 12 | /** 13 | * Takes a value and makes it lowercase. 14 | */ 15 | transform(value: string) { 16 | return value.charAt(0).toUpperCase(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /standardNavigation/README.md: -------------------------------------------------------------------------------- 1 | Ionic 3 standard navigation(used in the Ionic version 2) 2 | 3 | https://ampersandacademy.com/tutorials/ionic-framework-3/navigate-route-to-another-page-using-ionic-3 4 | 5 | Drawbacks: 6 | 7 | 1. More typing 8 | 2. More import statements 9 | 3. Increases app loading time 10 | -------------------------------------------------------------------------------- /standardNavigation/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { ErrorHandler, NgModule } from '@angular/core'; 3 | import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; 4 | import { SplashScreen } from '@ionic-native/splash-screen'; 5 | import { StatusBar } from '@ionic-native/status-bar'; 6 | 7 | import { MyApp } from './app.component'; 8 | import { HomePage } from '../pages/home/home'; 9 | import { ContactPage } from '../pages/contact/contact'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | MyApp, 14 | HomePage,ContactPage 15 | ], 16 | imports: [ 17 | BrowserModule, 18 | IonicModule.forRoot(MyApp) 19 | ], 20 | bootstrap: [IonicApp], 21 | entryComponents: [ 22 | MyApp, 23 | HomePage,ContactPage 24 | ], 25 | providers: [ 26 | StatusBar, 27 | SplashScreen, 28 | {provide: ErrorHandler, useClass: IonicErrorHandler} 29 | ] 30 | }) 31 | export class AppModule {} 32 | -------------------------------------------------------------------------------- /standardNavigation/contact/contact.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | contact 11 | 12 | 13 | 14 | 15 | 16 | 17 | This is contact page 18 | -------------------------------------------------------------------------------- /standardNavigation/contact/contact.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { ContactPage } from './contact'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | ContactPage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(ContactPage), 11 | ], 12 | }) 13 | export class ContactPageModule {} 14 | -------------------------------------------------------------------------------- /standardNavigation/contact/contact.scss: -------------------------------------------------------------------------------- 1 | page-contact { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /standardNavigation/contact/contact.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | 4 | /** 5 | * Generated class for the ContactPage page. 6 | * 7 | * See https://ionicframework.com/docs/components/#navigation for more info on 8 | * Ionic pages and navigation. 9 | */ 10 | 11 | @IonicPage() 12 | @Component({ 13 | selector: 'page-contact', 14 | templateUrl: 'contact.html', 15 | }) 16 | export class ContactPage { 17 | 18 | constructor(public navCtrl: NavController, public navParams: NavParams) { 19 | } 20 | 21 | ionViewDidLoad() { 22 | console.log('ionViewDidLoad ContactPage'); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /standardNavigation/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic Blank 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /standardNavigation/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /standardNavigation/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { ContactPage } from '../contact/contact'; 4 | 5 | 6 | 7 | @Component({ 8 | selector: 'page-home', 9 | templateUrl: 'home.html' 10 | }) 11 | export class HomePage { 12 | 13 | constructor(private navCtrl:NavController) 14 | { 15 | 16 | } 17 | goContact() 18 | { 19 | this.navCtrl.push(ContactPage); 20 | } 21 | 22 | } 23 | --------------------------------------------------------------------------------