Getting Ready for Angular

This module should have given you a very high-level overview of what Ionic is all about. Specifically, we have:

• Generated a new blank Ionic application using the Ionic CLI
• Served the application in a browser
• Discussed the general file/folder structure of an Ionic project
• Discussed the role of Ionic in general, and how it relates to Angular
• Investigated how to use the Ionic CLI

We have really only scratched the surface here, we will of course be learning a lot more. The key part of Ionic that we haven’t made use of yet is all of the UI components that come with Ionic. These are things like:

• Headers/Toolbars
• Buttons
• Cards
• Modals
• Lists
• Side menus
• Tabs

These UI elements are really mostly the whole point of using Ionic. But… before we can get to building an actual Ionic application with these components, we are going to need to learn a bit more about Angular. Remember that building an Ionic application is really just the same thing as building an Angular application. Ionic provides us with most of the UI elements, but it is Angular that is powering the application itself: implementing logic, detecting changes, making requests to servers, and so on. In brief, Ionic provides the user interface, Angular provides just about everything else.

In the next module, we are going to explore the basic concepts of Angular. We are going to do this from a completely non-Ionic perspective. Building Ionic applications is mostly exactly the same as building an application with just Angular, but there are some differences. We are first going to cover how things work with just plain/standard Angular, and then in another module, we are going to discuss some of the differences that Ionic introduces.

The main goal of this approach is to help you clearly understand what is “Ionic” and what is “Angular”.

Generating an application with the Angular CLI

We will exclusively use the Ionic CLI when working with Angular applications, but in the following module, we are going to make use of the Angular CLI. The entire experience of the next module is entirely Angular-focused, and then once we are done with that module, we will switch gears and focus on how Ionic fits into and changes a standard Angular application.

Just like we did with the Ionic CLI, you will need to install the Angular CLI in order to create new applications and serve them.

Install the Angular CLI with the following command:

npm install -g @angular/cli

Once that has installed you can use ng new to create a new application, and ng serve to serve it in the browser - we will do that in the next module.

Module Review