AngularJS с направляющим контроллером MVC необходимо

Question

, поэтому я начал узнавать о angularJS сегодня, а также создал демо-код. Как-то код не запускался. Я копирую этот код где-то и меняю свое имя. после запуска html. код показывает {{CU.name}} может может дать хорошую ссылку или простой пример кода на пошаговом поиске данных с угловыми Js и MVC?

<script> 
var TestCtrl = function ($scope, $http) { 

    $scope.firstCall = function() { 

     $http({ 
      url: "@Url.Action("RetriveRecordList", "recordController")", 
      dataType: 'json', 
     method: 'GET', 
     data: '', 
     headers: { 
      "Content-Type": "application/json" 
     } 
    }).success(function (response) { 
     debugger; 
     alert("haha") 
     $scope.DemoList = response; 
    }) 
     .error(function (error) { 
      alert(error); 
     }); 
} 
} 

<div ng-controller="TestCtrl" ng-init="firstCall()"> 

<div class="table-responsive com-table"> 

    <table class="table table-bordered table-hover table-striped"> 
     <thead> 
      <tr> 
       <th width="5%">Customer ID</th> 
       <th width="15%">Customer Name</th> 
       <th width="15%">Email</th> 
       <th width="20%">Mobile No.</th> 
       <th width="25%">Address</th> 
       <th width="20%">Registration Date</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="CU in DemoList"> 
       <td width="5%">{{CU.name}}</td> 
       <td width="15%">{{CU.name}}</td> 
       <td width="15%">{{CU.name}}</td> 
       <td width="20%">{{CU.name}}</td> 
       <td width="25%">{{CU.name}}</td> 
       <td width="20%">{{CU.name}}</td> 
      </tr> 
     </tbody> 
    </table> 

    <div class="collapse"> 
     <div class="well"> 
     </div> 

    </div> 
</div> 
</div> 

Answer 1

angular.module('ngSampleApp', []).controller('TestCtrl', `function($scope) {` 

}); 

сначала вы должны обратиться угловую структуру в вас приложения. затем определите модуль и контроллер. после этого в файле HTML укажите имя модуля, используя директиву ng-app.

Answer 2

Определите ng-app в html и определите модуль в файле js. Также добавьте запятые и :, когда вы определите $http.

$http({ 
    url: "@Url.Action(", 
    RetriveRecordList: ", ", 
    recordController: ")", 
    dataType: 'json', 
    method: 'GET', 
    data: '', 
    headers: { 
     "Content-Type": "application/json" 
    } 
}) 

поймать ответ использовать then вместо success .It удалить из угловой версии 6.1.1

angular.module('app',[]) 
 
.controller('TestCtrl',TestCtrl); 
 

 
function TestCtrl($scope, $http) { 
 
\t $scope.firstCall = function() { 
 
\t \t $http({ 
 
\t \t \t \t url: "@Url.Action(", 
 
\t \t \t \t RetriveRecordList :", ", 
 
\t \t \t \t recordController :")", 
 
\t \t \t \t dataType: 'json', 
 
\t \t \t \t method: 'GET', 
 
\t \t \t \t data: '', 
 
\t \t \t \t headers: { 
 
\t \t \t \t \t "Content-Type": "application/json" 
 
\t \t \t \t } 
 
\t \t \t }).then(function(response) { 
 
\t \t \t \t debugger; 
 
\t \t \t \t alert("haha") 
 
\t \t \t \t $scope.DemoList = response; 
 
\t \t \t },function(error) { 
 
\t \t \t \t alert(error); 
 
\t \t \t }) 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="TestCtrl" ng-init="firstCall()"> 
 

 
<div class="table-responsive com-table"> 
 

 
    <table class="table table-bordered table-hover table-striped"> 
 
     <thead> 
 
      <tr> 
 
       <th width="5%">Customer ID</th> 
 
       <th width="15%">Customer Name</th> 
 
       <th width="15%">Email</th> 
 
       <th width="20%">Mobile No.</th> 
 
       <th width="25%">Address</th> 
 
       <th width="20%">Registration Date</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="CU in DemoList"> 
 
       <td width="5%">{{CU.name}}</td> 
 
       <td width="15%">{{CU.name}}</td> 
 
       <td width="15%">{{CU.name}}</td> 
 
       <td width="20%">{{CU.name}}</td> 
 
       <td width="25%">{{CU.name}}</td> 
 
       <td width="20%">{{CU.name}}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <div class="collapse"> 
 
     <div class="well"> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
</div>