Wie reduziere ich redundanten Code mit angularjs?

Question

und st.html sind genau das gleiche nur Unterschied im Controller ist scoket.on Anruf dtconsumer vs stconsumer, Wie kann ich einen Controller für beide Ansichten oder die gleiche Ansicht und Controller für zwei verschiedene Zustand verwenden. Es gibt viele redundante Codes in js und html. Was ist der beste Ansatz, um dieses Problem zu lösen?

Muss ich eine Direktive schreiben?

dt.html

<div class="panel-body display-logs" scroll-bottom="event" style="width:100%;"> 
         <ul style="list-style: none;"> 
          <li ng-repeat="message in event | limitTo:1000" ng-class="{lastItem: $last}"><span>{{message.value}}</span></li> 
         </ul> 
       </div> 

Ctrl-1.js

var searchEnv = 'DT'; 
$scope.event = []; 
socket.on('dtConsumer',function (data) { 
     var obj = { 
      file:$scope.filename, 
      data:data 
     } 
     var messageSize = getBytesForBuffer(data); 
     $scope.event.push(data); 
    }); 

Ctrl-2.js

var searchEnv = 'st'; 
$scope.event = []; 
socket.on('StConsumer',function (data) { 
     var obj = { 
      file:$scope.filename, 
      data:data 
     } 
     $scope.event.push(data); 
     var messageSize = getBytesForBuffer(data); 
    }); 

app.js

.state('app.dt', { 
     url: '/dt', 
     templateUrl: 'view/partials/dt.html', 
     controller: 'DitCtrl' 
    }) 
    .state('app.st',{ 
     url:'/st', 
     templateUrl:'view/partials/st.html', 
     controller:'StCtrl' 
    }) 

Answer 1

Sie könnten dt/st über $stateParams übergeben, so dass Sie 1 URL mit dt/st als Parameter behalten könnten. Etwas wie das.

app.js

.state('app.dt', { 
    url: '/:type', 
    templateUrl: 'view/partials/dt.html', 
    controller: 'DitCtrl' 
}) 

ctrl.js

var searchEnv = $stateParams.type; 
$scope.event = []; 
socket.on(searchEnv+'Consumer',function (data) { 
    var obj = { 
     file:$scope.filename, 
     data:data 
    } 
    var messageSize = getBytesForBuffer(data); 
    $scope.event.push(data); 
});