Skip to content

Instantly share code, notes, and snippets.

@ThomasBurleson
Forked from joelhooks/angularServices.js
Created August 19, 2013 02:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasBurleson/6265249 to your computer and use it in GitHub Desktop.
Save ThomasBurleson/6265249 to your computer and use it in GitHub Desktop.
//from most to least verbose, but it is all the same in the end.
(function() {
var module = angular.module("myApp.myModel", []);
var MyModel = function MyModel() {
this.asyncService = null;
this.someApi = function() {
return this.asyncService.getStuff(); //promise?
}
}
var myModelProvider = Class.extend({
model: new MyModel();
$get: ['asyncService', function (asyncService) {
model.asyncService = asyncService; //dependency injection
return model; //resolved for the lifetime of app
}]
});
modules.provider('myModel', myModelProvider);
}())
// or
(function() {
var module = angular.module("myApp.myModel", []);
var MyModel = function MyModel(asyncService) {
this.asyncService = null;
this.someApi = function() {
return this.asyncService.getStuff(); //promise?
}
}
module.factory('myModel', ['asyncService', function (asyncService) {
//could do some stuff here
return new MyModel(asyncService);
}]);
}())
// or
(function() {
var module = angular.module("myApp.myModel", []);
var MyModel = function MyModel(asyncService) {
this.asyncService = null;
this.someApi = function() {
return this.asyncService.getStuff(); //promise?
}
}
module.service('myModel', ['$asyncService', MyModel]); //most simple option
}())
@ThomasBurleson
Copy link
Author

The above code appears to be wrong. Here are some proposed fixes:

var MyModel = function (asyncService) {
        this.asyncService = asyncService;

        this.someApi = function() {
            return this.asyncService.getStuff(); //promise?
        }

    }

Also here are some additional feedback items:

  1. You are not using the module pattern properly
  2. Your approach requires angular.service() be used and fails if angular.factory() is used by mistake. Since .service() calls use the new operator this is scoped for the new instance. .factory(), however, does not use the new operator so this will not be valid.

Here is a solution that solves all of the above issues:

(function(angular) {
    "use strict";

        /**
         * MyModel constructor function
         */
    var MyModel = function ($asyncService) {

        // publish API for MyModel
        return {
            asyncService : $asyncService,
            someApi      : function() {
                return $asyncService.getStuff();
            }
        };
    };

    // Redefine for minification...
    MyModel = [ '$asyncService', MyModel ];


    // Register `myModel` as an instance of the MyModel service or factory.
    angular.module( "myApp.myModel", [])
           .service('myModel', MyModel); 

}(angular));

@ThomasBurleson
Copy link
Author

$asyncService is another instance (of a Class, object, function) that was

  1. registered with Angular (via .service() or .factory(), and then later...
  2. instantiated by the Angular engine during the app bootstrapping processes
// register AsyncService to create instance of $asyncService
angular.module( "myApp.myModel", [ ])
          .service( "$asyncService", AsyncService)
          .service('myModel', MyModel);

This instance $asyncService is then injected as an parameter to the function MyModel( ) invocation; which creates an instance of myModel.

See how Angular allows you to create beans/services, define dependencies, and auto-injects those as needed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment