How to create your first mobile app using Ionic Angular

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 184

  • @VerySenpai
    @VerySenpai 4 года назад +26

    this is great, easy to learn for me who can't code anything. already subscribed and looking forward for another ionic tutorials

    • @CodeSwag
      @CodeSwag  4 года назад +1

      I'm glad you liked it 😁

  • @kenkioqqo
    @kenkioqqo 2 года назад +3

    Excellently explained! Just the kind of overview I was looking for.

    • @CodeSwag
      @CodeSwag  2 года назад

      Glad it was helpful!

  • @wartv9985
    @wartv9985 2 года назад +1

    After watching 5 minutes I had no other choice except to subscribe

    • @CodeSwag
      @CodeSwag  2 года назад

      Glad to hear that 😁

  • @hemdee3087
    @hemdee3087 3 года назад +2

    best explanatory ionic video ever!!!

  • @islamorazbek4581
    @islamorazbek4581 4 года назад +2

    One of the best ionic angular tutorials I've ever seen

    • @CodeSwag
      @CodeSwag  4 года назад

      Thank you Islam 😁

  • @jessicamorris8035
    @jessicamorris8035 2 года назад

    Such an amazing video. Thank you for sharing. Keep sharing such kinds of videos on other frameworks for App development.

  • @rhornak2381
    @rhornak2381 3 года назад +4

    Thank you for the video ! Really helpful to get started.
    I recommend the VS code extension "Ionic Snippets" to help with autocompletion ;) .

    • @CodeSwag
      @CodeSwag  2 года назад

      Thanks for the tip!

  • @imvk._6677
    @imvk._6677 4 года назад +1

    Im became a fan of ur tutorial....I started learning Ionic and firebase from today...

    • @CodeSwag
      @CodeSwag  4 года назад

      Glad to hear that. Please do subscribe so you can get all my new uploads :D

  • @munasheshonge8950
    @munasheshonge8950 4 года назад +1

    This is awesome had no idea about Ionic Framework till now.

    • @CodeSwag
      @CodeSwag  4 года назад

      Thanks for watching Munashe. Please subscribe & click the bell icon so that you can get notified when I upload new tutorials.

  • @jackieboi321
    @jackieboi321 3 года назад +1

    Excellent and very simply explained!

    • @CodeSwag
      @CodeSwag  3 года назад

      Glad you found it useful!

  • @realAamirShahzad
    @realAamirShahzad 3 года назад +1

    I am following this tutorial from setup... everything worked smooth ... one suggestion if you can with commands etc little slower that will be very helpful ... regardless thank you so much

    • @CodeSwag
      @CodeSwag  3 года назад

      Thanks for the tip

  • @rafaelmonteiro9134
    @rafaelmonteiro9134 3 года назад +1

    Thank you! Great video for introduction, I'm just getting started with Ionic now and the video helps me a lot!

    • @CodeSwag
      @CodeSwag  3 года назад

      You're most welcome Rafael

  • @R2d2041
    @R2d2041 3 года назад +1

    Thank you! I have not found material on Ukrainian or Russian RUclips that is so easy to understand.

    • @CodeSwag
      @CodeSwag  3 года назад +1

      You are welcome Антон! I'm glad you found this video useful.

  • @ganeshgajelly
    @ganeshgajelly 2 года назад

    Watching this moment before my exam. Hope I pass 😂. Thank you for the video ❤️

  • @MrMrCario
    @MrMrCario 4 года назад +1

    you are an absolute chad, thank you for appealing to the average person

    • @CodeSwag
      @CodeSwag  4 года назад

      You are most welcome MrCario! 😃

  • @khadijaelfrani1230
    @khadijaelfrani1230 3 года назад +1

    This helped a lot as a beginner ! thanks

  • @iroshanaravishan1388
    @iroshanaravishan1388 2 года назад

    Thanks bro... it is really helpful for beginners....😃🙌🏁

    • @CodeSwag
      @CodeSwag  2 года назад

      Glad to hear that. Please do subscribe.

  • @AsamHussainkmm1
    @AsamHussainkmm1 Год назад

    Great video for start to learn.

  • @bignosethethird
    @bignosethethird 2 года назад +3

    Very useful and concise intro to Ionic + Angular, and I got a good sense now of how it works. Well done!
    PS: A few small things have changed in Ionic V6, perhaps an updated video would be in order?

    • @CodeSwag
      @CodeSwag  2 года назад

      Thanks for watching. Yes Ionic 6 brought a number of cool changes. I made a video about it and I'll be updating this and other tutorials soon: ruclips.net/video/aaNE915MyN4/видео.html

    • @bignosethethird
      @bignosethethird 2 года назад +1

      @@CodeSwag Liked it. Very good. Looking forward to the follow-up on this. You have a great future ahead, good luck.

    • @CodeSwag
      @CodeSwag  2 года назад

      Thank you so much for the kind words ❤️

  • @remixowlz
    @remixowlz 4 года назад +1

    Thank you so much! Your explanation is very clear and solid!

    • @CodeSwag
      @CodeSwag  4 года назад +1

      I'm so happy that you found the video useful. Please like, share, subscribe and click on the bell icon so that you can get notified when I upload new videos. 😊

    • @remixowlz
      @remixowlz 4 года назад

      @@CodeSwag Done! :)

    • @remixowlz
      @remixowlz 4 года назад

      @@CodeSwag do you have full CRUD for ionic-angular? That would be great!

  • @nicom2009
    @nicom2009 4 года назад +1

    Good work! I'll see it complete later

    • @CodeSwag
      @CodeSwag  4 года назад

      Glad you enjoyed it. There is a part 2: ruclips.net/video/9TmeV0Td3co/видео.html

  • @luciferkhusrao
    @luciferkhusrao 3 года назад +1

    Hey @codeswag, how did you add the mobile thing in your browser console?

  • @jaysiddhapura7572
    @jaysiddhapura7572 4 года назад +1

    very precise and no bullshit tutorial! Liked it ! :)

    • @CodeSwag
      @CodeSwag  4 года назад

      I'm happy it was helpful to you Jay. Please like, share, subscribe and click on the bell icon so that you can get notified when I upload new videos.

  • @suriyasundaravel5416
    @suriyasundaravel5416 3 года назад +1

    Wow... great video man

    • @CodeSwag
      @CodeSwag  3 года назад

      Glad you liked it

  • @branduncensored
    @branduncensored 4 года назад +3

    This was great tutorial for people like me who are learning. It would have been even better if you can show how to wrap this into an apk through Capacitor.

    • @CodeSwag
      @CodeSwag  4 года назад

      I'm definitely going to cover that in a future tutorial. Please subscribe and click on the bell icon so that you can get notified when it's up.

    • @branduncensored
      @branduncensored 4 года назад +1

      @@CodeSwag Correct me if I am wrong - Just discovered that you have already covered this "Compiling a native Android & iOS app using ionic 5 & capacitor"

    • @CodeSwag
      @CodeSwag  4 года назад

      Yes it's already covered in that video 😊

  • @pavansunny713
    @pavansunny713 3 года назад

    Thanks for the great tutorial, it was simple and easy to grasp....

  • @panashebanhire6006
    @panashebanhire6006 3 года назад +1

    Great Tutorial!!

    • @CodeSwag
      @CodeSwag  3 года назад

      Thanks for watching. Please make sure to subscribe!

  • @thanhnienchuyencan
    @thanhnienchuyencan 2 года назад +1

    this save my day

    • @CodeSwag
      @CodeSwag  2 года назад

      I'm glad you found it useful

  • @winniewong8368
    @winniewong8368 4 года назад +1

    very helpful thank you

  • @gamesland2067
    @gamesland2067 3 года назад +1

    Thank you So Much, Subbed
    Can i use angular material or bulma with ionic???

  • @lily-ot6ze
    @lily-ot6ze 7 месяцев назад

    @Code Swag, hey, what did you do to view your app in a mobile phone?

  • @highmountdigital
    @highmountdigital 4 года назад +1

    This video is very helpful and full of valuable content!
    Is it possible to build a simple messenger app with ionic?

  • @neuxbane7485
    @neuxbane7485 3 года назад +1

    Thanks, this helps me a lot

  • @jrosinger
    @jrosinger 4 года назад +3

    Great tut. BTW, how did you get the iPhone on the left in Chrome Dev Tools? Usually only shows a blank frame, not an iPhone image.

    • @CodeSwag
      @CodeSwag  4 года назад +6

      When you open chrome dev tools, in the top left corner of the tools pane, there are 2 buttons, click the one with the mobile phone icon to toggle the device frame. Then in the center of the preview pane there is a drop down menu that allows you to choose between different screen sizes.

    • @CodeSwag
      @CodeSwag  4 года назад +1

      You are most welcome Miod. Please do subscribe and click on the bell icon so that you can get notified when new tutorials are available.

  • @TerenceKearns
    @TerenceKearns 3 года назад +1

    Nice one

  • @junioretali2471
    @junioretali2471 3 года назад +1

    thank you for this tutorial

    • @CodeSwag
      @CodeSwag  3 года назад

      You're welcome 😊

  • @rampage241
    @rampage241 4 года назад +1

    nice tutorial

  • @hazemsoussi5309
    @hazemsoussi5309 Год назад

    Great tuto thanks

  • @kevinhonde3440
    @kevinhonde3440 4 года назад +1

    Great tutorial... add your shop link in description..

    • @CodeSwag
      @CodeSwag  4 года назад

      Thanks for the tip! Glad you liked the tutorial. Please like the video and subscribe. I will be posting many more tutorials

    • @merularief8493
      @merularief8493 4 года назад +1

      @@CodeSwag please add on more tutorial on ionic 4 like this

    • @CodeSwag
      @CodeSwag  4 года назад +1

      @@merularief8493 Hi Merul. Yes I will be uploading more Ionic 4 tutorial very soon. Please like this video and subscribe so that you can see my videos when I upload. Thank you for watching :)

  • @GeraldTags
    @GeraldTags 4 года назад +2

    this helps alottttt.. please can you do more tuts

  • @CosmosHole
    @CosmosHole 3 года назад +2

    Thank you thank you ..........you ...you ....Thankssss!!!! seriously, please do create such helpful videos in future and i subscribed and liked it ("-")

    • @CodeSwag
      @CodeSwag  3 года назад +2

      You are most welcome 😁

  • @tristanlachance7616
    @tristanlachance7616 Год назад

    How can I display the result on a virtual iphone like you do if i'm on windows and not on Xcode?

  • @aliansidey1442
    @aliansidey1442 Год назад

    Excelent video!

  • @Chompi
    @Chompi 4 года назад +1

    Hello
    How did you put the iphone form in google inspector?

    • @CodeSwag
      @CodeSwag  3 года назад

      In Firefox or Chrom, press ctrl/cmd + shift + i and in the window that pops up click on the little device icon in the top left corner

  • @popskyi1
    @popskyi1 4 года назад +2

    Hi may i know why your directory showing as github. that's mean I need to create a project folder before i creating the app?

    • @CodeSwag
      @CodeSwag  4 года назад +1

      I create all my software projects inside a folder called "github" on my computer. You can create your app in any folder you like.

    • @popskyi1
      @popskyi1 4 года назад +1

      @@CodeSwag thank you

    • @CodeSwag
      @CodeSwag  4 года назад

      You are most welcome. Please do subscribe 😊

  • @tshegofatsolechaba2739
    @tshegofatsolechaba2739 3 года назад +1

    Hey how did switch and make the ionic app look like its running on a iPhone?

    • @CodeSwag
      @CodeSwag  3 года назад +1

      Press ctrl+shift+i & in the developer tools window click on the device icon in the top-left corner. Next select your desired device frame from the drop down menu.

    • @tshegofatsolechaba2739
      @tshegofatsolechaba2739 3 года назад +1

      @@CodeSwag thank you soo much😅

    • @CodeSwag
      @CodeSwag  3 года назад +1

      @@tshegofatsolechaba2739 You are most welcome. Thanks for watching!

  • @sabuein
    @sabuein 3 года назад +1

    Thank you.

    • @CodeSwag
      @CodeSwag  3 года назад

      You're welcome 😊

  • @gabrielepapi799
    @gabrielepapi799 4 года назад

    Why do you put the router variable in the constructor? (18:20) Nice tutorial!

    • @HK-sw3vi
      @HK-sw3vi 4 года назад

      router is an injectable class, just like a service

  • @murtazamohammadi9370
    @murtazamohammadi9370 2 года назад +1

    How do you look like mobile on your browser? what did you install to see the output like mobile?

    • @CodeSwag
      @CodeSwag  2 года назад +1

      Ctrl+Shift+i to open dev tools. Inside dev tools, look for the mobile icon in the top left corner :)

    • @CodeSwag
      @CodeSwag  2 года назад

      On a mac its cmd + Shift + i

    • @murtazamohammadi9370
      @murtazamohammadi9370 2 года назад +1

      @@CodeSwag I opened that already but I select different mobile but it looks not like mobile frame( I mean like virtual mobile)

    • @CodeSwag
      @CodeSwag  2 года назад +1

      The frame is only for certain device types. On the drop down menu select iPhone 8

    • @murtazamohammadi4032
      @murtazamohammadi4032 2 года назад +1

      @@CodeSwag thanks for your help

  • @InUrThought_3
    @InUrThought_3 9 месяцев назад

    thx for making this video :)

  • @salahalsamarraaee650
    @salahalsamarraaee650 4 года назад +1

    thanks a lot you r my hero

    • @CodeSwag
      @CodeSwag  4 года назад +1

      Glad you enjoyed it. Please do subscribe!

  • @venkatadri1299
    @venkatadri1299 Год назад

    how to create the project with specific version of angular

  • @cesarhortua8493
    @cesarhortua8493 4 года назад +1

    Great video, you helped me a lot; now, I'm able to create different routes with different pages.
    It would be interesting if you can create a video where it shows how to place the "item button" in a different part of the screen.

  • @sahiku5357
    @sahiku5357 Год назад

    when building the app, will it be running on the browser or will it generate an apk file ?

  • @pyaephyoe3688
    @pyaephyoe3688 Год назад

    hello, I'm new ionic learner. When I enter "ionic start", get "Error: spawn UNKNOWN"
    I use
    Ionic CLI : 6.20.8
    NodeJS : v18.12.1
    npm : 8.19.2
    OS : Windows
    Can somebody tell me what to do.

  • @MelanieTv
    @MelanieTv 4 года назад +1

    The best tutorial, thanks u a lot!

    • @CodeSwag
      @CodeSwag  4 года назад

      You are most welcome Melanie 😊 Please subscribe for more tutorials

  • @멋진남자-q1t
    @멋진남자-q1t 3 года назад

    What can I save pictures in local server or another sever ?

  • @Monalexander799
    @Monalexander799 4 года назад +1

    Awesome. Thanks!

    • @CodeSwag
      @CodeSwag  4 года назад

      You are most welcome 😊

  • @fabian_21
    @fabian_21 3 года назад +1

    when i start up: ionic serve, it shows an window with "Ready to create an app".
    I don't see a phone here.
    Can anybody help?

    • @CodeSwag
      @CodeSwag  3 года назад

      Press Ctrl + shift + i to reveal the chrome or firefox dev tools. In the dev tools pane, in the top left corner click on the device icon.

    • @fabian_21
      @fabian_21 3 года назад +1

      @@CodeSwag thank you its working now.

    • @fabian_21
      @fabian_21 3 года назад +1

      @@CodeSwag your tutorials are really helpful, thank you

    • @CodeSwag
      @CodeSwag  3 года назад

      @@fabian_21 You are most welcome Fabian. Please do like the video, subscribe and click the bell icon so that you get notified of each new video.

  • @reginaldodepaula7991
    @reginaldodepaula7991 3 года назад +1

    thank you, help a lot!!

  • @jaswindersingh2143
    @jaswindersingh2143 4 года назад +1

    Which version are you using of angular?
    Does iocnic angular platform has all similar features like angular?

    • @CodeSwag
      @CodeSwag  4 года назад +1

      Hi Jaswinder. Thanks for watching. I can't remember which version of Angular I used in this project, but with Ionic 5 you can use any version of angular 8+. Yes, Ionic Angular has all the features of Angular available.

    • @jaswindersingh2143
      @jaswindersingh2143 4 года назад +1

      Thanks alot ❤️ for such a simple yet powerful session

    • @CodeSwag
      @CodeSwag  4 года назад

      @@jaswindersingh2143 You are most welcome

  • @sameersameer5288
    @sameersameer5288 2 года назад

    Hi,
    I have a query for you
    Please help.
    How to make a new ionic app with old versions of angular
    For example current angular version is 14
    But I wants to create an new ionic angular aap but I wants angular 13
    (Because I wants to use some dependencies which currently are available for Angular 13 only)
    How to create a new ionic angular app with mentioning angular version??
    Thank you.

  • @ericsearing1897
    @ericsearing1897 4 года назад

    An improvement would have been to add the username info to the home page to show the user. I am having trouble getting the form variables to pass to the login function. I am sure there is some import or constructor I am missing.

  • @danielzakerifar7215
    @danielzakerifar7215 4 года назад +1

    Thanks a lot. it was great :)

    • @CodeSwag
      @CodeSwag  4 года назад

      I'm glad you enjoyed the tutorial. Please like, share, subscribe & click the bell icon so that you can get notified when I upload new videos 😊

  • @herutehuti8155
    @herutehuti8155 4 года назад

    Am using ionic and visual studio code to follow commands at 5:13 but The app is showing as more of a website than on the iPhone like yours what should I do ?

  • @winniewong8368
    @winniewong8368 4 года назад +1

    can do ionic connect to api thanks

  • @sharpd3103
    @sharpd3103 3 года назад

    What are chrome tools you are using ?

  • @vipstuber1622
    @vipstuber1622 4 года назад +2

    Can I use Adobe Dreamweaver

  • @michaelyasa868
    @michaelyasa868 3 года назад

    do you have a tutorial on how to create simple android login form thru ionic?hehe

  • @beatagiebaga8351
    @beatagiebaga8351 4 года назад +1

    I thought I found a solution to my problem, because the first time I launched the ionic serve according to this tutorial it worked perfectly, but the next day when I wanted to fire it I got Error: spawn EPERM. I've seen many solutions, but I couldn't fix it, does anyone have any idea why this is happening?

    • @CodeSwag
      @CodeSwag  4 года назад

      upload your project to Github and send me the link so I can help you to debug. Also send the full error message - shop@codeswag.co.uk

  • @coderschannel4270
    @coderschannel4270 3 года назад

    any one can encounter also this problem "debug@4.2.0: Debug versions >=3.2.0 =4

  • @moinkhanpathan541
    @moinkhanpathan541 4 года назад +1

    which version of ionic ?
    can you tell me

    • @CodeSwag
      @CodeSwag  4 года назад +1

      This video was made using Ionic 4. Part 2 was made using Ionic 5 ruclips.net/video/9TmeV0Td3co/видео.html

    • @moinkhanpathan541
      @moinkhanpathan541 4 года назад

      @@CodeSwag thanks

  • @mounatabarki1731
    @mounatabarki1731 4 года назад +1

    really thnx

  • @johnirizsantiago3423
    @johnirizsantiago3423 4 года назад

    How to open a previous running app?

  • @lonewolfcoding5208
    @lonewolfcoding5208 3 года назад

    i was looking for webview then html css javascript is the ui

  • @schrodingerscat6254
    @schrodingerscat6254 Год назад

    How does he have the emulator in chrome?

  • @abdieln5255
    @abdieln5255 4 года назад +1

    Bro please help me! I can't join to login, it does't appear in the network :( PLEASE REPLY ME

    • @CodeSwag
      @CodeSwag  4 года назад +1

      Hi Abdiel, where are you trying to login into?

    • @abdieln5255
      @abdieln5255 4 года назад

      @@CodeSwag I fixed bro but thanks u a lot. Do you know how can I login with a Microsoft account?

  • @starlight9740
    @starlight9740 4 года назад +1

    at 2:41 code . not recognized.. how to fix it?

    • @CodeSwag
      @CodeSwag  4 года назад

      please send a screenshot of your error to shop@codeswag.co.uk

  • @bhaveshpatil5240
    @bhaveshpatil5240 4 года назад

    can you tell how to change icon of the app??

    • @CodeSwag
      @CodeSwag  4 года назад +1

      Sure, I will make a video about that

    • @bhaveshpatil5240
      @bhaveshpatil5240 4 года назад

      @@CodeSwag thank you very much

  • @GraphicalBoss
    @GraphicalBoss 3 года назад

    Amazing video. Hope it's still up to date

  • @irfanmohdjamadi7645
    @irfanmohdjamadi7645 4 года назад +1

    do i need to write cd github on cmd

    • @CodeSwag
      @CodeSwag  4 года назад +1

      "github" is the name of the folder in which I create all my projects. You have to cd into whatever your projects folder is named.

  • @raphaeleldaery1663
    @raphaeleldaery1663 4 года назад +1

    can you help me, i am getting the following error.
    Welcome to Node.js v12.18.2.
    Type ".help" for more information.
    > ionic start
    ionic start
    ^^^^^
    Uncaught SyntaxError: Unexpected identifier
    >

    • @CodeSwag
      @CodeSwag  4 года назад +1

      Use regular cmd command promt not the nodejs command prompt.

  • @leanpaolosastrillo3885
    @leanpaolosastrillo3885 Год назад

    Why ionic-card is error?

  • @iamtheonlyone9925
    @iamtheonlyone9925 3 года назад

    When i Type ionic serve Ja natürlich, welches willst du Browser Open

  • @amirlatif3404
    @amirlatif3404 4 года назад +1

    loggin to not move home page

    • @CodeSwag
      @CodeSwag  4 года назад

      Hi Amir. Please sent me a screenshot of your code in login.page.ts to shop@codeswag.co.uk

    • @amirlatif3404
      @amirlatif3404 4 года назад

      @@CodeSwag can you send your email

    • @amirlatif3404
      @amirlatif3404 4 года назад

      hello sir

  • @iamtheonlyone9925
    @iamtheonlyone9925 3 года назад +1

    Nothing happened When im Write : ionic start

    • @CodeSwag
      @CodeSwag  3 года назад +1

      You need to first install node.js and Ionic. Please follow this tutorial - ruclips.net/video/CWOLZBu7ySk/видео.html

    • @iamtheonlyone9925
      @iamtheonlyone9925 3 года назад

      @@CodeSwag oh okay thanks

  • @sandeshtayde1372
    @sandeshtayde1372 4 года назад +1

    This is ionic 4 or 5 ? M

    • @CodeSwag
      @CodeSwag  4 года назад

      This video was made using Ionic 4 but there is little difference with Ionic 5. In part 2 I use Ionic 5.

  • @onlylooser1
    @onlylooser1 3 года назад +1

    Screen size is too big.
    not possible to view the tutorials using mobile device

    • @CodeSwag
      @CodeSwag  3 года назад +1

      Hi Eugen, thanks for your feedback

  • @benjaminmanzi8000
    @benjaminmanzi8000 4 года назад +2

    Munogona imiw

  • @frederiktaodybdallarsen898
    @frederiktaodybdallarsen898 3 года назад

    Code Editoor ;)

  • @testingdevice5082
    @testingdevice5082 3 года назад +1

    Sorry ...ur screen is not visible

    • @CodeSwag
      @CodeSwag  3 года назад

      Please watch the tutorial on a desktop or laptop.

  • @navidrct
    @navidrct 2 года назад +1

    Double click annoying . Write everywhere your site is boring . Just go to the point please

  • @Sinaiii
    @Sinaiii 11 месяцев назад

    man this is simply a web app, not a mobile app

  • @valkatnavaco
    @valkatnavaco 3 года назад +1

    Great tutorial!

    • @CodeSwag
      @CodeSwag  2 года назад

      Glad you think so!

  • @jevonne8160
    @jevonne8160 3 года назад +1

    how did you get the iphone in the responsive view?

    • @CodeSwag
      @CodeSwag  3 года назад

      Press Ctrl+shift+i (Cmd+shift+i on mac) in your browser to open developer tools. Inside the developer tools window, click on the little device icon in the top left corner.