Up and Running With Ionic 3 in 15 Minutes
HTML-код
- Опубликовано: 8 сен 2024
- Here's a blog post for this video: blog.paulhalli...
My Learn Ionic 3 From Scratch Course - www.udemy.com/...
Support the content: / paulhalliday - EXCLUSIVE early access to the next video(s), as well as other benefits!
Up and Running With Ionic 3 in 15 Minutes
Want to get up and running with Ionic 3 without all the fuss? Here's a quick start on the best way to do that.
For more Ionic 2 information check out learnionic2.com.
For everything else: pwhsoftware.com
The extra epic content always comes via email first. Sign up so you're not left behind: eepurl.com/cBCqO9
Want to support more awesome tutorials? You can buy me a coffee! learnionic2.co...
You can also find me:
/ pwhsoftware
/ paulhal
You are best youtuber rn always looking forward to your daily videos thank you!
+Sagaya Abdul Thanks Sagaya! :)
Nearly 1,000 subscribers! I can smell a "FIRE" in my "BASE" soon. Can anyone else?
Thanks to the Patreon supporters!
Paul Halliday
thank you for your useful tutorials and am sure tech magazines are gonna package this videos soon as free DVD gift with their weekly or Monthly publications. you are in the right path keep it up.
I am quite new to ionic and I am trying to develop a todo application in ionic version 3.9. I tried creating a fab button which would lead me to a “ArchiveTodos” Page, but each time I click on the fab button I get this result:
Error
Close
Runtime Error
_co.gotoArchivePage is not a function
Stack
TypeError: _co.gotoArchivePage is not a function
at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:152:31)
at handleEvent (localhost:8100/build/vendor.js:13963:155)
at callWithDebugContext (localhost:8100/build/vendor.js:15472:42)
at Object.debugHandleEvent [as handleEvent] (localhost:8100/build/vendor.js:15059:12)
at dispatchEvent (localhost:8100/build/vendor.js:10378:25)
at localhost:8100/build/vendor.js:11003:38
at HTMLButtonElement. (localhost:8100/build/vendor.js:39492:53)
at t.invokeTask (localhost:8100/build/polyfills.js:3:15660)
at Object.onInvokeTask (localhost:8100/build/vendor.js:5125:33)
at t.invokeTask (localhost:8100/build/polyfills.js:3:15581)
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.11
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 8.9.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68... Safari/537.36
HERE IS MY home.ts CODE:
import { Component } from ‘@angular/core’;
import { NavController, AlertController, reorderArray } from ‘ionic-angular’;
import { TodoProvider } from “…/…/providers/todo/todo”;
import { ArchivedTodosPage } from “…/archived-todos/archived-todos”;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
public todos = [];
public reorderIsEnabled = false;
constructor(private todoProvider: TodoProvider, public navCtrl: NavController, private alertController : AlertController, public archivedtodosPage : ArchivedTodosPage) {
this.todos = this.todoProvider.getTodos();
}
goToArchivePage(){
this.navCtrl.push(ArchivedTodosPage);
}
toggleReorder(){
this.reorderIsEnabled = !this.reorderIsEnabled;
}
itemReordered($event){
reorderArray(this.todos, $event);
}
openTodoAlert(){
let addTodoAlert = this.alertController.create({
title: “Add A Todo”,
message: “Enter your Todo”,
inputs: [
{
type: “text”,
name: “addTodoInput”
}
],
buttons: [
{
text: “Cancel”
},
{
text: “Add Todo”,
handler: (inputData)=> {
let todoText;
todoText = inputData.addTodoInput;
this.todoProvider.addTodo(todoText);
}
}
]
});
addTodoAlert.present();
}
}
HERE IS MY home.html CODE:
the Real Todo Edit Done
{{todo}}
HERE IS MY app.module.ts CODE:
import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { TodoProvider } from “…/providers/todo/todo”;
import { HttpClientModule } from ‘@angular/common/http’;
import { ArchivedTodosPage } from “…/pages/archived-todos/archived-todos”;
@NgModule({
declarations: [
MyApp,
HomePage,
ArchivedTodosPage
],
imports: [
HttpClientModule,
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ArchivedTodosPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
TodoProvider
]
})
export class AppModule {}
HERE IS MY app.component.ts CODE:
import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { ArchivedTodosPage } from “…/pages/archived-todos/archived-todos”;
import { HomePage } from ‘…/pages/home/home’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
rootPage:any = HomePage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
Many thanks, great tutorial! I've been struggling several nights getting all together and all the time at least something did not work.
Watching this, it took me half an hour to build my 1st apk.
Liked and subscribed : )
Awesome! That makes me happy to know it helped. :)
Don't forget I've got a "Learn Ionic 3 From Scratch" course that is currently available at a discount as it's in early access! This may be useful for you.
www.udemy.com/learn-ionic-3-from-scratch/?couponCode=LEARNIONIC3
Checked it out, will sign up for the course. : )
Thanks for making the purchase! It's still a work in progress with it being in early access, but similar to the RUclips channel, lectures and content is added daily.
Paul
Brilliant, great job covering some of the smaller but important details.
+John K Thanks John.
New subscriber here, Paul i was wondering if you could do most demanded 3 tutorials that alot of people encounters
1) Connecting ionic app to your Android or iOS phone step by step
2) Creating executable file for iOs and uploading to phone
3) last but not the least when running ionic of emulator people get alot of problems, in my case i always encounter different problems, if you could run through the check list would be great
i think it would benefits everyone, not one has done these before and you have alot of subscribers too.
Cheers
Thank you so much Paul
+Siddharth Ray Thanks for watching! :)
thank you for your amazing tutorials, its really very helpful!
Paul ! I have no doubt your are the best!
You're too kind! Thanks for the support, it means a lot.
Very thorough! :)
Thanks. I am surprised you don't address Linux users in your instructions, since many developers use it. Cheers!
thanks for the video. BUT the audio volume is bit low
hi,
can you possibly do a video on ionic3 native Calendar like creating Calendar events that can store info on the mobile native Calendar?
thanks in advance
Hello Thank for the course. I want to open et specific pdf document in ionic (assets/pdf/leson.pdf) but I never do It, to add a serch button, Bookmark. Thank for your help.
Hello Sir, Can u please upload some samples on using datatables in ionic 3
in project of ionic 2 when run in the smartphone the botton not run :(
i will check....
Hi Paul! great tutorials ! please can you make one about BackgroundGeolocation ? In advance many many thanks!!!
Hi Emir,
I have a Geolocation video within my Ionic Native course: paulhalliday.io/p/master-ionic-3-with-ionic-native-and-cordova-integrations :)
Paul Halliday
Yes, thanks. I have watched some tutorials about that plugin. But I refer to the plugin: Background Geolocation. ionicframework.com/docs/native/background-geolocation/
I'm thinking on take your Ionic's course there are really interesting.
Thanks!
Emir A. Bosques R. Gotcha. Misread the comment, I'll look at adding BackgroundGeolocation to that course. :)
Paul Halliday
Oh thanks! Amazing! Dude. could you inform me when this chapter be ready? you'll put only on the course content or in your RUclips channel too?
Thanks
Hi Paul. Can you make a tuts about the camera preview plugin?
Will do Mohammed!
Great :) Have been trying to get it to work, but no luck so far. So would appreciate it much!
how do I reload ionic application
Hello Sir,
which version of visual studio you are using?
Thanks
I use VS Code for all of my editing. I even tend to use it with my C# projects now!
Thanks Paul for quick reply. I installed VS code and its really great.
Surinder Singh Awesome. It's my favourite editor too. :)
After running apk in android its show the white blank screen and app closed after 2-3 seconds plzz help
Hi Lalit,
I offer assistance and code reviews at Patreon: www.patreon.com/PaulHalliday
Paul
@9:32: brew install android-sdk is a bad idea if you use Cordova. I burnt thru 2 days figuring out stuff based on that comment, and Google recommending Android Studio.... See my answer here stackoverflow.com/questions/42667277/cordova-phonegap-android-target-not-installed-android-studio-installed/43565291#43565291
this in not ionic3 version ...
ionic cordova platform add android to add the android platform
THIS WASNT 15 MINS THIS WAS 15 SECONDS OVERTIME COMPLETE WASTE OF MY TIME!!
this is not ionic 3 beware of it users.