loading several resources in partial views using angularJS - angularjs

Question

I am using ASP.NET MVC5 and angularJS, i have just started learning angular and i'm not so sure on best practice. what i have archived so far is good however not sure if the best approach, all my backend code is finished and i return my results as json in the controller(mvc)
in regards to angularJS i have the following code, is this how it should be done? or there is something better? also the reason why i have ng-click call all methods is that i will have select-ui and passing params to retrieve new data.
note: i have removed a lot of partials the main dashboard has around 20...
main.js
var mainModule = angular.module("mainModule", []);
mainModule.factory("appService", ["$http", "$q", function ($http, $q) {
function getBookingData() {
var deferred = $q.defer(),
httpPromise = $http({ method: "GET", url: "/Main/BookingData" });
httpPromise.then(function(response) {
deferred.resolve(response);
}, function(error) {
console.error(error);
});
return deferred.promise;
}
function getCommissionData() {
var deferred = $q.defer(),
httpPromise = $http({ method: "GET", url: "/Main/CommissionsData" });
httpPromise.then(function(response) {
deferred.resolve(response);
}, function(error) {
console.error(error);
});
return deferred.promise;
}
return {
getBookingData: getBookingData,
getCommissionData: getCommissionData
};
}
]);
mainModule.controller("mainController", [
"$scope", "$q", "appService", function($scope, $q, appService) {
$scope.getObjects = function() {
appService.getBookingData()
.then(function(response) {
$scope.bookingArray = response.data;
console.log(response);
}, function(error) {
console.error(error);
});
appService.getCommissionData()
.then(function(response) {
$scope.commissionArray = response.data;
console.log(response);
}, function(error) {
console.error(error);
});
};
$scope.getObjects();
}
]);
index.cshtml
#{
ViewBag.Title = "Main";
}
<div class="wrapper wrapper-content" ng-app="mainModule" ng-controller="mainController">
<div class="row">
<button type="button" class="btn btn-warning" ng-click="getObjects()">Apply</button>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6">
<div>#Html.Partial("_Booking")</div>
</div>
<div class="col-lg-3 col-sm-6">
<div>#Html.Partial("_Commission")</div>
</div>
</div>
</div>
#section Scripts {
#Scripts.Render("~/scripts/main")
}

Answer 1

Your appService code can be much cleaner. $http already returns promises from its calls, so you don't need any of the explicit $q calls.
function getBookingData() {
return $http({ method: "GET", url: "/Main/BookingData" })
.catch(function (error) { console.error(error); });
}
Is equivalent to your function. It might be good to review how the promise API works, and experiment with some test projects.
It doesn't look like you do anything with $scope.bookingArray and $scope.commissionArray, but maybe it's in the partials you omitted?

Answer 2

First of all, Albert Liu's answer regarding promises are correct. I think you can reduce your factory code to this using $http shortcut methods:
mainModule.factory("appService", ["$http", function ($http) { // no need to inject $q
function getBookingData() {
return $http.get("/Main/BookingData"); // $http.get shortcut methods returns a promise
}
function getCommissionData() {
return $http.get("/Main/CommissionsData"); // $http.get shortcut methods returns a promise
}
return {
getBookingData: getBookingData,
getCommissionData: getCommissionData
};
}
]);