3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 1

The best way to learn Ionic and Angular?

An introduction to the philosophy and goals of this course

STANDARD

Welcome!

Hello and welcome to Ionic Start! This course will teach you everything you need to know about Ionic and Angular, from the basics right through to building an application for iOS and Android and submitting it to app stores.

Our goal here isn’t just to learn the bare minimum to get up and running, it is to build a solid foundation of knowledge and modern best practices that are used by highly skilled professionals today.

Building professional applications with Ionic is mostly about learning how to build professional applications with Angular. Angular is what makes most of your application do what it does. Ionic adds a lot on top of Angular that makes creating native-quality mobile apps a breeze (at least compared to doing it without Ionic).

However, Angular is primarily the beast you will need to tame on your learning journey.

But there’s a problem…

There are two distinct ways that you can go about learning Angular: one easier and one harder.

The easier approach uses a more intuitive imperative style of programming, whilst the harder approach uses a reactive/declarative style of programming that can be harder to wrap your head around initially but pays off in a big way in terms of developer experience and code quality.

No idea what these terms mean? Imperative and declarative? Don’t worry, we’ll get to that later. I am just trying to make a point here as to why we are going to learn the “hard” way.

The easier approach is quicker and easier to learn for most people (naturally), but the harder approach is how - at least in my opinion - the best Angular developers today build their apps.

The problem is that these two styles are so different, that it’s not a simple shift from one to the other. Starting with the easier approach is going to lead you to learn quite a lot that you will need to unlearn later when switching to the other approach.

It’s always going to be a bold claim to say that one approach is “better” than another. But, I do strongly believe that the approach we will be learning is the approach that is best for Angular applications. It is an approach that works with concepts that are deeply baked into Angular. Once you get the concepts down it becomes much easier to code this way, because in a sense you are using Angular the way it was designed to be used.

At least in my view, Angular developers will tend to move toward the “hard way” as their skills with the framework improve. But there is no reason why you can’t start down that path immediately.

What does the “best” approach look like?

Maybe you already have some Angular knowledge, or maybe you are a complete beginner. In any case, I don’t want to dive too deep straight away into what the difference between imperative and declarative is, or what coding reactively means, or what the benefits of OnPush change detection are. We will build these concepts up over time and explain them as we go.

But, I don’t want to just leave you with this wishy-washy notion of the easy way and the hard way (which I am claiming is the “best” way) to create Angular applications.

This is a general outline of the concepts we will be using to create our applications, which you might not find in a more typical approach to building Angular applications at a beginner/intermediate level.

These are the concepts that make this the “hard” way:

  • Reactive/Declarative style coding
  • RxJS Operators
  • TypeScript strict mode
  • Smart/Dumb component architecture
  • Feature based project structure
  • OnPush change detection
  • SOLID programming principles

Again, maybe you are already familiar with some of these concepts, maybe you’ve never heard of any of them. Either way, it doesn’t matter at this point. We are going to address all of these in detail throughout the course as we learn the standard Angular concepts like:

  • Components
  • NgModules
  • Templates
  • Services
  • Dependency Injection
  • Forms
  • Change Detection
  • Decorators
  • Routing
  • Styling
  • …and a lot more

We will even be focusing on some newer features of Angular including standalone components. Standalone components are a newer and more experimental feature of Angular so we will not be building our applications with them, but we will discuss how they will fit into the Angular ecosystem moving forward (and we will prepare our applications for this transition). Of course, we will also be learning Ionic-specific concepts along the way as well. In a later module, we are going to investigate what exactly it is that Ionic adds to Angular.

A quick test!

What?! We haven’t even learned anything yet. Throughout this course, you will find little quizzes like this to help reinforce things we learn in particular lessons. Usually, these will be used to test your knowledge. However, for now, this is going to serve as a little check to make sure you have the prerequisite knowledge to complete this course.

If you answer No for any of these, it doesn’t mean that you can’t start the course. However, you may need to seek out additional resources as these are concepts that will not be explained in this course.

I understand the basics of HTML/CSS

I understand the basics of programming with modern JavaScript

I have used a terminal/CLI and am at least somewhat familiar with npm