Refactor Angular Controller Logic to Services
In Angular, we want to keep our controllers lightweight and specific to the view that it is controlling. To accomplish this, we are going to refactor our categories collection into a CategoriesModel. A recurring theme in Angular 2 is that everything is "just a class". When we create our controllers and services in an Angular 2 style, they are also "just a class". We will see this in action as we convert our controller almost verbatim into a service.
[00:00] In this lesson, we are going to learn how to create services in an Angular 2 style. A recurring theme in Angular 2 is that everything is just a class. When we do our controllers in an Angular 2 style, they are also just a class. In Angular, we want to keep our controllers thin and very specific to the view of controls. To accomplish this, we are going to refactor our categories collection into a categories model.
[00:27] Because services are generally shared by the entire application, let's put our categories model into a common models folder. We'll go common/models categories.model.js. Because we are working with just a class that is the theme, let's copy the categories controller, paste it in, and we're just going to update it to say categories model and not categories controller. This is the only change that we're going to make. We're going to let ES6 do the work for us.
[01:04] Now, that we have our categories model, we need to create a common module in which we can attach this to. We'll create common.js, and we're going to import Angular from Angular, then we'll also import our categories model from models/categories.model, and then we'll go ahead and define our module objects, so common module = angular.module.
[01:38] We'll call this module common, no dependencies, and then we're going to define a service on the module. We'll just call this categories model and pass in the categories model module that we just defined. Then from here, let's export this so that we can pick it up in our app.js. We'll go ahead and import this, so import common module from common/common, and then we'll go into our dependencies and add in common module.name.
[02:17] Now, we just need to hook this into our controller, so dependency injection happens at the constructor level by passing it in as a parameter. We'll pass in categories model and then this.categories = categories model.categories. Let's check the command line and make sure nothing is broke. But let's look in the browser and you can see here that because we're in strict mode, something happened with our dependency injection annotation.
[02:43] We solve this by adding in ngInject into our constructor which then allows [inaudible] to properly resolve our dependencies. Now, you can see that our categories are being pulled from the categories model. We defined our common module. We attach categories model to it, which has our categories collection. Notice that it's just a class very similar to an Angular 2 class.
[03:09] Then in our categories controller, we're passing that into the constructor, and then we're able to consume it by saying this.categories = categories model.categories. This is how you create a service in an Angular 2 style within your Angular 1 application.