Adding a service to a controller in angular

Question

i've tried to build a service that returns a formatted date, this works when i put it in a controller but i need it in a lot of places so i thought i'd build a service. Now when I try to inject the service in my controller it gives me an unknown provider issue..

Unknown provider: dateProvider <- date <- displaydate

Current Code:

services.js

angular.module('starter.services', [])
.factory('displaydate',['date','$filter', function(date, $filter) {
    var actiondate = new Date(date);
    var today = new Date();
    if(today.getDate() == actiondate.getDate()){
        var hourssince =   today.getHours() - actiondate.getHours()
        var minutessince =   today.getMinutes() - actiondate.getMinutes()
        var secondssince =   today.getSeconds() - actiondate.getSeconds()
        if(hourssince > 0){
            date = hourssince+'u';
        }else if(minutessince > 0){
            date = minutessince+'m';
        }else{
            date = secondssince+'s';
        }
    }else{
        var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
        var diffDays = Math.round(Math.abs((today.getTime() - actiondate.getTime())/(oneDay)));
        if(diffDays > 28){
            var identifier = actiondate.getMonth();
            date = $filter('date')(actiondate,"d "+ maandarray[identifier] + " yy " + " HH:" + "mm");
        }else{ 
            date = diffDays+'d';
        }
    }
    return date;
}]);

Controller.js

angular.module('starter.controllers', ['google-maps'.ns(),'starter.services'])
.controller('VolgendCtrl', function($scope, displaydate) {
    var date = displaydate(value[4]);
})

App.js

var starter = angular.module('starter', ['ionic','starter.services',  'starter.controllers' ,'ngCordova'])

starter.config(function($stateProvider, $urlRouterProvider,$httpProvider,   $ionicConfigProvider) {
    $ionicConfigProvider.prefetchTemplates(true);
    $urlRouterProvider.otherwise('/tab/volgend');
    $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })

    .state('tab.volgend', {
        url: '/volgend',
        views: {
            'volgend': { 
                templateUrl: 'templates/volgend.html',
                controller: 'VolgendCtrl',          
            }
        }
    })
    // HOME STATES AND NESTED VIEWS ========================================
});

starter.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        ionic.Platform.isFullScreen = true
    });
})

Can someone explain to me why it's not working like i expected?

Answer 1

If 'date', the thing you inject in displayDate is in fact what you try and call displayDate with in the controller, and not another service, you should not inject it the way you do. Then you should only inject the $filter and then from the factory function return a function that takes a 'date' parameter and in that function do your calculation.

angular.module('starter.services', [])
.factory('displaydate',['$filter', function($filter) {
  return function (date){
    var actiondate = new Date(date);
    var today = new Date();
    if(today.getDate() == actiondate.getDate()){
        var hourssince =   today.getHours() - actiondate.getHours()
        var minutessince =   today.getMinutes() - actiondate.getMinutes()
        var secondssince =   today.getSeconds() - actiondate.getSeconds()
        if(hourssince > 0){
            date = hourssince+'u';
        }else if(minutessince > 0){
            date = minutessince+'m';
        }else{
            date = secondssince+'s';
        }
    }else{
        var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
        var diffDays = Math.round(Math.abs((today.getTime() - actiondate.getTime())/(oneDay)));
        if(diffDays > 28){
            var identifier = actiondate.getMonth();
            date = $filter('date')(actiondate,"d "+ maandarray[identifier] + " yy " + " HH:" + "mm");
        }else{ 
            date = diffDays+'d';
        }
    }
    return date;
  }
}]);