How to create your first mobile app using Ionic Angular

welcome to another video tutorial by cut swag code UK in this follow-on video to installing ionic on Windows I'm going to be showing you how to create a basic application so let's start off by creating a new project in our command prompt we simply need to type in ionic start and after pressing enter we are prompted to enter a project name I'm gonna call it code swag demo and we are asked to pick a framework I'm going to go with angular so I'll just press ENTER and we are asked to come up with a starter template let's go with a blank which is the simplest template that we can use and now our project is being created so we just need to wait for a few minutes while this is done okay awesome so our application has been created we're just going to clear our screen and let's navigate into the application folder CD and wantacode swag demo and we are inside the project folder so the next thing that we want to do is we want to open a another CMD window so let me just search for CMD and the reason is I now want to run the application in the browser so again let me just make sure that in this window I am in my project folder and when you are inside your project folder you want to run the command ionic serve so this will start up a local instance of a node.js server and it will open you are on a project in the browser so there we go and if we go to a chrome dev tools then we can see our application there it is running so now let's go back to our main command prompt window and what we want to do in here is to type in code and a dot and that's going to open the project in Visual Studio code so now in Visual Studio code we want to be switching back and forth from our browser to Visual Studio code and what we want to do is to make some changes to our application so we need to go to source and app home and we want to open home that page dot HTML and home no we're gonna only open home to our page that HTML so that's it for now and we can see that this is what we have in our application so if we change our iron title here let's change it to code swag dark code UK and we want to change this texts a bit later but let's see the result of these changes so if you go up here we'll see that code so actor co dot uk' becomes the title of app screen right here so I want to get rid of this stuff the default content and then we're just going to have a completely blank screen so let's head over to the ionic documentation so that I can show you how you can use it in your projects if you open your web browser to ionic framework com ford slash Docs you will see the ionic framework documentation so we want to go to components and this will give you all the UI components that are available in the ionic UI library the one that I'm interested in is the iron card so let's click here and if we scroll down sorry this is react I want to go to angular and it will show us the mark-up for the iron car so I want to copy the whole iron card here so let's go back to our project and we want to paste this in so there we go so I want to save this and go back to the browser preview and we can see we have our card showing up there so this looks a little bit boring I want to add a image so let me add the code swag logo so what we want to do is go to file explorer in windows and this is my project directory and here's our project go to our demo so if we go to source and assets and this is the folder that will contain the assets for our applications so I'm just gonna go over and copy the code swag logo that I have here so now it's in the source assets of our project so let's get back to the code editor and back in the code editor I want to add my image right up here so I'm going to type in I am alright let me just put in IMG I have the Emmet plug-in so I can quickly type in my markup so the sauce is gonna be the assets folder fourth slash code swag dot PNG that's going to be our image and I'm just gonna put in an alt text of code swag logo so if we save this and let's head back to the browser to see the changes and we can see we have our nice logo right there so the front page is looking very good let's head back I want to get rid of this subtitle and in place of this let me just add some custom text so go drag the cool so I've just put in a little bit of information about code swag and let me change the title up here so this would be cut so actor code at UK as well let's preview the changes and we can see everything is looking great so this is our home page and in this demonstration I also want to show you how you can create other pages and link to those pages using the angular router so next we want to head back to our command line and in our command line we want to type in the command ionic generate page login so this tells ironic that we want to generate a new page and call it loggin and when we press enter it's gonna run the routine and create a new page let's head back to the code editor and in the code editor when we open the file browser we can see that there's this new folder called login and inside the login folder we have all the files that make up our new login page so now let's open the HTML file and we also want to open the typescript file and if we close this and go back to our application we see that we are still on the home page that's because the home page is the default page for our application so now let's try to change our default page so let's head back to the code and back in the code we want to open the file explorer let's close this and we want to open this file app routing module ts after opening file let's close the panel and we can see we have this constant called routes that has an array of objects so each object here is representing a route or a page in our application that's the default route this is the route for the home page and this is a new route that was created by that ionic generates page command so you can see that we have our login page there so here in the default route it says that if we have no path we're gonna be redirected to home if we go back to our browser we can see that we if we just go to where the server's running 80 1.01 we are led to the home page we're redirected to the home page if we have nothing in the URL all right so let's change this from redirect to home to redirect to login and as soon as we save this and we go back to our plain URL you see we are now redirected to the login page so now the login page is the default page for our application all right great let's go back to our code editor so in our code editor let's close this way no longer need that I wanna copy over this iron card from the home page and I want to put it in the login page so I'm gonna paste it here and you can see visual studio code has this annoying thing where there's like like two tabs here and actually three at the bottom so we can fix that by just highlighting and then pressing ctrl or command and the left square bracket so that's gonna move everything over to the left and let me do it one more time I just like it when all my code is perfectly aligned and let me just say cuz like okay alright save and if we go back we'll see that our login page now is a copy of our home page but of course we don't want it to be just a copy we actually want it to be a login page so what I'm gonna do is I'm gonna get rid of this stuff inside the content of our ionic card and save and check it out and all of that is gone and I want to go back to the documentation and here on the documentation I want to look for and I on first of all let's see the eye on items so the eye on item creates like list first so good angular you can see that we have we can have an item with the label and stuff inside so I also want to look for an eye on input with the input input all right iron input right so the iron input will create inputs so what I want to do is have a login form so if we scroll down let's go to angular and I want to use this input with a placeholder so let me copy that and back to our code editor first I want to put in an eye on item so we have our an item and inside that iron item we are going to have the first input so let me go back and we okay now I also want an ion label so let's put our label right there so this is gonna be a username and our placeholder text is gonna be user name and let me save that and check it out in the preview and we can see we have that username field actually it doesn't look so good with the iron labels so let me just remove that ion label and see what it looks like when it's yeah all right that looks great user name so the placeholder is also going to act as our label so the next thing I want to do I'm just gonna copy this and paste it right below and this is going to be our password and there's a special attribute value here which is gonna be type and I'll put in password again so you will then see that we have our username and password and you can see chrome is already trying to fill in saved passwords so we can tell that our login form is working great we have one issue though which is oh no I want to demonstrate on password so because we put in the type as password you can see that anything that we type into here is gonna be masked alright which is what we expect from passwords and forms it's it seems a little bit tight here so let me add some space by adding an HTML break and you can see now we have a little bit more space that's great finally let's add another break and let's create a button that we click on in order to log in so I'm gonna create an iron button and the text on the button is going to be logged in and here we have our nice login button right here but if we click the button nothing happens let's add a click listener and when the click when the button is clicked we're going to run a method called log me in this is gonna be a method for the class for our page so if you go back and we click nothing happens and we get an error saying log me in is not a function that's because we haven't created that function so for that we need to go to login dot paged RTS and inside our login page class we need to create that method so log me in and there we go so if we save this even with nothing inside if we save that and go back to our application and click login we no longer get that error but of course nothing happens because there's no code inside so let's put in the code for logging in the user so I'm just gonna put put in a comment that says code for logging in user goes here but since this is a very simple demonstration of our very first ionic 4 app I am going to just simply login the user no matter what username and password they put in even if they even if it is blank so when we do that we are gonna say this dot router that's navigate and of course after logging in we want the user to be taken to the home page so they're gonna navigate to /home but I have this red squiggly line and this error telling me that the property router does not exist on the tab login page and that is because we need to actually import the errata it comes from the angular library so let's go up here and say import and we're gonna import the router from at angular slash router and in our constructor we are gonna create a private variable called router and it's gonna be of the type router that we just imported up here so this is the same thing and you'll notice that the squiggly line has disappeared because this is now a valid code if I save this and I go back to you the preview well doesn't matter what our username and password is this is just pre filled by Chrome and when we click on that we are taken to our home page so that's it for our simple demo application we have seen how to work with ionic cards how to use the ionic documentation and how to use the router and to route between two different pages in the next video I will show you how you can run this application in the Android emulator and iOS simulator if you enjoyed this video please click the like button and subscribe to our channel for more tutorials if you'd like to support this channel head over to codes ragdoll code at UK for at /op and purchase some cool gadgets and developer merchandise and help us to create more tutorials like this one thank you very much and have a nice day

Channel: Code Swag

Views: 98,222

Keywords: ionic, ionic framework, mobile app, ionic 4, ionic 4 course, ionic 4 for beginners, ionic 5, app development, mobile app development, learn ionic 4, ionic 4 angular, ionic angular, ionic for beginners, ionic tutorial, ionic 4 tutorial, ionic 4 app, ionic 4 crash course, ionic 4 crash course for beginners - build an app, ionic 5 tutorial 2020, ionic guide, ionic 4 tutorial 2020, ionic 4 tutorial for beginners, ionic android, ionic android app development, angular router

Id: whnA4Eod3xo

Length: 19min 44sec (1184 seconds)

Published: Mon Jan 20 2020