Компьютерапия

AngularJS - Ajax

Категория: AngularJS
Просмотров: 2375

AngularJS предоставляет $ http control, который работает как служба для чтения данных с сервера. Сервер делает вызов базы данных для получения желаемых записей. AngularJS нуждается в данных в формате JSON. Как только данные будут готовы, $http можно использовать для получения данных с сервера следующим образом -

function studentController($scope,$http) {
var url = "data.txt";
 
   $http.get(url).success( function(response) {
      $scope.students = response;
   });
}

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))

Здесь файл data.txt содержит записи студентов. $http service делает вызов ajax и устанавливает ответ на его учащихся. модель студентов может использоваться для рисования таблиц в HTML.

Примеры

data.txt 
[
   {
      "Name" : "Ivan Ivanov",
      "RollNo" : 101,
      "Percentage" : "80%"
   },
           
   {
      "Name" : "Petr Petrov",
      "RollNo" : 201,
      "Percentage" : "70%"
   },
           
   {
      "Name" : "Sidor Sidorov",
      "RollNo" : 191,
      "Percentage" : "75%"
   },
           
   {
      "Name" : "Fedor Fedorov",
      "RollNo" : 111,
      "Percentage" : "77%"
   }
]
testAngularJS.htm 
<html>
   <head>
      <title>Angular JS Includes</title>
     
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
        
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
        
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
     
   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "" ng-controller = "studentController">
     
         <table>
            <tr>
               <th>Name</th>
               <th>Roll No</th>
               <th>Percentage</th>
            </tr>
        
            <tr ng-repeat = "student in students">
               <td>{{ student.Name }}</td>
               <td>{{ student.RollNo }}</td>
               <td>{{ student.Percentage }}</td>
            </tr>
         </table>
      </div>
     
      <script>
         function studentController($scope,$http) {
            var url = "data.txt";
        
            $http.get(url).success( function(response) {
               $scope.students = response;
            });
         }
      </script>
     
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
     
   </body>
</html>

Вывод

Чтобы выполнить этот пример, вам необходимо развернуть файл testAngularJS.htm и data.txt на веб-сервере. Откройте файл testAngularJS.htm, используя URL-адрес вашего сервера в веб-браузере и посмотрите результат.




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok