无法将服务注入Angular.js项目中的控制器

Question

我正在尝试使用Angular创建一个简单的单页面应用程序。我只是想尝试将自定义服务连接到主控制器。它只是将字符串的长度返回给控制器。

这是来自我的app.js：

angular
  .module('weatherApp', [
    'ngResource',
    'ngRoute'
  ])
  .config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl',
    controllerAs: 'main'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl',
    controllerAs: 'about'
  })
  .otherwise({
    redirectTo: '/'
  });
});

这是我的主要控制者：

angular.module('weatherApp')
  .controller('MainCtrl', ['$scope', 'weatherService', function ($scope, weatherService) {
$scope.name = weatherService.name;

$scope.$watch('name', function() {
  weatherService.name = $scope.name;
});

$log.log(weatherService.name);
$log.log(weatherService.namelength());


}]);

这就是服务：

angular.module('weatherApp')
  .service('weatherService', function () {
var self = this
this.name = 'Moscow weather';

this.namelength = function() {

  return self.name.length;

};
});

浏览器调试器出错：

Error: [$injector:unpr] Unknown provider: weatherServiceProvider <-     weatherService <- MainCtrl