Javascript 如何使用angularjs将所有视图上相同功能的代码合并到一个文件中？

在每个$state中，我使用了4个不同的视图和4个不同的控制器来处理类似的事情，只有数据源

socket.io

不同，所以我尝试将它们合并为一个视图和控制器。但我没有加载

searchEnv

和状态。 你知道我如何解决这个问题吗

app.js

$stateProvider
    .state('app', {
        abstract: true,
        url: '',
        templateUrl: 'web/global/main.html',
        controller: 'MainCtrl'
    })
    .state('app.home', {
        url: '/',
        templateUrl: 'view/home.html',
        controller: 'MainCtrl'
    })
    .state('app.dit', {
        url: '/:type',
        templateUrl: 'view/partials/dit.html',
        controller: 'DitCtrl'
    })
    .state('app.st', {
        url: '/:type',
        templateUrl: 'view/partials/dit.html',
        controller: 'DitCtrl'
    })
    .state('app.uat', {
        url: '/:type',
        templateUrl: 'view/partials/dit.html',
        controller: 'DitCtrl'
    })
    .state('app.prod', {
        url: '/:type',
        templateUrl: 'view/partials/dit.html',
        controller: 'DitCtrl',
    });
});

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

mainCtrl.js

$scope.tabs = [{
        heading: 'Home',
        route: 'app.home',
        active: true
    },
    {
        heading: 'DIT',
        route: 'app.dt({type: '
        dt '})',
        active: false
    },
    {
        heading: 'ST',
        route: 'app.st({type:'
        st '})',
        active: false
    },
    {
        heading: 'UAT',
        route: 'app.uat',
        active: false
    },
    {
        heading: 'LSP',
        route: 'app.lsp',
        active: false
    }
];

---

但是如果我有一个改变，我必须改变四个不同html和js文件中的代码，这是有意义的。你能做一个fiddle吗对不起，我没有访问fiddle的权限尝试将app.dt和app.st合并为一个，看看你所说的合并是什么意思？