IONIC 2 FULL APP (1/2) THE BASICS | Ionic 2 + Angular to build a full Mobile Application

[@nishchaypant6087]

one of the most sensible tutorial that starts building from scratch.Thanks

[@academind]

So happy to read that nishchay, thank YOU for your support!

[@manuelgozzi8264]

Hi, basically I’m a Java developer. I got into your ionic 2 course just today. It’s amazing. I had a little knowledge, but your explainations are the best. I did 32 lectures already. 100% satisfied. Keep up the good work, man!

[@academind]

Welcome on board of the course, awesome to have you there! And thank you so much for this amazing feedback, it makes me really happy to read that the course is helpful and that you like the content. I'll try my best to keep up the work :)

[@khondakarreadulislam6337]

After watching your Node.js Tutorial I am fully convinced that your Udemy Ionic Course is 200% worthy to register.

[@academind]

So happy to read that, really great to have you on board of the course, I hope that you will like it :)

[@ismaelgadji5544]

Vos vidéos sont tellement tops. Encore une fois merci.

[@academind]

Merci beaucoup Ismael :)

[@aml1ma]

This is just great Max. You are a great addition to the Angular and Ionic community. Keep up the good work!

[@academind]

Many, many thanks - that's truly awesome to hear!

[@munishtyro]

It feels reliable when I see your face in a video preview. My first video for ionic 2 and as usual It was awesome learning from you. Looking forward to buy another course from your list. Recipe Service is still on your mind !! Lol

[@academind]

Haha, awesome to hear that ;) Thanks for your amazing feedback!

[@PauloSantos-yu1tn]

Thank you very much! I started to learn ionic about 3 days ago! I am a subscriber of you channel.

[@academind]

Great to have you on board - I'm happy to hear you're enjoying it!

[@paulocraice]

When creating a new .ts file (just like Places.Service.ts) or something to tag along, please make use of CLI -- NEVER -- do this manually. Node mess up sometimes and you will spend hours trying to figure out the hell it is the missing module. Anyway, great job my friend. Thanks;)

[@academind]

It's super important to understand what happens behind the scenes though, that's why I absolutely find it important to show the manual process, too. Otherwise, you know how to do it "magically" but got no clue what actually happened

[@paulocraice]

I understand you and I agree. But for three days I did burn my brain to fix the Cannot find module '../../services/places.service'. from console. So I figured out Cordova follow a logic timeline. Just like: first put the ball at the penalty mark > choose where to shoot the ball > shoot > score (boolean) > celebrate > put the ball back to kick-off mark at the middle of the pitch and start over. Good Football analogy;) And yes... Im totally against the cut and copy and I don't feel ok to provide the source code. If you get stuck a lot but take it as a challenge -- you always will have a step ahead.

[@JuanFVasquez]

Update: When starting your new Ionic project don't use the --v2 flag, use --type flag instead: ionic start my-places blank --type=ionic-angular If you want an Ionic app version 1 then use: --type:ionic1

[@dhruvkotak5741]

True Thanks

[@rishabhrawat4456]

I'm an enrolled student of Max Ionic 2 course in Udemy and I must say Max have done a pretty good job, don't hesitate and go for it and Max can you make some Angular 2 with Php videos even just 1 video with basic working

[@academind]

Thanks so much for your great feedback! I actually already do have videos about Angular + Laravel (which is a PHP framework) - you might want to have a look at those

[@arwask4524]

Thank you for explaining the page navigation so nicely. I finally get it. yay

[@academind]

Great to read that the video was of help to you Arwa :)

[@jonathanaditya9197]

very good tutorial for a beginner like me ! amazing ! looking forward for some more amazing tutorials from your channel

[@academind]

Thanks a lot for your absolutely fantastic feedback Jonathan! You can also find most of our videos sorted by topic on our website: academind.com/learn

[@SamirKahvedzic]

in ionic 2 services are called providers and you can use ionic cli to generate new provider: ionic g provider provider-name

[@jannickpedersen546]

and now we have 5/6 Ionic xD which i need to use for my 6th semester exam project :D but after a good month i am already advanced - i did came from ReactJS n NextJS with JS vanilla. I enjoy it plus the ion grid and the different ion-content / tags name are nice for the material UI

[@tjabrahamsen8907]

Thank you so much for sharing You are a very good teacher. Do you have any opinions, or experience with just running plain Angular 2 apps on mobile devices?

[@academind]

