title: How to consolidate angularjs templates and controllers in a CRUD config
body: <p>I have a web app that provide restful api on several tables from the backend to the angularjs front end.</p>
  
  <p>The api is simply CRUD functions. So far I have the same actions for three tables. They are: list, show detail, crate new, and edit. </p>
  
  <p>It is simple to implement in angular, all I need to do is to create a controller and a view template for each action. </p>
  
  <p>However, the problem is for each table, I have to duplicate the almost same controllers and view templates. They are identical in business logic, but different in object name, and a few functions unique to the table.</p>
  
  <p>Is there a way to consolidate the controllers and html templates while still have the capability to insert some specific functions into the controller depends on which table/action it is controlling?</p>
  
  <h3>Edit</h3>
  
  <p>For example two tables: school and student. Both of them have property <code>name</code> and <code>address</code>. Student has a special function <code>graduate</code>.</p>
  
  <p>For school, I can have a controller js file like this (example code won't run):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('school', ['ngRoute'])
  
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/schools', {
        controller:'SchoolListController as ctrl',
        templateUrl:'school/schoollist.html'
      })
      .when('/schools/:id', {
        controller:'SchoolDetailController as ctrl',
        templateUrl:'school/schooldetail.html'
      })
      .when('/schools/edit/:id', {
        controller: 'SchoolEditController as ctrl',
        templateUrl: 'school/schooledit.html'
      })
  
  }])
  
  .controller('SchoolListController', function($scope,$location, Models) {
    var ctrl = this
    var schools = Models.School.query(function () {
      ctrl.schools = schools
    })
  })
  
  .controller('SchoolDetailController', function($scope, $routeParams, $location, Models) {
    var ctrl = this
    var school = Models.School.get({ id: $routeParams.id }, function () {
      ctrl.school = school
    })
  
    ctrl.delete = function(){
      // code to delte
    }
  })
  
  .controller('SchoolEditController', function(Models, $routeParams, $location) {
    var ctrl = this;
    var school = Models.School.get({id: $routeParams.id}, function(){
        ctrl.school = school
      })
   
     ctrl.save = function(){
      ctrl.school.$save()
    }
    ctrl.cancel = function() {
      //
    }
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>For student, the exactly same js file needs to be written again, but just change the name from <code>school</code> to <code>student</code>, except that I need to add a <code>ctrl.graduate</code> in student's detail controller.</p>
  
  <p>I can create a generating function <code>generateController(objName)</code> to generate the controller according to provided <code>objName</code>, however, I cannot <strong>later</strong> add <code>graduate</code> to student's controller.</p>
  
  For html template
  
  <p>School and student both share the same format of template (or at least a large chunk of the view). E.g. the list view, both of them are a table, with Name and Address as columns. And clicking the row of the column will show the detail view.</p>
  
  <p>Again, I need to create two sets of identical template files for school and student, with a few difference. </p>
  
  <p>So what is the best way to consolidate the duplications in both controller and templates?</p>