1

I have the below code implementation for service call but am getting the following error : "angular.min.js:102 Error: [$injector:unpr]"

please advise me on the below error.thanks in advance

    var app1 = angular.module('homeapp', []);
app1.service('APIService', function ($http) {
    this.getSkill = function (userid) {
        //return $http.get("api/GetSkillRating", )
    return $http({
                url: "api/GetSkillRating",
                method: "GET",
                params: { userid: userid }
            });
    }
});  

app1.controller("HomeController", ['$scope', 'APIService', function ($scope, APIService) {
    $scope.skillrating =[];

    $scope.getAll = function () {
        var servCall = APIService.getSkill(userid);
        servCall.then(function (d) {
            $scope.skillrating = d.data;
        }, function (error) {
                $log.error('Oops! Something went wrong while fetching the data.')
            })
    }  

}])

2 Answers2

1

Add $scope as a dependency

app1.controller("HomeController", ['$scope','APIService', function ($scope, APIService) {
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
0

you can't use $scope in service and in controller you must inject $scope and $log

var app1 = angular.module('homeapp', []);

app1.service('APIService', function ($http) {
        this.getSkill = function () {
                //return $http.get("api/GetSkillRating", )
        return $http({
                                url: "api/GetSkillRating",
                                method: "GET",
                                params: { userid: $scope.userid }
                        });
        }
});

app1.controller("HomeController", ['$scope','$log','APIService', function ($scope, $log, APIService) {
        $scope.skillrating =[];
        getAll();

        function getAll() {
                var servCall = APIService.getSkill();
                servCall.then(function (d) {
                        $scope.skillrating = d.data;
                }, function (error) {
                                $log.error('Oops! Something went wrong while fetching the data.')
                        })
        }

}]);
FarukT
  • 1,560
  • 11
  • 25
  • @vimalkumar are you sure that you are defined only one time this line of code? var app1 = angular.module('homeapp', []); – FarukT Mar 30 '18 at 14:34
  • I have it var app = angular.module('loginapp', []); for another view page logincontroller –  Mar 30 '18 at 14:36
  • can you add more code please? I want understand how this app is structured – FarukT Mar 30 '18 at 14:38
  • you can see here https://stackoverflow.com/questions/21673404/error-ngareq-from-angular-controller how to manage more modules – FarukT Mar 30 '18 at 14:39
  • I have both the modules in the same file for two different controllers. var app = angular.module('loginapp', []); var app1 = angular.module('homeapp', []); –  Mar 30 '18 at 14:49
  • ok, can you show me how you made the second module with its controller? – FarukT Mar 30 '18 at 14:51
  • var app = angular.module('loginapp', []); app.controller("LoginController", function ($scope, $http) { $scope.login = function () { $http({ method: "POST", url: '/Login/userlogin', data: $scope.user }).success(function (d) { if (d != 0) { userid = d; window.location.href = '/Home/Index'; } else { alert(d); } $scope.user = null; }).error(function () { alert('failed'); }) } }) –  Mar 30 '18 at 14:58