Erreur AngularJS: $ injector: Prov Unknown Provider. édité

Question

Maintenant j'ai ajouté le code dans la question. controllers.js services.js

et d'obtenir cette erreur. angular.js: 13642 Erreur: [$ injecteur: non] http://errors.angularjs.org/1.5.6/ $ injecteur/unf? P0 =% 24scopeProvider% 20% 3C-% 20% 24scope% 20% 3C-% 20CF à angular.js: 38 à angular Js: 4501 à Object.d [comme get] (angularjs: 4654) à angularjs: 4506 à d (angularjs: 4654) à e (angularjs: 4678) à objet .invoke (angularjs: 4700) à l'objet $ get (angularjs: 4547). à Object.invoke (angularjs: 4708) à angularjs: 4507

'use strict'; 
 
angular.module("carsApp") 
 
    .controller("carsController", ["$scope", "CF", 
 
    function($scope, CF) { 
 
     $scope.tab = 1; 
 
     $scope.filterTxt = ''; 
 
     $scope.showDetails = false; 
 
     $scope.cars = CF.getCars(); 
 
     $scope.selectMenu = function(setTab) { 
 
     $scope.tab = setTab; 
 
     if (setTab === 2) { 
 
      $scope.filterTxt = "BMW"; 
 
     } else if (setTab === 3) { 
 
      $scope.filterTxt = "HONDA"; 
 
     } else if (setTab === 4) { 
 
      $scope.filterTxt = "TOYOTA"; 
 
     } else { 
 
      $scope.filterTxt = ""; 
 
     } 
 
     } 
 
     $scope.isSelected = function(val) { 
 
     return ($scope.tab === val); 
 
     } 
 
     $scope.toggleDetails = function() { 
 
     $scope.showDetails = !$scope.showDetails; 
 
     } 
 
    } 
 
    ]);

//Sser 
 
angular.module("carsApp") 
 
    .factory("CF", function($scope) { 
 
    var carFact = {}; 
 
    $scope.cars = [{ 
 
     id: '1', 
 
     make: 'BMW', 
 
     name: 'BMW', 
 
     image: 'images/bmw/bmw1.png', 
 
     model: '2005', 
 
     price: '4500', 
 
     description: 'A very nice maintained car. Good road grip, no work required. Next inspection March 2017', 
 
     comment: '' 
 
    }, { 
 
     id: '2', 
 
     make: 'HONDA', 
 
     name: 'Civic', 
 
     image: 'images/honda/honda1.png', 
 
     model: '2016', 
 
     price: '25000', 
 
     description: 'Honda is a nice car. Good road grip, no work required. Next inspection March 2017', 
 
     comment: '' 
 
    }, ]; 
 
    carFact.getCars = function() { 
 
     return cars; 
 
    }; 
 

 
    carFact.getCar = function(index) { 
 
     return cars[index]; 
 
    }; 
 
    return carFact; 
 
    });

Answer 1

A Factory Provider n'a pas de concept d'une variable de champ d'application, dans le même sens qu'un contrôleur ne. Le cas échéant, une autre valeur pourrait être injecté dans cette usine - .: par exemple

angular.module('carsApp', []) 
.value('topCarId','1') 
.factory('CF', ['topCarId',function(topCarId) { 
     //this factory provider can utilize topCarId 
}); 

Voici un exemple simplifié, où l'utilisateur est invité à sélectionner une voiture. Il utilise ngOptions pour ajouter les voitures à une liste de sélection, bien que peut-être votre code a des appels à selectMenu() sur les boutons ou d'autres éléments.

angular.module('carsApp', []) 
 
    .factory('CF', function() { 
 
    var cars = [{ 
 
     id: '1', 
 
     make: 'BMW', 
 
     name: 'BMW', 
 
     description: 'A very nice maintained car...' 
 
    }, { 
 
     id: '2', 
 
     make: 'Honda', 
 
     name: 'Civic', 
 
     description: 'Honda is a nice car...' 
 
    }, 
 
{ 
 
     id: '3', 
 
     make: 'Toyota', 
 
     name: 'Camry', 
 
     description: 'Toyota is a nice car...' 
 
    }]; 
 
    return { 
 
     getCars: function() { 
 
     return cars; 
 
     } 
 
    }; 
 
    }) 
 
    .controller('carsController', ['$scope', 'CF', 
 
    function($scope, CF) { 
 
     $scope.cars = CF.getCars(); 
 
     $scope.filterTxt = ''; 
 
     $scope.tab = 0; 
 
     $scope.car = {}; 
 
     $scope.selectMenu = function(setTab) { 
 
     $scope.tab = setTab; 
 
     $scope.filterTxt = $scope.car.make; 
 
     } 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="carsApp" ng-controller="carsController"> 
 
    Choose a car: <select ng-model="car" ng-options="car as car.name for car in cars track by car.id" ng-change="selectMenu(car.id)"></select> 
 
    
 
    <div>FilterTxt: <span ng-bind="filterTxt"></span></div> 
 
    <div>Tab: <span ng-bind="tab"></span></div> 
 
</div>