Угловой контроллер бросает ошибку инжектора

Question

Im пытается создать свой первый слайдер с угловым. Ошибка я получаю информирует меня, что $ часы не может быть правильно введен .. Вот ошибка:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.4/$injector/unpr?p0=%24watchProvider%20%3C-%20%24watch%20%3C-%20sliderCtrl 
    at Error (native) 
    at http://localhost:9999/bower_components/angular/angular.min.js:6:416 
    at http://localhost:9999/bower_components/angular/angular.min.js:40:307 
    at Object.d [as get] (http://localhost:9999/bower_components/angular/angular.min.js:38:308) 
    at http://localhost:9999/bower_components/angular/angular.min.js:40:381 
    at d (http://localhost:9999/bower_components/angular/angular.min.js:38:308) 
    at Object.e [as invoke] (http://localhost:9999/bower_components/angular/angular.min.js:39:64) 
    at b.$get.Q.instance (http://localhost:9999/bower_components/angular/angular.min.js:80:151) 
    at K (http://localhost:9999/bower_components/angular/angular.min.js:61:140) 
    at http://localhost:9999/bower_components/angular/angular.min.js:68:475 

Когда я нажимаю на ссылку ошибки:

Unknown provider: $watchProvider <- $watch <- sliderCtrl 

контроллер:

myApp.controller('sliderCtrl', ['$scope', '$watch', function($scope, $watch){ 
    // Create an array of slide images 
    $scope.sliderImages = [ 
     { image: '../../public/assets/img/joker2.jpg', description: 'Image 1' }, 
     { image: '../../public/assets/img/batman1.jpg', description: 'Image 2' }, 
     { image: '../../public/assets/img/joker1.jpg', description: 'Image 3' } 
    ]; 

    // Initially the index is at the first image 
    $scope.currentIndex = 0; 

    //Display next image in array 
    $scope.next = function(){ 
     $scope.currentIndex < $scope.sliderImages.length - 1 ? $scope.currentIndex++ : $scope.currentIndex = 0; 
    }; 

    //Display prev image in array 
    $scope.prev = function() { 
     $scope.currentIndex > 0 ? $scope.currentIndex-- : $scope.currentIndex = $scope.sliderImages.length - 1; 
    }; 

    $scope.$watch('currentIndex', function() { 
     $scope.sliderImages.forEach(function(image) { 
      // make every image invisible 
      image.visible = false; 
     }); 
     // make the current image visible 
     $scope.sliderImages[$scope.currentIndex].visible = true; 
    }); 
}]); 

Директива:

myApp.directive('slider', [ '$timeout', 
    function($timeout) { 
     return { 
      scope: {}, 
      restrict: 'E', 
      controller: 'sliderCtrl', 
      templateUrl: 'public/views/partials/slider.html' 
     } 
    } 
]); 

Частичное:

<p class="component-example-header">Creating a slider with ngAnimate</p> 
<div class="slider"> 
    <div class="slide" ng-show="slide.image.visible"> 
     <img width="500px" height="250px" ng-repeat="slide in sliderImages" ng-src="{{slide.image}}"> 
    </div> 
    <div class="slide-navifation"> 
     <a href="#" ng-click="prev()"><</a><br> 
     <a href="#" ng-click="next()">></a> 
    </div> 
</div> 

Answer 1

Вам не нужно вводить $watch, это признак нагнетаемой $scope.

Просто опустить эту часть декларации контроллера, как таковые:

myApp.controller('sliderCtrl', ['$scope', function($scope){/*...*/ 

(Вы получаете эту ошибку, потому что угловой ищут вводимое по имени $watch, потому что вы указали его в качестве параметра для . функция контроллера Как правило, если вы хотите использовать синтаксис object.property, это object вы должны требовать для инъекций, не property - в этом случае, $scope для $scope.$watch)