You mean normal web apps (no progressive web apps using service workers)? Yeah, works fine, nothing special about them to be honest. Haven't tested it on older devices/ browsers though. Of course performance can become and issue there. And the rather big initial download might be problematic in some areas. You can optimize the bundle size a lot with AoT and chunking though.

[@tjabrahamsen8907]

Ok. Thanks for your response. Hey...aren't you supposed to be in bed in Berlin now? :-)

[@Jamie-kf2vf]

Great video. I have just moved from Sencha Touch to Ionic so will be following your tutorials to get up and running (hopefully) fairly quickly!

[@academind]

I really hope that the videos will be helpful for you Jamie, great to read that you liked this one!

[@glgurel_21598]

thank you so much for providing a very useful video

[@N96123]

Thanks for tutorial. Ionic runs on a web page. It can not render native components but it can use native api like access camera,gps,gallery etc. So its hybrid system not a native.

[@leodcs]

What an awesome job you did there man. Thank you very much and keep up the good work!

[@academind]

So happy to read that you like the videos Léo! Thank you for your comment, I'll try my best to keep up the work :)

[@ankitkaushal7766]

just bought your ionic 2 udemy course... Hope it will be awesome as like your other courses :)

[@academind]

Great to have you on board! :)

[@igors.7515]

Hi Max ;) So, if we have built Angular app first for the Desktop, should it be rewritten for iOS and Android using Ionic FW? And, when we are talking about the responsiveness of Angular app on different breakpoints, how to go about it? Bootstrap, or specifically built templates for the mobile, or there is anything else like Ionic which concerned over mobile experience? Thanks a lot!

[@academind]

Ionic indeed would be a good choice to re-write your app for mobile (a lot of code should be reusable). Regarding the responsiveness: Ionic already ships with some helpful features like its Grid and the built-in component. But you would still use media queries to fine tune the layout, yes

[@taoufikelghaouat7742]

That is nice thank you, I have a question : Have ou already created a barometer application or called the barometer existing in mobile phone in an ionic application ?Sounds easy but I found no documentation so far in this, thanks.

[@giovanigenerali]

Great tutorial Max, thanks a lot.

[@academind]

Thank you Giovani - I'm glad you're enjoying it!

[@narendra5306]

Plz Give Moretutorials on Ionic Framework

[@AakashSharma-xl2zv]

Incredible Sir!! Learnt a lot . Appreciate your effort. :)

[@academind]

Happy to hear that, thanks so much Aakash!

[@sabriboubaker]

Awsome video. Many thanks

[@academind]

Thanks so much Sabri!

[@Tlbsoftware]

This framework is pretty cool. It is way quicker to get things up and running than through android alone. @Academind Can you show how to incorporate 3rd party js libraries into these apps? For example Leafletjs?

[@academind]

Thanks for your great feedback and your suggestion Taylor! I got no such plans as of now but that's certainly something I'll keep in mind. Not just for Ionic but for Angular in general.

[@Tlbsoftware]

Academind looks like you can npm install leaflet and then import it like any other package in a ts file. Then from there it's just leaflet stuff which their docs are super straight forward and easy to follow

[@ridamakhchan]

Thanks for this course.

[@academind]

Thank YOU for your feedback rida :)

[@ahsanhabib2577]

Launching ionic apps takes way too long, is there any way I can speed up the start up process. Great tutorial btw.

[@giorgiobrugnone6879]

Really usefull and really clear...thanks for Italy

[@academind]

Thanks so much Giorgio, really happy to read that!

[@giorgiobrugnone6879]

I'm really first in Ionic, but i must learn it for my work. I found yout tutorial absolutly cool and clean. So i can start immediatly to write some code. Really thnak you. Have other videos like this to suggest me?

[@idopinhas]

Again , Great Video , Great's tutorial every time , Thanks man , Good job .

[@dali208]

thank you very much very helpful and nice video . please can you explain how to add an ads in the app with ionic or angular ? thanks

[@davidebracaglia6064]

This is a great tutorial!

[@academind]

Thanks Davide, great to read that you like it :)

[@BenInBlack]

Excellent Series... I have 1 question? What theme are you using in Webstorm, and if it is personal can you export it. Plz ;-)

[@academind]

It's a default theme => Darcula (no typo ;))

[@dhruvkotak5741]

Very nice... works perfectly fine.

[@hachij_]

awesome man! thanks for the tutorial

[@academind]

So happy to read that, thank you so much!

[@abedinzhuniqi5689]

I like your channel and i attended a course in the udemy of angular 4 by Max and you are a great teacher. I have a question about Ionic of course if you have time to response me. I am using in the ionic app but always I have X-frame Options same origin what do you suggest me to do ? Best Regards and Keep Up

