Мой простой код Angularjs не отображает результаты

Question

Я разрабатываю простой AngularJS, отображающий города с контроллера модуля.

Это мой код:

// module: 
var myApp = angular.module('myApp', []); 


//Service: 
    myApp.service('myService', function ($http) { 
    this.getCities = function() { 
    return $http.get('/City/GetCities'); 
    } 
}); 

//Controller: 
myApp.controller('myController', function ($scope, myService) { 
getCitiesList(); 
function getCitiesList() { 
    var getCitiesList = myService.getCities(); 

    getCitiesList.then(function (emp) { 
     $scope.cities = emp.data; 

     }, function() { alert('Not Found'); }); 
    } 
}); 

cshtml файл:

 @{ 
     ViewBag.Title = "View1"; 
     Layout = "~/Views/Shared/_Layout.cshtml"; 
    } 

    <h2>View1</h2> 
    @section scripts{ 
    <script src="~/Scripts/angular.min.js"></script> 
    <script src="~/js/angulartest.js"></script> 
    } 
    <div ng-app="myApp"> 
     <div ng-controller="myController"> 
      <table> 
       <tr> 
        <td> 
         ID 
        </td> 
        <td> 
         Name 
        </td> 
       </tr> 
       <tr ng-repeat="x in citiesList"> 
        <td> 
         {{x.ID_City}} 
        </td> 
        <td> 
         {{x.CityName}} 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 

Я проследил MVC контроллер код. City/GetCities Пожары и возвращения JsonResult, но контроллер angularjs не отображает никакого результата И что я получаю только в моем браузере: Not Found alert.

Answer 1

В вашем HTML вы используете переменную "citiesList"

<tr ng-repeat="x in citiesList"> 

, но он должен быть "города", как в контроллере

$scope.cities = emp.data; 

Answer 2

изменение

<tr ng-repeat="x in citiesList"> 

это

<tr ng-repeat="x in cities"> 

и изменить эту услугу на завод

//Service: 
myApp.factory('myService', function ($http) { 
    this.getCities = function() { 
    return $http.get('/City/GetCities'); 
    } 
}); 

Поскольку служба ничего не возвращает. прочитать для получения дополнительной информации

service vs factory

Answer 3

Вашего модуль должен выглядеть следующим образом

var myApp = angular.module('myApp', []) 

Но вы закончили с полом collan (;).

В вашей службе попробовать это

myApp.service('myService', function ($http) { 
    var cities = []; 
    this.getCities = function() { 
    $http.get('/City/GetCities') 
     .success(function(emp){ 
      cities = emp.data; 
      return cities; 
     }) 
     .error(function(error){ 
     alert('invoking error'); 
     }); 

    } 
}); 

служба возвращает только массив, так что вы должны объявить пустой массив и попытаться вернуть этот массив в вызове успеха назад.

В стороне вашего контроллера

myApp.controller('myController', function ($scope, myService) { 


      $scope.citiesList = myService.getCities(); 
      console.log($scope.citiesList); 

}); 

вы должны объявить с переменными $ области для citiesList inoder связаться с шаблоном.

в вашем HTML

<tr ng-repeat="x in citiesList"> 
        <td> 
         {{x.ID_City}} 
        </td> 
        <td> 
         {{x.CityName}} 
        </td> 
       </tr> 

Теперь это будет работать.