Made withIonicTutorial

How to create your first mobile app using Ionic Angular

C

Code Swag

Creator on the Ionic channel

Watch on YouTube ↗

219K viewsJan 20, 202019:44 runtime

Learn how to build your first mobile app from scratch using Ionic and Angular. This step-by-step tutorial guides you through creating a new project, serving it locally, and customizing the UI with Visual Studio Code. Discover how to leverage the Ionic documentation to add UI…

Chapters

#ionic#tutorial#frontend

Creating Your First Ionic Angular App

This document summarizes the key steps and concepts for building a basic mobile application with Ionic and Angular, from project creation to implementing multi-page navigation.

Project Setup & Preview

Start by creating a new project and running it in a local development server for live browser previews.

Create a new project: Use the Ionic CLI to start a new app, selecting Angular as the framework and the blank template for a minimal setup.
```
ionic start codeswag-demo --type=angular
```
Serve the app: Navigate into the project directory and run ionic serve to compile the app and open it in your browser.
```
cd codeswag-demo
ionic serve
```

UI Development

Modify the app's user interface using Ionic's pre-built UI components and custom assets.

Core UI File: The main view for a page is typically located in its .page.html file (e.g., src/app/home/home.page.html).
Ionic Components: Leverage the official Ionic Documentation to find and implement components. Key components used in this tutorial include:
- ion-card: A container for content.
- ion-item: A list item, often used to wrap inputs.
- ion-input: A styled input field for forms.
- ion-button: A clickable button.
Adding Assets: Place static assets like images in the src/assets/ folder and reference them using a relative path (e.g., <img src="assets/logo.png">).

Page Generation & Routing

Generate new pages and configure the Angular Router to navigate between them.

Generate a New Page: Use the Ionic CLI to scaffold all the necessary files for a new page.
```
ionic generate page login
```
Configure Routes: Modify the src/app/app-routing.module.ts file to manage the app's navigation.

Important
To change the default page of the app, update the default path (path: '') to redirect to your desired route (e.g., redirectTo: 'login').

Implementing Logic & Navigation

Connect UI events to component logic to create interactive experiences.

Event Handling: Use Angular's event binding syntax to call a method when an event occurs.
```
<ion-button (click)="logMeIn()">Log In</ion-button>
```

Programmatic Navigation: To navigate between pages from your TypeScript code, you must import and inject the Angular Router.

Tip
Inject services like the Router into your component's constructor. This makes an instance of the service available to your component's methods via this.

// src/app/login/login.page.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router'; // 1. Import the Router

@Component({
  // ...
})
export class LoginPage {
  constructor(private router: Router) {} // 2. Inject the Router

  logMeIn() {
    // 3. Use the router to navigate
    this.router.navigate(['/home']);
  }
}

Creating a New Ionic Project

Welcome to another video tutorial by CodeSwag.co.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 going to call it codeswag-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.

Serving the App for Browser Preview

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 codeswag-demo. And we are inside the project folder.

So the next thing that we want to do is we want to open 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 your project in the browser. So there we go.

Viewing the App and Setting Up the Editor

And if we go to our Chrome DevTools, 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 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 src/app/home and we want to open home.page.html. And home... no, we're gonna only open home.page.html. So that's it for now.

Customizing the Home Page UI

And we can see that this is what we have in our application. So if we change our ion-title here, let's change it to CodeSwag.co.uk. And we want to change this text a bit later, but let's see the result of these changes. So if you go up here, we'll see that CodeSwag.co.uk becomes the title of our 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.

Using Ionic UI Components from Documentation

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 ionicframework.com/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 ion-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 markup for the ion-card.

So I want to copy the whole ion-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.

Adding an Image Asset to the App

So this looks a little bit boring. I want to add an image. So let me add the CodeSwag 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, codeswag-demo. So if we go to src 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 CodeSwag logo that I have here. So now it's in the src/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 img. I have the Emmet plugin so I can quickly type in my markup. So the src is gonna be the assets folder, /codeswag.png. That's going to be our image. And I'm just gonna put in an alt text of CodeSwag 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.

Finalizing the Home Page Content

Let's head back. I want to get rid of this subtitle. And in place of this, let me just add some custom text. CodeSwag.co.uk. So I've just put in a little bit of information about CodeSwag and let me change the title up here. So this would be CodeSwag.co.uk as well. Let's preview the changes and we can see everything is looking great. So this is our home page.

Generating a New Page with the Ionic CLI

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 Ionic that we want to generate a new page and call it login.

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.

Configuring App Routing

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 the 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 generate 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 going to be redirected to home. If we go back to our browser, we can see that if we just go to where the server's running, 8101, 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 redirectTo: 'home' to redirectTo: '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. Alright, great. Let's go back to our code editor.

So in our code editor, let's close this, we no longer need that. I wanna copy over this ion-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.

CodeSwag.co.uk. Alright, save. And if we go back, we 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 going to do is I'm going to get rid of this stuff inside the content of our ion-card, and save, and check it out. And all of that is gone.

Creating Form Inputs with Ionic Components

And I want to go back to the documentation. And here on the documentation, I want to look for an, first of all, let's see the ion-item. So the ion-item creates like lists. So good, Angular. You can see that we have, we can have an item with a label and stuff inside. So I also want to look for an ion-input with the input, ion-input. Right. So the ion-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 ion-item. So we have our ion-item, and inside that ion-item we are going to have the first input. So let me go back... Okay. I also want an ion-label, so let's put our label right there. So this is going to be Username. And our placeholder text is gonna be Username. 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 ion-label, so let me just remove that ion-label and see what it looks like when it's... Yeah, all right, that looks great, Username. 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. 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. Because we put in the type as password, you can see that anything that we type into here is gonna be masked. All right, which is what we expect from passwords and forms. 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 ion-button and the text on the button is going to be Log 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 logMeIn. 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 logMeIn is not a function. That's because we haven't created that function. So for that, we need to go to login.page.ts. And inside our LoginPage class, we need to create that method. So, logMeIn. 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 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 app, I am going to just simply log in the user no matter what username and password they put in, even if it is blank. So when we do that, we are going to say this.router.navigate and of course, after logging in, we want the user to be taken to the home page. So they're going to navigate to /home.

But I have this red squiggly line and this error telling me that the property router does not exist on the type LoginPage. And that is because we need to actually import the router. It comes from the Angular library. So let's go up here and say import, and we're going to import the Router from @angular/router. And in our constructor, we are going to create a private variable called router and it's going to 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 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.

Summary and Next Steps

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 CodeSwag.co.uk/shop 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.