How to access multiple services in angularjs controller - angularjs

Question

In an aspnetboilerplate .cshtml page, we have
div ng-controller="app.views.automate as vm"
, this angular controller access the automateService from asp.net mvc controller.
inside that div , we are loading partial view from another .cshtml file, here it should have a different service(excelService) from the Asp.net mvc controller. How to achieve it.
Angular.js
(function () {
var controllerId = 'app.views.automate';
angular.module('app').controller(controllerId, [
'$scope', 'abp.services.app.automate', function ($scope, automateService) {
var vm = this;
//Automate logic...
//Model
vm.currentStep = 1;
vm.steps = [
{
step: 1,
name: "First step",
template: "/App/Main/views/automate/step1.cshtml",
controller: 'app.views.excel as vm'
},
{
step: 2,
name: "Second step",
template: "/App/Main/views/automate/step2.cshtml"
},
{
step: 3,
name: "Third step",
template: "/App/Main/views/automate/step3.cshtml",
controller: 'app.views.capacity as vm'
}
];
//Functions
vm.gotoStep = function (newStep) {
vm.currentStep = newStep;
//$scope.ParseExcel();
}
vm.getStepTemplate = function () {
for (var i = 0; i < vm.steps.length; i++) {
if (vm.currentStep == vm.steps[i].step) {
return vm.steps[i].template;
}
}
}
vm.save = function () {
//todo: save data...
//vm.location['abq'].center
//alert(vm.location.abq.center);
// vm.enterCapacity(vm.location);
}
vm.enterCapacity = function () {
// alert(vm.capacity.locations[0].center);
automateService.calculateCapacity(vm.capacity).then(function () {
abp.notify.info(app.localize('SavedSuccessfully'));
});
}
$scope.SelectedFileForUpload = null; //initially make it null
$scope.BindData = null;
$scope.showLoader = false;
$scope.IsVisible = false;
$scope.UploadFiles = function (files) {
$scope.$apply(function () {
$scope.Message = '';
$scope.SelectedFileForUpload = files[0];
});
}
vm.capacity = {
locations: [
{ city: "abq", center: 0, housing: 0 },
{ city: "han", center: 0, housing: 0 },
{ city: "udh", center: 0, housing: 0 },
{ city: "dhn", center: 0, housing: 0 },
{ city: "spp", center: 0, housing: 0 },
{ city: "rt", center: 0, housing: 0 },
{ city: "has", center: 0, housing: 0 },
{ city: "jed", center: 0, housing: 0 },
{ city: "ry", center: 0, housing: 0 },
{ city: "yan", center: 0, housing: 0 },
{ city: "tan", center: 0, housing: 0 },
{ city: "itq", center: 0, housing: 0 },
{ city: "abq", center: 0, housing: 0 }
]
};
}
]);
})();
Angular.html
<div class="row clearfix" ng-controller="app.views.automate as vm">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Automate
</h2>
</div>
<div class="body">
<div id="wizard-step-container">
<ul class="nav nav-pills nav-justified">
<li ng-repeat="step in vm.steps" ng-class="{'active':step.step == vm.currentStep}"><a ng-click="vm.gotoStep(step.step)" href="">{{step.step}}. {{step.name}}</a></li>
</ul>
</div>
<div id="wizard-content-container">
<ng-include src="vm.getStepTemplate()"></ng-include>
</div>
<div id="wizard-navigation-container">
<div class="pull-right">
<span class="btn-group">
<button ng-disabled="vm.currentStep <= 1" class="btn btn-default" name="previous" type="button" ng-click="vm.gotoStep(vm.currentStep - 1)"><i class="fa fa-arrow-left"></i> Previous step</button>
<button ng-disabled="vm.currentStep >= vm.steps.length" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">Next step <i class="fa fa-arrow-right"></i></button>
</span>
<button ng-disabled="vm.currentStep != vm.steps.length" class="btn btn-success" name="next" type="button" ng-click="vm.save()"> <i class="fa fa-floppy-o"></i> Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Step1.html
<div class="step1">
<div class="loading-icon" id="loading" ng-show="showLoader">
</div>
<div class="form-inline">
<input type="file" class="form-control" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" onchange="angular.element(this).scope().UploadFiles(this.files)" />
<input type="button" value="Preview" class="btn btn-primary" ng-disabled="!SelectedFileForUpload" ng-click="ParseExcel()" />
<input type="button" value="Insert" style="margin-left: 15px;" class="btn btn-success" ng-show="IsVisible" ng-click="InsertData()" />
</div>
<br />
</div>
Excel.js
(function () {
angular.module('app').controller('app.views.excel', [
'$scope', 'abp.services.app.excel',
function ($scope, ExcelService) {
var vm = this;
$scope.ParseExcel = function () {
var formData = new FormData();
var file = $scope.SelectedFileForUpload;
formData.append('file', file);
$scope.showLoader = true; //show spinner
var response = Excelservice.SendExcelData(formData); //calling service
response.then(function (d) {
var res = d.data;
$scope.BindData = res;
$scope.IsVisible = true; //showing the table after databinding
$scope.showLoader = false; //after success hide spinner
}, function (err) {
console.log(err.data);
console.log("error in parse excel");
});
}
$scope.InsertData = function () {
var response = Excelservice.InsertToDB();
response.then(function (d) {
var res = d.data;
if (res.toString().length > 0) {
$scope.Message = res + " Records Inserted";
$scope.IsVisible = false; //used to disable the insert button and table after submitting data
angular.forEach(
angular.element("input[type='file']"),
function (inputElem) {
angular.element(inputElem).val(null); //used to clear the file upload after submitting data
});
$scope.SelectedFileForUpload = null; //used to disable the preview button after inserting data
}
}, function (err) {
console.log(err.data);
console.log("error in insertdata");
});
}
}
]);
angular.module('app').service("Excelservice", function ($http) {
this.SendExcelData = function (data) {
var request = $http({
method: "post",
withCredentials: true,
url: '/Home/ReadExcel',
data: data,
headers: {
'Content-Type': undefined
},
transformRequest: angular.identity
});
return request;
}
this.InsertToDB = function () {
var request = $http({
method: "get",
url: '/Home/InsertExcelData',
data: {},
datatype: 'json'
});
return request;
}
});
//used to check the extension of file while uploading
function checkfile(sender) {
var validExts = new Array(".xlsx", ".xls");
var fileExt = sender.value;
fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
if (validExts.indexOf(fileExt) < 0) {
alert("Invalid file selected, valid files are of " +
validExts.toString() + " types.");
return false;
}
else return true;
}
})();
Error Details

Answer 1

(function () {
var controllerId = 'app.views.automate';
angular.module('app').controller(controllerId, [
'$scope','Excelservice', 'abp.services.app.automate', function ($scope, Excelservice, automateService) {
var vm = this;
// ...
}]);
})();
https://github.com/aspnetboilerplate/aspnetboilerplate/issues/3789#issuecomment-416031257