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

# Application design

The application you will be building throughout the course is called __A10Dance__. It is an attendance application originally designed to help Sunday School teachers keep track of the students in their classes. 

For this course, the app will consist of three pages: 

- A home page

- A Student Roster page

- A Student Detail page

# Application components

A side menu will enable users to easily navigate between the home and student roster pages. You will review how the menu is built, and navigation is configured to move from page to page.

The home page is where the application will start. There is not much here but an `ion-card` component. I will use this component to display some text information about the application.

The Roster page displays the students registered to the class and has most of the Ionic components you will use. The students are collectively displayed using an `ion-list`, with each list item consisting of `ion-items`, `ion-buttons`, `ion-icons`, and more. You will spend most of our time in the section covering this page, as you flesh out its functionality with action sheets, alerts, and toast notifications.

Finally, the Student detail page is where you can view and edit various details about a single student. You will eventually use this page to discuss Ionic forms. In this chapter, all you will do is lay out the components and bind some data to them. 

At each step of the way, I will explain the components I have selected, and then provide the code that implements them.

# Quiz


Learn about the design and components of our Ionic-Angular application in this lesson.

Introduction to Ionic Framework

Hello Ionic!

Building an Attendance Application

Improving the UI

Apply What You Have Learned

Conclusion

Appendix – Installing the Tools

A10Dance - The Demo App

Application design