This Angular app is generated by the Angular CLI (Command Line Interface). Since Angular is frequently shortened to ‘ng’, the command to make this app was ng generate ng-todo .

Compared to Vue and React, Angular has a ton of files. One big reason for this is that while Vue puts everything for one component into one file, and React breaks out the CSS into its own file, Angular puts the css in one file, html in another, and the component code in another. While we can put all these into one file, it’s considered best practice to keep them separate.

Another reason for all the files is that Angular uses TypeScript. TypeScript is “a superset of JavaScript which provides optional static typing, classes and interfaces”. Lets unpack that a little bit.

TypeScript is really just adding a bunch of stuff on top of JavaScript. If we write a line of JavaScript in our TypeScript code, it will work just fine. What TypeScript lets you do is easily make classes, and enforce their usage.

In our project, we make a ToDo class:

export class ToDo { constructor(item: string) {

this.Item = item;

} Item: string;

}

This class doesn’t do a whole lot by itself. Where the power comes in is that we can write functions that require a ToDo, and the TypeScript compiler will yell at us if we try and give it anything else.

For Example:

function PrintToDo(myToDo: ToDo) { //the argument is of type ToDo

console.log(myToDo.Item) }

//this will generate a compiler error

this.PrintToDo("not a ToDo type") //this will not

this.PrintToDo(new ToDo("a real ToDo"))

Of course we can do this with any type we want, not just classes:

function PrintString(myString: string) {

console.log(myToDo) } //this will generate a compiler error

this.PrintToDo(new ToDo("not a string type")) //this will not

this.PrintToDo("A string!")

TypeScript is just JavaScript, except it will throw type errors sometimes and prevent silly mistakes that would become runtime errors in just JavaScript.

As an application becomes more complicated, classes like this really come in handy! They serve as a good model for a real life thing, like a Product, Job or Person. In the Angular world, we refer to them as Models.

How do we create new ToDos?

Here’s our ToDoComponent: