Using angular factory in separate typescript file

Question

I define a factory in one file (Movie.ts), like this:

(function () {
'use strict';

angular
    .module('moviesServices', ['ngResource'])
    .factory('Movie', Movie);

Movie.$inject = ['$resource'];

function Movie($resource) {
    return $resource('/api/movies/:id');
}
})();

Then I try to use it in another file (MoviesController.ts), note that it is TypeScript:

function MoviesAddController($scope, $location, Movie) {
    $scope.movie = new Movie();
    $scope.add = function () {
        $scope.movie.$save(function () {
            $location.path('/');
        });
    };
}

TypeScript now complains on "new Movie();" with the error message "Cannot resolve symbol 'Movie'."

How can I define that Movie is a factory? I tried exporting Movie as a class but I don't know how to convert the factory to a TypeScript class.

This works in JavaScript and the example is taken from this tutorial.

I don't mean to criticize but there isn't a lick of TS in those examples. You might be better off following that tutorial with just JS and then once you have a grasp of how angular works come back and start writing it in TS. Also pankajparkar link is good but the more TS way of handling this is actually the answer @basarat gave to that question. — Kent Cooper
– Kent Cooper, Commented Jun 20, 2015 at 3:03
Sorry for not being clear. I am rewriting the tutorial in TypeScript to get a better understanding of TypeScript. The above snippets are 100% JavaScript and ripped straight from the tutorial. I have rewritten them in my TS files (proably poorly though). Can you give an example of how the two snippets could be converted to TypeScript, preferably using classes? — mikeesouth
– mikeesouth, Commented Jun 20, 2015 at 11:19

mikeesouth · Accepted Answer · 2015-06-20 18:33:38Z

Well, I'm still learning TypeScript and I don't know if it helps anyone but I solved the above problem by first rewriting the factory to a service, as such:

export class WebApiService
{
    static $inject = ["$resource"];
    constructor(private $resource: ng.resource.IResourceService)
    {
    }

    public movies()
    {
        return this.$resource("/api/movies/:id");
    }
}
app.service("webApiService", WebApiService);

Then, in the controller, I used this code:

var Movie = webApiService.movies();
$scope.movie = new Movie();

A simplified example of using $resource to create a new entity would be:

var Movie = $resource("/api/movies/:id");
$scope.movie = new Movie();

Collectives™ on Stack Overflow

Using angular factory in separate typescript file

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related