Injecting module values in Angular

Question

I am attempting to include additional 'model' objects that are useful in my Angular application. Suppose I have two separate javascript files as shown below. I would like to add a "createStudent" function to my teacher prototype, and have it call the student constructor method. How can teacher.js correctly reference student.js? What is the method for injecting that here?

FYI, I know there are many methods for including rich object models in Angular. I don't want to go the route of using Restangular at the moment for example. I want to keep this extremely simple at the moment, and hopefully increase my understanding of angular modules.

Thanks!!

---------- teacher.js -----------

(function() {

    var teacherConstructor = function() {

        var teacher = {
          student: []
        };
      
        return teacher;

    };


    var module = angular.module("MyApp.models");
    module.value("teacber", teacberConstructor);
}());

---------- student.js

(function() {

    var studentConstructor = function(theTeacher) {

        var student = {
          myTeacher: theTeacher
        };
      
        return student;

    };


    var module = angular.module("MyApp.models");
    module.value("student", studentConstructor);
}());

Nikos Paraskevopoulos · Accepted Answer · 2015-01-12 21:58:08Z

2

A possible solution - use factory:

(function() {
    var module = angular.module("MyApp.models");

    module.factory("teacher", ["student", function(Student) {
        var teacherConstructor = function() {
            ...
            var student = new Student(this);
            ...
        };

        return teacherConstructor;
    }]);
})();

Anyway the definition of the teacher "class" must be done inside Angular's definition function, for it to be able to reference the student.

This however introduces an unecessary closure. I would suggest dropping the outer function, in favor of Angular's native way:

angular.module("MyApp.models").factory("Teacher", ["student", function(Student) {
    var Teacher = function() {
        ...
        var student = new Student(this);
        ...
    };

    return Teacher;
}]);

As a sidenote, it is customary for "classes" to start with capital. i.e. Student, Teacher. And the constructor may as well have the name of the class, thus teacherConstructor → Teacher in the code above.

answered Jan 12, 2015 at 21:58

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

3 Comments

Kevin MacDonald Over a year ago

Thanks! That is illuminating. A followup question: I assume that only one of these .factory() calls can inject the other, otherwise I would have a circular dependency. So I must choose whether Teacher creates new students, or a Student creates it's teacher. Is that right? And a comment: I have been trying to avoid the use of the 'new' keyword as per Crockford's book "Javascript: The Good Parts", because using a constructor function as opposed to new Teacher() offers a lot of advantages, such as the ability to enforce private vs public functions on an object.

Nikos Paraskevopoulos Over a year ago

Hi! About circularity: Yes, you are right - but that would be a problem in any language. You can still have private members with the new operator - I may be missing some details of course. But the most productive (IMO) is to pick a style that suits you, so sure, no problem with constructor functions. (Some people would even argue to entirely drop the OO logic and go functional all the way with Javascript :)

Kevin MacDonald Over a year ago

Angular seems to lend itself to functional programming by providing services, which as far as I can see are straight up singletons. I thought about simply flattening my object graph into a bunch of effectively static functions, but couldn't make myself do it.

Collectives™ on Stack Overflow

Injecting module values in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related