[@academind]

Thanks so much for your great feedback! This thread might be helpful to you: forum.ionicframework.com/t/show--inside-ionic-app/113269

[@Bomb4stic]

Thank you so much for the reply but I am not getting a solution on that link

[@BantexMotoVlog]

After Laravel This one again Great Job Sir :)

[@academind]

Thanks a lot Carlo, really happy to hear you're liking it!

[@madson973]

Nice! Very useful, thanks!

[@academind]

Thank you so much Madson!

[@maron3569]

he is the best! max do i have to be a pro in angularjs in order to buy this course? i am currently learning your angularjs4 course in udemy and i have my hands on it and pretty much understand the basics.. i cant wait to build apps so i am just wondering if i could go ahead and start this ionic course without completing everything in my angularjs4 course? your advice pls

[@academind]

No, you don't need to be a pro - basic Angular knowledge should suffice. You can always jump back into the Angular course if you feel like something's missing :)

[@mrmomo42]

this has been really helpful

[@academind]

It really makes me happy to read that, thank you :)

[@leonieschalkwyk2176]

I need to re-skill myself. I would like to learn how to develop mobile apps with server component. Can you suggest a roadmap of what i need

[@academind]

It really depends on whether you want to create "real" native mobile apps, you'll then have to learn Android/ Java and/or Swift/ObjectiveC. Or go with solutions like Ionic and maybe learn developing (frontend) web apps, too. Then JavaScript is the way to start!

[@andreasmiles6066]

Thanks a lot dude!

[@academind]

Thank YOU for your comment Andreas!

[@Sunhariyaden]

very good explanation

[@academind]

Thank you very much for your great comment!

[@GrupoINTIWeb]

What is the meaning of "boiler blades" ? By the way, can ionic create a clone for Easy Taxi or uber ?

[@SiyamandRashid]

i have a login page before the page which shows the places added , when i add a new place and tab on back, it signout and i have to sign in again ... basicly i belive the issue with the push or pop out the stack you mentioned in your video , so how to solve this when you click back or when you did the enhancement you click add place rgards

[@gurbangurbanov1839]

cool lesson man, you awesome! thanks!

[@academind]

Really happy to hear you're enjoying it Gurban, thank you!

[@tinafredborg493]

Having a problem with the Geolocation getCurrentPosition (I tried copy the line in the docs too)I use webstorm and it tells me there is no typeof with the function, I tried to write just import ionic-native but didn't work tried search google for help, but no luck so far u have an idea thanks for great videos and now doing your udemy course

[@mphosimatete2828]

I am using VSC as my editor. The changes made on VSC aren't being transferred to the ionic project on chrome. Any suggestions as to why?

[@mohamedabdelaziz1785]

Plz Give More tutorials on Ionic Framework in section native ionic Like Camera and to covert this app to file apk for android

[@keithhiggins4134]

When i generate a new page , Inside the new folder there is also an moduale.ts folder for that page? How come that isn't in yours?

[@niteshd2]

Yes. I have also got that one.

[@TheTvRadioDude]

What is the name of the program you write code in? Currently using brackets but this looks much better..!!

[@academind]

I use Webstorm by Jetbrains.

[@mrthongthai7784]

Thank you Mindspace. Do i just install the IDE so he will automatic suggestions and import which relative components for me? Or i must set up something esle for easy developing ionic 3 app?

[@jackson3899]

awesome one

[@academind]

Thanks so much!

[@crazyhq270]

Awesome tutorial. But I have a question. What is the best free alternative to jetbrains webstorm?

[@academind]

Microsoft Visual Studio Code is pretty good

[@SiyamandRashid]

your videos are greate , i have question i was not getting it : in mint 33 you wrote : what is this ??? and what is stand for , what i leave it blank or use something else regards

[@rtalexk]

`*ngFor` directive let you replicate a component as much as you want, in this particular case, `*ngFor` are driven through `places` array (that is declared on `home.ts`) and for each item on it, a new item called `place` is declared (`let place of places`) then, you'll have as much `` items as items on `places array`. Then, each `` have its own `place` variable, that can be acceded on its own `scope` and you can access that variable using curly braces ( `{{}}` ) as follow: `{{ place.title }}`. `place` is one object on `places array` and places has a property called `title`. PS: sorry for my bad English.

[@SiyamandRashid]

