Pass Service As A Controller Parameter - angularjs

Question

I've a AngularJs controller that gets a list of categories from ASP.NET MVC controller. It works just fine and here is the below code:
productApp.controller('categoryController', function ($scope, categoryService) { //The controller here
$scope.Categories = null;
categoryService.GetCategories().then(function (d) {
$scope.Categories = d.data;
}, function () {
alert('Failed');
});
});
productApp.factory('categoryService', function ($http) { //The product service
var factory = {};
factory.GetCategories = function () {
return $http.get('/Product/GetCategories'); //The ASP.NET MVC controlled defined
}
return factory;
});
I am trying to convert it to the following passing the service as a controller parameter but it doesn't work:
(function () {
'use strict';
angular
.module('productApp', ['ngMessages'])
.controller('categoryController', categoryController);
categoryController.$inject = ['$scope', 'Products'];
function categoryController($scope, categoryService) {
$scope.Categories = null;
categoryService.GetCategories().then(function (d) {
$scope.Categories = d.data;
}, function () {
alert('Failed');
});
}
productApp.factory('categoryService', function ($http) { //The product service
var factory = {};
factory.GetCategories = function () {
return $http.get('/Product/GetCategories'); //The ASP.NET MVC controlled defined
}
return factory;
});
})();
My requirement is to get all the controller united as follows:
angular
.module('productApp')
.controller('categoryController', categoryController)
.controller('productController', productController);
I believe, I am close enough and missing something here. I would expect some suggestions to implement it in the correct way. Thanks.
Update 1 - The below code works almost but it doesn't bind the DropDownList with category data: But using alert method, it returns [Object][Object] that means it gets categories from database
(function () {
'use strict';
angular
.module('productApp', [])
.controller('categoryController', categoryController)
.factory('categoryService', categoryService);
categoryController.$inject = ['$scope', 'categoryService'];
function categoryController($scope, categoryService) {
$scope.Categories = null;
categoryService.GetCategories().then(function (d) {
$scope.Categories = "Service: " + d.data + ", Controller: categoryController";
alert(d.data); //Here it alert [Object][Object]
}, function () {
alert('Failed');
});
}
function categoryService($http) {
var factory = {};
factory.GetCategories = function () {
return $http.get('/Product/GetCategories');
}
return factory;
};
})();
In the view:
<div ng-app="productApp" ng-controller="categoryController">
<select ng-model="saveProducts.ParentId">
<option value="">----Please Select Category----</option>
<option ng-repeat="m in Categories" value="{{ m.CategoryId }}">{{ m.Category }}</option>
</select>
</div>

Answer 1

#user8512043 Here is a JSFiddle with the working code: http://jsfiddle.net/luisperezphd/2fvwz6wp/
(function () {
'use strict';
angular
.module('productApp', [])
.controller('categoryController', categoryController)
.factory('categoryService', categoryService);
categoryController.$inject = ['$scope', 'categoryService'];
function categoryController($scope, categoryService) {
$scope.Categories = null;
categoryService.GetCategories().then(function (d) {
$scope.Categories = d.data;
}, function () {
alert('Failed');
});
}
function categoryService($http, $q) {
var factory = {};
factory.GetCategories = function () {
//return $http.get('/Product/GetCategories');
return $q.when({ data: [
{ CategoryId: 1, Category: "Category 1" },
{ CategoryId: 10, Category: "Category 2" },
{ CategoryId: 20, Category: "Category 3" }
]});
}
return factory;
};
})();
Note that it looks like code was fine. The drop down wasn't working because you assigned a string to the scope variable instead of an array.
One technique to resolve issue like that is to make it as visual as you can. For example use an ng-repeat on a instead of an .
Also in general if you are going to ask for help on StackOverflow you are going to get a lot more responses if you create a JSFiddle or Plnkr with your sample code.
Finally if you are going to do that mock the server calls. This will allow the person who wants to answer to do some quick experiments.

Answer 2

Check this code
(function () {
'use strict';
angular
.module('productApp',[])
.controller('categoryController', categoryController)
.controller('productController', productController)
.factory('categoryService', categoryService);
function categoryController($scope, categoryService) {
$scope.data = "Service: "+categoryService.serviceName+", Controller: categoryController";
};
function productController($scope, categoryService) {
$scope.data = "Service: "+categoryService.serviceName+", Controller: productController";
};
function categoryService() {
return {serviceName: "categoryService"};
};})();