CODEWITHSUNDEEP
javascriptmodel-view-controllerinheritanceangularjs
user864572
user864572

Reputation: 191

I'm confused as to where I would instantiate objects in angular

I just looked through angularjs, and it looks great! But I'm confused about some of the little things. For one, where do I define objects that I want to instatiate elsehwere, and how do I get them there? That seems vague, so here's an example

I have a LogObject class that many of the objects in my simple app derive from. I extend them for Tasks, Notes, Events, etc. Then I have TaskController, and a TaskModel that handles storage and instantiating of Tasks. Now, I understand the angular way to do this is with a TaskController that utilizes a TaskService for storage and other operations. But where/what do I declare the Task object as? A value? And can I just make LogObject a value, and extend from it?

PA.value('LogObject',function(){
  this.title;
  this.created = new Date();
  this.text;
  this.id;
});

PA.value('Task',function(LogObject){
  angular.extend(this,LogObject)
  this.due;
  this.etc;
  this.timeLeft = function(){
 //calculate time left 
}
});

EDIT

Factories worked great for most of what I want, but I can't seem to get extending factories right http://jsfiddle.net/22QLt/2/

Upvotes: 2

Views: 1587

Answers (2)

satchmorun
satchmorun

Reputation: 12477

There were some issues with your fiddle, so I tweaked it a little bit to get it working: updated fiddle

The first problem was that your controller wasn't wired up to your module.

I added a body tag:

<body ng-app='myapp'> ... </body>

And change the controller declaration to

app.controller("HelloCtrl", function($scope, Log, DueLog){ /*...*/ });

The second problem was your use of angular.extend. It's not a Backbone-style extend, that gives you sugar for prototypal inheritance. It just copies from object to another. So I edited your factories to manually implement prototypal inheritance.

Here's all the JS:

//angular.js example for factory inheritance
var app = angular.module('myApp', []);

app.factory('Log', function(){
    function Log(t) {
        this.title = t;
    }
    Log.prototype = {
        setTitle: function(t){
            this.title = t; 
            return this; // Returning the instance for chaining.
        }
    };
    return Log;
});

app.factory('DueLog', ['Log',function(Log){
    function DueLog(d) {
        Log.call(this);
        this.due = d;
    }
    DueLog.prototype = new Log();

    return DueLog;
}]);

app.controller('HelloCtrl', function($scope, Log, DueLog) {
    $scope.x = new Log("a").setTitle('x');
    $scope.y = new DueLog("tomorrow").setTitle('y');
});

Hopefully this helps you understand how some of these pieces fit together.

Upvotes: 3

Ven
Ven

Reputation: 19040

You want to use an Angular Factory :

http://docs.angularjs.org/guide/dev_guide.services.creating_services

var myModule = angular.module('myModule', []);
myModule.factory('serviceId', ['$http', function($http) {
  var items = [];
  return function(name) {
    var o = {name: name};
    items.push(o);
    return o;
  };
}]);

Upvotes: 4

Related Questions