thank you for your reply , in part 2 of this video I have an issue i have uploaded my source file to this dropbox www.dropbox.com/s/ka2b3pckn2ucjb5/src.zip?dl=0 if you have time and have a quick look will be great ... if you found the issue and add a comment between the line will be awesome thanks

[@Danuxsy]

lmao

[@hasanthidevendra7049]

No ionic-angular package found, do you have Ionic installed? (CLI v2.0.0) Your system information: Cordova CLI: 7.0.1 Ionic Framework Version: 3.3.0 Ionic CLI Version: 2.0.0 i got this..how to over come this and create page

[@niteshd2]

Hello Sir, I have follow your all instructions but getting one error "Runtime Error - Unexpected value 'undefined' declared by the module 'AppModule'". The codes I have enter are exactly same as yours. I just got one more file while generating new page ie. 'new-place.module.ts' which is missing in your file. Please help me.....

[@bimaaghafara7332]

lol, me too :D Just change "NewPlace" to "NewPlacePage in: 1. NewPlace class at new-place.ts 2. NewPlace declarations, forChild, and exports at new-place.module.ts

[@maurosemproni9433]

You also have to change the name in new-place-module.ts, row 3: import { NewPlacePage } from './new-place';

[@RoySourav]

how to maintain session after login? I am using (Dot net WebApi in mid tier )

[@musthafacircuit9909]

"Runtime Error: NewPlacePage is not defined" How this error is coming?

[@proxima7199]

Hi, Max. Thank for your videos ) I have a question, mb you can help us ) We have project which based on WebRTC/NextRTC. It works fine from Windows and MacOS from Chrome browser and even from android as well. But from iOS it doesn't work at all even from chrome as we understood iOS doesn't support webRTC. That's why we decided to create Mobile version of our project and we think to create project based on Ionic 2 framework which is crossplatform. I would like to know is it good decision to create such application on Ionic 2? Could you give us advice how to make correct decision? Or advice us some plugin which gives us permission to camera and sends video stream to backend because our backend based on Java.

[@academind]

I got no experience working with WebRTC/ NextRTC but generally, Ionic 2 should be capable of creating such an app. There are "native" plugins (check the Ionic 2 docs => "native") which allow you to access native device features.

[@alicelf]

Any chance for Vue + Framevork7 tuts? =)

[@harshanerella4001]

by doing ionic serve the page is displaying as site not reachable. can anyone help

[@iyyappanpauls]

Tamilan: Wow great explanation.. Keep it up

[@academind]

Thank you so much for your comment, I'll try my best to keep it up :)

[@romandraliuk75]

hi, have a problem using ngModel blank i always get an error message

[@ajibolaoladubu9671]

thanks for the video. pls i'm having this error Runtime Error Can't resolve all parameters for PlacesService: ([object Object], ?, [object Object]).

[@nikhilgoyal007]

Hi! Can someone please clarify the following - My understanding is if I make a desktop browser app, then I use angular and if I make a mobile frontend then I re-write in ionic ? Isn't it repetitive . What am i missing here please ? I just want to write once fopr desktop and mobile if possible . thanks

[@dipeshjayswal5791]

Grate Video

[@academind]

Thank you Rahul!

[@dhruvvprakash]

Thanks Max :)

[@academind]

You're welcome - I'm glad you're enjoying it!

[@Mufassirislam]

HI, Hi, i search too much on google but not getting any helping source can any one tells me that how to use nested loops in ionic 2 and sqlite... I want categories and their products as a object ... Like: { catName: Food, products : [ {title: mango}, {title: apple} ] } i want to do like that but i get error on nested loop of promise

[@crazymindset]

added place are not getting displayed on home page plz help this is my first app im developing

[@fleedum]

Same problem ... @MindSpace the ion-items are created but the text isn't visible

[@fleedum]

@Vijay Rathur, you forgot to give your input field a name probs!

[@fleedum]

And perhaps the ngModel attribute for the input field

[@alizamaharjan1831]

I am getting this problem while adding google maps to the app. Uncaught TypeError: core_1.OpaqueToken is not a constructor

[@ecasanes]

I have a question, can Ionic 2 cater for tablet view not just phone view?

[@hachij_]

use ionic-sm-{modifier} maybe?

[@HikwaMehluli]

Love your tutorials. Just wanted to add this for anyone looking at better live preview You can use localhost:8100/ionic-lab cd into your app folder in terminal or cmd and type: ionic serve --lab Which gives all three platforms windows, android and ios

[@allyssagalinato9089]

There is no data in my home it says "Cannot read property 'title' undefined"

