angularjs with oop inheritance in action

Question

Abstract

I\'m working on an application that uses angular as a client side framework, angular currently rocks and I\'m really happy using it, though now I find tha

Answer 1

I think your guesses are pretty good and I played with a few approaches like that, but they all turned out more verbose than I had hoped.

I had a problem where I had developed a complex dialog as a tab in our admin interface, but I wanted an almost identical dialog in a popup in the user section, but the data would be populated from a different source and there would be a few additional buttons. Basically a great candidate for classical inheritance. For the UI side I used a template which was included in two places with different controllers. But to avoid duplicating the complex UI logic in the controllers I wanted to use inheritance.

The scope inheritance method relies somewhat on the structure of the application and wasn't appropriate because the two UIs were in effectively different applications. The approach of putting reused code into services would end up being verbose as I would have needed to have each controller method call an equivalent method on the service. So I used the following simple approach to JavaScript inheritance:

/**
 * Effective base class for Thing Controllers.
 * This should be considered abstract since it does not define
 * $scope.readData() or $scope.saveData() which may be called from its
 * other functions.
 */
function BaseThingController($scope, $http){
    $scope.data = []; // local data store;
    $scope.validateForm(){...}
    $scope.edit(){...}
    $scope.cancel(){...}
    $scope.reset(){...}
    $scope.otherMethod1(){...}
    $scope.otherMethod2(){...}
    $scope.otherMethod3(){...}
}

/**
 * AdminThingController effectively extends BaseThingController
 */
function AdminThingController($scope, $http){
    // Calling BaseThingController as a function defines all the needed 
    // functions and properties in our scope.
    BaseThingController($scope, $http)

    $scope.readData(){
       // $scope.data = data from admin data source
    }

    $scope.saveData(newData){
       // save to special admin service
    }

    // initialize local data
    $scope.readData()
}

/**
 * UserThingController effectively extends BaseThingController
 */
function UserThingController($scope, $http){
    // Calling BaseThingController as a function defines all the needed 
    // functions and properties in our scope.
    BaseThingController($scope, $http)

    $scope.readData(){
       // $scope.data = data from user data source
    }

    $scope.saveData(newData){
       // save to user service
    }

   /**
    * Overriding base class behaviour here
    */
   $scope.otherMethod1(){...}

    // initialize local data
    $scope.readData()

}

So I've not used prototype inheritance as the $scope is readily available. But I have gained all the behaviour from the base controller and only added or overridden what I want to. My views could be configured with either controller and would work with no modifications.