Introduction

Have you had enough of the theory yet? We’ve covered a lot of stuff, and hopefully you’ve been able to try out some of that theory in practice as you follow along messing around with your own example app.

There is some more theory to come, but I don’t want to just keep throwing more and more theory at you without actually building something. That is what this module is for.

This module is not one of the “proper” application walkthroughs that we will tackle later. Those are entire real-world applications. The purpose of this module is going to be to build something super basic. We just want to have something functional that is more than rendering our a couple of inputs or a message to the screen.

We are going to use this application as an opportunity to start applying some of what we have learned so far, and we are also going to use it as an opportunity to see some of the things we are about to learn in the following modules.

As I keep mentioning, we haven’t really addressed the concept of observables and reactive programming yet (not in depth anyway). We also haven’t talked about application architecture and SOLID programming principles. I mentioned that this course is teaching Angular and Ionic the “hard” way, in a way that will lead you down a path to building your applications like the best modern Angular developers today generally do. These concepts are a big part of that.

So, as we build this simple application, I am going to start applying some of these concepts (just a little bit). Unless you have previous experience with these concepts I don’t expect you to fully understand what is going on. The main point here is to expose you to the concepts a little bit, and hopefully the bits that seem strange or confusing to you will stand out. Then when we are addressing the theory of these concepts in more detail in the following modules, hopefully everything will stick a little easier because you have already seen it in context.

A Todo Application

It is the most cliche example ever, but it’s a great starting point. We are going to build a super simple todo application. All we want this application to do is:

• Allow us to create a todo with a title and a description
• Allow us to select a todo and view its details on a separate page

This is obviously not a complete todo application, but for now we want to just expose ourselves to a few key concepts. When we get to the first “real” application walkthrough (Quicklists) we will focus on building a more complete application with editing/deleting, saving data into storage, and so on.

By the end of this example, we should have something that looks like this:

If you’re feeling adventurous, feel free to add your own additions to this application either during or after this module is completed.

Getting Ready

Before we get started, we are going to set up our basic application.

Generate a new Ionic application with the following command:

ionic start todo blank --type=angular

Once that has generated, the first thing we are going to do with every application we build is make sure that strict mode is turned on in our projects tsconfig.json file.

If it is not already present, modify tsconfig.json in the root of your project add the strict property to compilerOptions and set it to true:

  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": ["es2018", "dom"],
    "strict": true
  },

This is going to make the TypeScript compiler more strict (as the name suggests). This might sound annoying, but it is an important part of building modern and robust Angular applications. Without strict mode, the compiler will let some issues slip under the radar and won’t both you about them, but those issues still exist and its best we immediately get warned about them and handle them appropriately. For a bit more context around what strict mode will do to our application, you might want to check out this video that I published (it’s very relevant to the issues we will be tackling).

Delete the src/app/home folder

The blank starter application comes with quite a lot of boilerplate, and as I mentioned we are going to be using single file components in this course. We are going to just delete the home folder and recreate everything the way we need it.

Create a new file at src/app/home/home.component.ts and add the following:

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-home',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Todo</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content></ion-content>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomeComponent {}

@NgModule({
  declarations: [HomeComponent],
  imports: [
    IonicModule,
    CommonModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomeComponent,
      },
    ]),
  ],
})
export class HomeComponentModule {}

We have covered all of these concepts already, but this is the first time we are using them for real. Let’s briefly cover what is happening here:

• We have recreated our home component as a single file component (the class, template, styles, and module are all created in this file)
• We have set the changeDetection to OnPush which is what we will be using for every component we create. To quickly recap: this is a stricter version of change detection that not only helps improve performance, but will also force us to architect our code in better ways
• The class for the HomeComponent itself is just empty for now, but we will add some logic to it later
• We create a module for our home feature which will be used by our root routing module (we will modify that in a moment). This home feature only has one component that is being routed to at the moment - our HomeComponent - so this is set up as the default route inside of RouterModule.forChild

Now that we have the routing information for this feature defined, we need to update our root routing file.

Update the home route in src/app/app-routing.module.ts to reflect the following:

  {
    path: 'home',
    loadChildren: () =>
      import('./home/home.component').then((m) => m.HomeComponentModule),
  },

This is basically the same as the default, except our module is defined in our home.component file now not a separate home.module file, so we need to reflect that here.

Ok, that should do for now, let’s move on to the next lesson and get started!