Lesson 6 – Creating our first component

In this video we’re expanding on the knowledge that we’ve already received in the previous lessons. In this section, again following Bucky’s lead, I’m going to create a class that contains the video titles. At some point in the future I’ll expand on this class to include the testing portion and, most likely, read the values from a database because I’ll also want to create an administration CMS (Content Management System) that will allow me to create other lessons without having to hard-code them in the A2 program.

Besides making the program more dynamic, it also allows for a separation of concerns, where the code is separate from the data and is also separate from the markup, which I love and Bucky mentions, later.

I’m going to start by creating a new class which I’ll call videos and will put into a file called data.video.ts. Again, I’m putting the type of class at the front of the name in case I have other “data” type classes so that they’ll all be listed together. Like Bucky, I will include an ID, a video code, a title and a description. These will be my eventual fields in the database. But, here again, I’m going to deviate a little bit. My eventual application will include several courses with several sets of videos and assessments. Therefore, I’m going to have two ID fields: one for the the lesson (instead of “video”) and one for the course. I’ll name these lesson_id and course_id, respectively.

These simply get listed in the class, name followed by colon followed by type, but since none of the values get filled in Bucky opts to leave it at that. In keeping with my methodology, I’m going to explicitly set them to null (meaning “no value”). I’m also going to set an access modifier on them all – eventually, I won’t want them to be publicly accessed but for the moment I’m going to set them all to public.

The resulting class looks like this (including a constructor):

export class Video {

public lesson_id: number = null;
public course_id: number = null;
public title: string = null;
public video_code: string = null;
public description: string = null;

constructor (lesson_id: number, course_id: number, title: string, video_code: string, description: string) {

this.lesson_id = lesson_id;
this.course_id = course_id;
this.title = title;
this.video_code = video_code;
this.description = description;

}// Constructor;

}// Video;

Now, having created the class, I’m going to need a component to display that information, and the information is for our lessons, so I’ll create a new component file called “component.lessons.ts”. This will include the information needed to display each of the lessons (and, eventually, the videos and quiz questions).

This component, of course, needs the A2 core library so I’ll include the import statement (like I did in the app component) and will include a @component statement. It will have a selector which I’ll call lessons. At this point, however, we introduce something new: the concept of code and markup separation which I alluded to earlier. Rather than having all of our markup code in the template property (which could easily get out of hand) I’m going to use the templateUrl property, instead.

This property allows us to include a URL instead of a template string which will let me put the HTML in a separate file. Also, Bucky points out that in order for this to work you need to have a full path so I’m going to capitalize on this feature and I’m going to create a new folder under my app folder which I’m going to call markup. This way I can keep my JavaScript files separate from my TypeScript files separate from my HTML files. Like Bucky I’m going to use the same filename but with an HTML extension: app/markup/component.lessons.html.

Of course I’ll need to export the class by giving it a name (like I did with the component.app.ts file) and I’ll call my class LessonComponent.

export class LessonComponent {}

It’s empty but that’s fine for now. I’ll populate it in the next lesson.













Leave a Reply

Your email address will not be published. Required fields are marked *