How to reduce redundant code using angularjs?

Question

dt.html and st.html are exactly same only difference in controller is scoket.on call dtconsumer vs stconsumer , How can i use one controller for both views or same view and controller for two different state. there is alot of redundant code in js and html. what is best approach to resolve this issue ?

Do i need to write directive ?

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'
    })

If your question is "how can I use one controller for multiple templates", I wrote a little article on that a while back. You might be looking for the old "ng-include" which no longer exists. Go to www.tcoz.com/#/errata and take a look at "ng-include in Angular 2?" — Tim Consolazio
– Tim Consolazio, Commented Mar 24, 2017 at 20:40

tomek550 · Accepted Answer · 2017-03-24 20:46:00Z

1

You could pass dt/st via $stateParams, so you could keep 1 url with dt/st as a parameter. Something like this.

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);
});

edited Mar 24, 2017 at 20:46

answered Mar 24, 2017 at 20:41

tomek550

4704 silver badges15 bronze badges

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

10 Comments

hussain Over a year ago

can you give me an example how can i implement using $stateParams ?

hussain Over a year ago

so using your $stateParams approach i dont need to have two views and two controllers

hussain Over a year ago

just have one controller that will retrieve data based url $stateParams

tomek550 Over a year ago

Yes, that's exactly how this works. You can set right socket listeners based on $stateParams.type. Also you have 2 files you need to update instead of 4 :). Hope this helps.

tomek550 Over a year ago

I don't know what the limit is, but I hardly believe you would reach it. I guess the limit would be max URL length (if there is one). You can add multiple params, separating them with /, like this: url: '/:type/:param2/:param3/:param4....' and just read them using $stateParams in your controller.

|

Collectives™ on Stack Overflow

How to reduce redundant code using angularjs?

1 Answer 1

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Related