Функция AngularJS не запускается

Question

У меня есть следующий угловой завод и контроллер.

var app = angular.module("carForm", []);

app.factory("dataService", ['$http', function getData($http) {
    function getCars(){
        return $http({
            method: 'GET',
            url: '/data.json'
        }).then(function (response){
            console.log(response.data);
            return response.data
        },function (error){
            console.log("product error");
        })
    };
    return { getCars : getCars }
}]);

app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
    dataService.getCars().then(function(response){
        cars = response;

        $scope.make = [];
        for (key in cars){
            item = cars[key];
            console.log(item);
            $scope.make.push(item);
        }

        $scope.model = [];
        for (key in cars[$scope.selectMake]){
            item = cars[item][key_2]
            $scope.model.push(item)
        }
    })

    search = function(cars){
        cars[$scope.selectMake][$scope.selectModel][$scope.selectType]
    }


}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="col-12" ng-contoller="dataSort">
  <div class="row" style="text-align: center;">
    <div class="form-group col-6">
      <label for="inputState">Make</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectMake" selected>Select make</option>
        <option ng-repeat="item in make">{{ item }}</option> 
      </select>
    </div>
    <div class="form-group col-6">
      <label for="inputState">Model</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectModel" selected>Select model</option>
        <option ng-repeat="item in model">{{ model }}</option>
      </select>
    </div>
    <div class="form-group col-3">
      <label for="inputState">Type</label>
      <select id="inputState" class="form-control">
        <option ng-model="selectType"selected>Select make type</option>
        <option ng-repeat="item in type">{{ model }}</option>
      </select>
    </div>
  </div>
</div>

Я не верю, что фабрика или контроллер работают. В консоли ничего не регистрируется, ни данные, ни сообщение об ошибке. Angular правильно связан с моей формой, поскольку {{}} также нет, и приложение ng объявляется в верхней части HTML-тега body с помощью ng-app = "carForm". Страница JS правильно связана с html, как когда я console.log выходит за угловую функцию, которую она печатает. Angular загружается перед моим JS-скриптом в теге head, я не могу понять, что я делаю неправильно.

Answer 1

Ваша фабрика введена неправильно. Пожалуйста, измените ее следующим образом.

app.factory("dataService", ['$http', function($http) {
    function getCars(){
        return $http({
            method: 'GET',
            url: '/data.json'
        }).then(function (response){
            console.log(response.data);
            return response.data
        },function (error){
            console.log("product error");
            })
        };
        return { getCars : getCars }
}]);

Answer 2

Ваш factory не исправлен, потому что вы не передали свою функцию взамен

Правильный способ сделать фабрику

app.factory("dataService", ['$http', function($http) {
   var x = {};
   return x;
}]);

Но даже если вы измените код, он не будет работать на вашем контроллере, потому что вы хотите вернуть response.data в $http как promise, а этого не происходит, в дело $q в качестве инъекции для вашего обслуживания.

var app = angular.module("carForm", []);

app.factory("dataService", ['$http', '$q', function ($http, $q) {
    var factory = {}

    factory.sample = function() {
        console.log("in factory!");
        return [1,2,3]
    }
    
    factory.getCars = function() {
        var deferred = $q.defer();
        $http.get("api").then(function(response){
           deferred.resolve(response.data);
        })
        return deferred.promise;
    }
        
    return factory;
}]);

app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
    $scope.items = dataService.sample();
    
    //uncomment when your api was ready
    
    //dataService.getCars().then(function(response){
    //    console.log(response);
    //})
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="carForm" ng-controller="dataSort">
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    <ul>
</div>