Edit in JSFiddle

angular.module('xmpl.service', [])
.value('greeter', {
    salutation: 'Hello',
    localize: function (localization) {
        console.log('greeter.localize');
        this.salutation = localization.salutation;
    },
    greet: function (name) {
        console.log('greeter.greet');
        return this.salutation + ' ' + name + '!';
    }
})
.value('user', {
    load: function (name) {
        console.log('user.load');
        this.name = name;
    }
});

angular.module('xmpl.directive', []);

angular.module('xmpl.filter', []);

angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter'])
.run(function (greeter, user) {
    // This is effectively part of the main method initialization code
    console.log('xmpl run block');
    greeter.localize({
        salutation: 'Bonjour'
    });
    user.load('World');
})
.controller('XmplController', function ($scope, greeter, user) {
    console.log('XmplController');
    $scope.greeting = greeter.greet(user.name);
});

<div ng-app='xmpl'>
    <div class='text' ng-controller="XmplController">{{ greeting }}</div>
</div>

.text {
    display: inline-block;
    padding: 8px 16px;
    
    background-color: #ddd;
}