[@SagarDash1]

Runtime Error Cannot read property 'title' of undefined :(

[@pulkitk3388]

Sir after doing all this there is no build error but there is blank screen what should i do

[@SiyamandRashid]

i did all no im getting blank screen too, what was the issue any idea?

[@SiyamandRashid]

i found my isseue was the #f="ngForm">,instead i type ngFrom ,,,, its better to try your app in Firefox , and inspect the page it will show you the error you have

[@dannyso2758]

Can I know what is the editor you are using?

[@academind]

I'm using JetBrains' WebStorm in this video :)

[@codefrog8779]

Hello I want Ionic 3 videos of you on udemy, can i have a link ?

[@academind]

Of course, here is a link to the course at a discounted price, would be great to welcome you on board: www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/?couponCode=ACAD_M

[@mansi_2160]

hey I tried it but i am unable to install cordova and ionic. actually it is not working in only my pc... in my friends pc i tried and both are installed successfully... my pc is windows 8. please help any one if you have solution of this

[@aeid502]

any alternatives for Vuejs ?

[@JacquesvanWyk]

yes vuejs please

[@utna9337]

react?

[@JacquesvanWyk]

react native there is

[@JacquesvanWyk]

thanks

[@gkiokan]

weex is the equivalent on vue for creating native vue applications, worth the look.

[@soepet]

The plus ("add") icon is displayed on top of the title in my app... Does anybody know how to fix this?

[@rashidaslam4999]

Missing your ionic full series :(

[@academind]

I might create some additional Ionic content in the future Rashid, I do not have any concrete plans regarding that at the moment to be honest though.

[@ngoclichtran4876]

do you think about laravel with react native :)

[@academind]

Not right now to be honest

[@johnmarkaurio3772]

i got an errors, it said has no exported member 'NewPlacePage' . I need help. please

[@hachij_]

make sure to import your module at the .ts file

[@Radiant444]

pls how do i use the (--type) to start an ionic 2 project

[@Rassy_]

Its no longer required in the newer version: -> ionic start project-name blank //If you don't specify blank,it will create a tabs-menu by default

[@saimonanam]

which IDE did you use here?

[@academind]

Webstorm by Jetbrains

[@learnanywhere5736]

cannot find a module ..../pages/new-place/new-place';

[@marias3457]

update: on creating an ionic app, --v2 no longer works, and instead you should put --type=ionic-angular

[@tahashokouhi3229]

Good video mate. A suggestion: the video is too slow and wasting time on lots of side things.

[@RicardoRodriguez-zg7gw]

my project size more of 100 MB this is very big D: , this is normal? I'ts a blank app , why happend that ?

[@academind]

Yep, that's normal but no worries, most of that are development dependencies. Your actually build package (which you'd ship) is much smaller.

[@RicardoRodriguez-zg7gw]

Nicee , Thanks ;) !

[@chongcai5263]

thank you

[@gautamsuryawanshi2642]

Can you please help me solve this error: D:\ionic>ionic start myApp blank --v2 [ERROR] Sorry! The --v1 and --v2 flags have been removed. Use the --type option. (ionic start --help) For Ionic Angular projects, try ionic start myApp blank --type=ionic-angular D:\ionic>ionic start myApp blank --type=ionic2 [ERROR] Unable to find starter type for ionic2.

[@hachij_]

don't need to specify the --v flag.just use ionic start blank

[@dahausmeista]

ionicframework.com/docs/cli/start/

[@nabongtv8231]

what your text editor

[@academind]

I'm using Webstorm by Jetbrains

[@namanbhardwaj5856]

# 24:20 ngModel is showing error.

[@welomehell]

My button doesn´t do anything, any help will be appreciated.

[@Rassy_]

/////.html file///// /////ts file///// import { NewPlacePage } from '../new-place/new-place'; //Navigate to where your page is export class HomePage{ constructor(public navCtrl: NavController){} onLoadNewPlace(){ this.navCtrl.push(NewPlacePage); }

[@hachij_]

named your button

[@dileepnagendra5664]

thanks maya

[@abur1924]

When someone says sudo as "pseudo" instead of "sue-doo", it becomes hard to listen....

[@academind]

Sorry Abu, I try my best to speak as clear as possible. I'll keep that in mind and try to improve that in future videos.

[@khondakarreadulislam6337]

I got you

[@michaelmwambia8456]

Niice tutorial

[@academind]

Thanks a lot Michael! :)

[@irwinpalomo7212]

gracias, ahora a buscar trabajo :v