I can see two mistakes in your code:
1) You cannot inject 'myProvider' in your application module since 'myProvider' is defined in your application module.
2) The name of 'myProvider' is wrong, Angular automatically append 'Provider' to your provider.
Here is the fix:
1) Define your provider in a dedicated module and add this new module in your application module dependencies.
2) Rename your provider to 'my' (or inject 'myProviderProvider' in your config function) :
angular.module('myProviderModule', [])
.provider('my', function () { // or 'myProvider'
// Private variables
var salutation = 'Hello';
// Private constructor
function Greeter() {
this.greet = function () {
return salutation;
};
}
// Public API for configuration
this.setSalutation = function (s) {
salutation = s;
};
// Method for instantiating
this.$get = function () {
return new Greeter();
};
});
angular.module('myApp', [
'ngRoute',
'myProviderModule'
])
.config(function ($routeProvider, myProvider) { // or 'myProviderProvider'
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
See this fiddle: http://jsfiddle.net/Z3k2s