Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Angular 3
  • Overview
  • Transcript

2.1 The Models

The next thing we're going to focus on is displaying a list of projects to the user. So the first step in this is creating a project model. Strictly speaking, this isn't really necessary within Angular. You could get by just fine without a project model. However, since we're using TypeScript, we'll be able to use the classes we create as models as types within TypeScript. And then the TypeScript compiler will make sure our objects have the right properties and things like that. So let's create a project type. So inside the app directory, let's create a project.ts file. And all we have to do in here is export a class that we call Project. So let's decide what properties our class is going to need. Obviously, it will have an id, which is going to be a string. Every project will have a name, which will also be a string. Then every project might have a description, which will also be a string. A project will have a set of conversations. And we're going to create a conversations class as well. So this is going to be a conversation class, but it's going to be an array of conversations. So we'll put the array syntax there at the end of this. So the TypeScript will know this is going to be an array of conversations. And finally, we're going to have a set of users who are involved in this project which will be an array of the type any, which is just TypeScript's kind of catch-all class. It's gonna be an object but we're not going to define exactly what that looks like, so we'll just say it can be anything. Now just in case you aren't used to TypeScript, let me explain what exactly is going on here. What we've created for the most part here is a standard ECMAScript 2016 class. However, the colon and then the type value coming after each property name, that is part of TypeScript. So what we've done here is just tell TypeScript the variable or the property that comes before the colon should be of the type that comes after the colon. So if we were to try and create a project where the idea was a number, the TypeScript compiler would complain. Now it would still compile to JavaScript that runs. However, it would just give us a warning that the id was a number instead of a string and you might want to look into that, to make sure that what you intended is actually happening. So this is our project model. Obviously, we don't have this conversation model in here so we're gonna have to import conversation from the conversation model. Obviously, we haven't created that yet, so let's go ahead and create a conversation.ts file. And in here, we will export the class conversation. So what properties does our conversation need? Well, it's going to need an id, which will also be a string. Every conversation will have a name or title, and then finally it's going to have a list of messages. And messages will be more than just a string cuz they will have a user involved with them. So let's just go with type any and we will avoid writing a message class. Now if we wanted to be a little bit more complete, we could go ahead and create a model for users and a model for messages. But I'm doing this to kind of show you that you can really use the amount of TypeScript that you want to use. And what you can take away from this is that, if you're a little wary about moving into TypeScript, or even using TypeScript for this course, then you can really use the TypeScript compiler and maybe only use the decorators and not really worry about types. Or something like that. You can kinda ease your way into TypeScript, and I think you'll find over time that it may actually help you solve a few errors. So with these two model classes in place, we are ready to start building our project list component. So we'll do that in the next lesson.

Back to the top