Creating models in Angular with ES6

Question

What I would like to do is to create a model (e.g Book) in angular with ES6 that can be instantiated with some arguments (new Book('someTitle')). I have got it working with the following (suppose we need to inject something, such as $http):

function foo($http) {
   return class Book {
       constructor(title) {
           this.title = title;
       }
       fetch() {
           return $http.get('api/book/' + this.title);
       //...
       }
   };
}
angular.module('app')
    .service('Book', ['$http', function($http) {
        return foo($http);
    }];

The problem is this doesn't seem like a clean way of doing things. Also I'm not sure what problems could come out of it. Could anyone suggest a better way to achieve the same thing?

Why do you have a foo function? You could just return the class in the factory itself. That would make it more clear. This is how it's done in angular1. And by the way I dont really see how this question relates to es6. It would be the same using es5 classes. — Tamas Hegedus
– Tamas Hegedus, Commented Jul 30, 2016 at 11:33

mdcone · Accepted Answer · 2016-04-08 04:23:08Z

1

I have done this in Typescript where instead of wrapping the class in a function, I have a static factory function which returns a factory for the class... which may look a bit cleaner. Looks something like this...

class Book {
   constructor(public $http) {}

   set(title) {
      this.title = title;
   }

   fetch() {
       return this.$http.get('api/book/' + this.title);
   }

   static factory () {
      let service = ($http) => {
         return new Book($http);
      }

      service.inject = ['$http'];
      return service;
   } 
}

angular.module('app')
       .service('Book', Book.factory());

Another way to get this to look really clean is what they did in Angular2 is with the ES2016/2017 decorators, which are currently working in Typescript. Anyway, just an idea!

answered Apr 8, 2016 at 4:23

mdcone

1212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

brickingup Over a year ago

Thanks for your reply. I would like the model to be instantiated with title (e.g. new Book('someTitle'), but in your approach Book is constructed with $http and you need to call set(title) to set the title...

Collectives™ on Stack Overflow

Creating models in Angular with ES6

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related