Gain insights into developing hybrid mobile apps with Ionic and Angular. Discover platform-specific UI elements, and build a functional attendance app for your portfolio and deployment.

angularIonic4.tar.gz

ionic-app

ionic-test

AngularApp

The Ionic Framework is an open-source SDK for hybrid mobile app development. It’s known for providing platform-specific UI elements through a library of native components for iOS and Android.

In this course, you will cover all the most important aspects of development with Ionic and Angular. Throughout, you will work to build a fully functional attendance application that you can add to your portfolio.

By the end, you will have the confidence and the means to create and deploy your own mobile app for iOS or Android.

Developing Mobile Apps with Ionic and Angular

By now, you should be comfortable adding Ionic tags into a page, but you have not created a new page from scratch yet. You will tackle that now, by creating what will arguably be the most complicated page in the application. 

# Creating the page

To create a new Ionic page, you can use either the Ionic CLI or the Angular CLI.  One of the things I like best about using Angular with Ionic is the rich templating that Angular brings to the table. 

Ionic delegates much of its command-line operations to the underlying Angular CLI, augmenting it where appropriate. Creating pages is one of these cases. Angular has no default scaffolding for creating pages, only components. While a page is implemented as an Angular component, Ionic provides you with a slightly richer experience with their page scaffolding. The really wonderful thing is that this scaffolding can be used by either the Ionic or the Angular CLI. It is up to you which you want to use.

The following commands are used to generate the `Roster` component:

```shell
ionic generate page Roster --dry-run
npx ng generate page Roster --dry-run
```

Again, I recommend using the dry-run option to see what it will do ahead of time. Also note that you don't need to use `npx` with the Ionic command because the Ionic CLI is installed globally.

The command output will look something like this.

```bash
CREATE src/app/roster/roster-routing.module.ts (351 bytes)
CREATE src/app/roster/roster.module.ts (479 bytes)
CREATE src/app/roster/roster.page.scss (0 bytes)
CREATE src/app/roster/roster.page.html (126 bytes)
CREATE src/app/roster/roster.page.spec.ts (654 bytes)
CREATE src/app/roster/roster.page.ts (260 bytes)
UPDATE src/app/app-routing.module.ts (869 bytes)
 
NOTE: The "dryRun" flag means no changes were made.
```

The output indicates that the `generate` command will create a new roster folder, a page, a separate module for the page, tests, and styles. Plus, it will automatically add the page into the app’s routing system. See? Much of the grunt work is done for you.

You can rerun the same command, without the dry-run option to create the components.

> **Note:** In the application provided application, we have already created the `Roster` component for you using the commands shown above.

# Rendering the page

Click **Run** on the application below. Then, click the Roster link. The default Roster Page just created will be displayed. There is not much there, but you will take care of that in the next lesson.



Learn how to build a page from scratch in an Ionic and Angular application.

Introduction to Ionic Framework

Hello Ionic!

Building an Attendance Application

Improving the UI

Apply What You Have Learned

Conclusion

Appendix – Installing the Tools

Adding the Roster Page