⚠️ This lesson is retired and might contain outdated information.

Create a Model Base Class

Brett Cassette
InstructorBrett Cassette
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 2 years ago

You're going to test drive the creation of a robust model layer for an AngularJS application. To get started, we need a solid base class to encapsulate common functionality. In this lesson you'll use Javascript's prototypical inheritance to create the model base class.

Brett: Hey everyone. In the previous video in this series we looked at using $resource to build models, and we discovered that doesn't provide us with all the functionality that we're going to need and expect out of a base class, so in this and future videos we're going to take a look at building a base class ourselves and everything that goes into that, so let's get started.

Here we have a mock model that's going to use our base class. It's the most basic model we could possibly write at the moment and we're just injecting the base class, which we've creating up here in our lib, which also is similarly pretty empty, and we're injecting all of these through a spec_helper, so these will be available to each of our tests. That way we can isolate different portions of the functionality and test them separately, which will keep things easy to read as the code base gets larger.

Right here we have our first test. We know that one equals one, so obviously this works. Let's get started writing some real tests.

We want to do some work before each of our tests, just a little setup, and we're going to say that we're going to define and inherit a method that's going to allow our constructors to inherit functionality from a base class, so we'll define some arbitrary base class here, and what we really want to test is that it add functionality to both the child constructor and the prototype, which will add instance properties and methods.

On the constructor, we'll say that we'll define a new method, and this is something that we're actually going to do in a real base class, but here's a very simple implementation of it. It's literally just creating a new instance of the constructor and returning it, and on the prototype we'll just create a save method and assign that to angular.noop, which is an empty function, and then what we'll do here is just test that it adds methods to the child class.

We want to expect that host.new is define, simple enough, and we'll do the exact same thing for the prototype, so we're going to expect that instances of the class, scoop this down here, so a post, which is a new instance of the post class, will have the save method defined on it, and again, that's just an empty function, but it will be defined. We see in our test here the inherits method doesn't exist yet. Good to go.

Let's make these tests pass. Let's go over to the base class. We'll add to the function prototype this inherits method, so every function has access to it, and this is going to take a base class as argument. The constructor will again be the value of this, and we're going to change the value of the constructor by running it through the base class function, so we'll call base class.apply on the constructor, and we'll see here that this makes our test pass exactly as we'd expect, so why does this work?

Well, what happens when we call apply is we're setting the value of this to what we pass in, which is the constructor, so that means that we can add methods to the constructor and the prototype exactly as we'd expect, because we know the exact value of this, so now we're able to add functionality to the base class as we'd like to, so let's move on to the next video and see how we're going to start building out the class.