Umar Umar - 2 months ago 17
AngularJS Question

unknown provider factoryprovider <- factory <- controller angular js

I am having problem while injecting dependency from service to controller. Although i added it but still same error of


Unknown provider: websiteFactoryProvider <- websiteFactory <- listCtrl


I basically need to render a ng-view to my index.html

Index.html

<div ng-view>

</div>


app.js

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.

when('/list', {
templateUrl: 'app/views/list.html', controller: 'listCtrl'
}).

otherwise({
redirectTo: '/list'
});

}]);


websiteService.js

app.factory('webiteFactory', ['$http', '$location', function ($http, $location) {

var factory = {};

// method that return all websites from an http request
factory.getAllWebsites = function () {
return $http.get("http://localhost/Replicate/GetAllWebsites");
}

//method that returns an object from given array
factory.getFilteredObject = function (list, websiteName) {
for (i = 0 ; i < list.length ; i++) {
if (list[i].Name == websiteName)
return list[i];
}
}


return factory;
}]);


/* application services that would not return values */
app.service('websiteService', ['$http', function ($http) {

//service for pagination
this.paginate = function ($scope) {

//pagination code
$scope.currentPage = 1;
$scope.totalItems = $scope.model.length;
$scope.numPerPage = 10;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.model.indexOf(value);
return (begin <= index && index < end);
};


//ordering code
$scope.reverse = true;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
}

//service to change state of a website
this.changeSiteState = function (website) {
var newState = website.State == "Stopped" ? "Started" : "Stopped";
$http({
method: 'POST',
url: '/Replicate/ChangeState/',
data: JSON.stringify({ webName: website.Name, state: newState }),
headers: { 'Content-Type': 'application/json' }
}).success(function (data) {
if (data == "success") {
website.State = website.State == "Stopped" ? "Started" : "Stopped";
}
else {
alert(data);
}

}).error(function (data, status, headers, config) {
alert(data);
});
}
}])


listCtrl.js

app.controller('listCtrl', function websiteCtrl($scope, $location, websiteFactory, websiteService, $modal) {

//function triggered at the intialization of controller
$scope.init = function () {
$scope.model = [];
setTimeout(function () {
websiteFactory.getAllWebsites().success(function (data) {
$scope.model = data;
websiteService.paginate($scope);
})
}, 0);
};

//delegation of change state to service method
$scope.changeState = function (website) {
websiteService.changeSiteState(website);
}

//open modal and shows details of single object
$scope.showDetails = function (websiteName) {
var modalInstance = $modal.open({
templateUrl: '../Views/Replicate/Details.html',
controller: 'DetailsCtrl',
resolve: {
obj: function () {
return websiteFactory.getFilteredObject($scope.model, websiteName);
}
}
});
}

});

Answer

You have misspelled "websiteFactory". In your factory definition code it is "webiteFactory" but in controller you are fetching it with different name using "websiteFactory" that's why it is not able to find this provider and producing error: change:

app.factory('websiteFactory', ['$http', '$location', function ($http, $location) {

    var factory = {};

    // method that return all websites from an http request
    factory.getAllWebsites = function () {
        return $http.get("http://localhost/Replicate/GetAllWebsites");
    }

    //method that returns an object from given array
    factory.getFilteredObject = function (list, websiteName) {
        for (i = 0 ; i < list.length ; i++) {
            if (list[i].Name == websiteName)
                return list[i];
        }
    }


    return factory;
}]);
Comments