Различия между AngularJS «Отзывчивые» вызовы и добрые старые звонки AJAX?

Я смотрел бесплатный интерактивный курс, опубликованный в angularjs.org, чтобы узнать Угловое, Shaping up with Angular js.Различия между AngularJS «Отзывчивые» вызовы и добрые старые звонки AJAX?

На этом курсе в первой главе, которую они говорят, одной из основных причин использования AngularJS является то, что она может создавать «отзывчивые» веб-приложения. (Я знаю об «Реагирующем дизайне», но это совсем другое дело), и объясняя это тем, что с помощью Angular вам не нужно обновлять свою веб-страницу, чтобы обновить ее с помощью данных, поступающих с веб-сервера (они сообщают вам об этом , как это новый tech!).

Я думаю, что это не то же самое, что мы делали последние 10 лет с помощью Ajax? Или это совсем другое?

Пожалуйста, помогите мне разобраться в этом. Я новичок в AngularJS.

источник

2014-10-15 Thanu

Похоже, автор курса просто спутать с словечки. Насколько мне известно, отзывчивость используется только для описания адаптивного дизайна. Он отличается от Ajax. – Quentin

Да, это то же самое, что мы делали в течение последних 10 лет с помощью Ajax. – Clive

Я полагаю, что можно использовать использование AJAX как «отзывчивого» при эффективном использовании с точки зрения UX в том смысле, что при вызове операции пользователю не нужно сидеть и ждать перезагрузки страницы до пользователь может сделать что-нибудь еще. Даже если операция занимает несколько секунд, остальная часть пользовательского интерфейса может «реагировать» на другие взаимодействия. Но да, все еще простой старый AJAX просто обернут интерфейсом фреймворка. И я согласен, что это потенциально вводящее в заблуждение использование терминологии. – David

С моей точки зрения “Responsive” web apps. означает тип приложения, которое обновляет Вид на изменение модели (MVC).

Угловой пользовательский интерфейс заполнен наблюдателями. Для каждой переменной, обернутой {{}} в HTML, Angular создает новый наблюдатель, и когда мы обновляем код во время выполнения этого значения, Angular, используя digest cycle соответственно. Или директива ng-repeat, которая создает отдельную область для каждого элемента списка и добавляет наблюдателя.

С другой стороны, в чистом Javascript мне нужно найти свой элемент по id и обновить его вручную.

Рассмотрим следующий пример в Fiddle

HTML

<ul> 
    <li ng-click="loadGeo()">click 1</li> 
</ul> 
<ul> <pre> 
     data: {{data|json}} 
    </pre> 
</ul>

var app = angular.module('myModule', ['ngResource']); 

app.controller('fessCntrl', function ($scope, Data) { 

    $scope.data = false; 

    $scope.loadGeo = function() { 
     Data.query() 
      .then(function (result) { 
      $scope.data = result.data.results[0]; 
     }, function (result) { 
      alert("Error: No data returned"); 
     }); 
    }  
}); 

app.factory('Data', ['$http', '$q', function ($http, $q) { 

    var address = 'Singapore, SG, Singapore, 153 Bukit Batok Street 1'; 
    var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true'; 

    var factory = { 
     query: function() { 
      var data = $http({ 
       method: 'GET', 
       url: URL 
      }); 

      var deferred = $q.defer(); 
      deferred.resolve(data); 
      return deferred.promise; 
     } 
    } 
    return factory; 
}]);

На старте мы имеем пустой data: $scope.data = false;

Мы нажимаем кнопку, мы получаем данные Geo с завода и заполняем data с выходом Geo. Наш графический интерфейс обновляется без дополнительного кода.

Этот подход я бы назвал “Responsive” web app

Я предлагаю вам прочитать этот великий пост, написанный Джошем Дэвид Миллер:

how-do-i-think-in-angularjs-if-i-have-a-jquery-background

источник

2014-10-15 13:08:32

Согласитесь, но его снова вызовы ajax, которые завернуты в структуру Javascript (AngularJS), которая позволяет разработчику создавать свои веб-приложения простым, быстрым и организованным способом, не так ли? – Thanu

Оба угловых и AJAX делают, почти то же самое, но когда дело доходит до лучших, AGULAR - это просто здорово ... он делает разработку проще и быстрее. Угловое имеет то, что называется $stateproviders, $locationProviders и $urlRouterProvider.

Попробуйте это после загрузки кода угловых источников.

var app = angular.module('app', ['jssor', 'ui.router', 'main.directive']); 

app.config(["$stateProvider", "$locationProvider", "$urlRouterProvider", 
      function ($stateProvider, $locationProvider, $urlRouterProvider){ 

    $urlRouterProvider.otherwise('/home'); 

    function newMenu(text, state){ 
     return { 
      text:text, 
      state: state 
     } 
    } 

    $stateProvider.state('home', { 
     url: '/pages', 
     templateUrl: 'content/partials/pages.html' 
    }) 
}])

Затем по вашему указателю.HTML

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<title>My new angularjs app</title> 
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.min.css"/>

<div ui-view></div> 

<script src="content/js/jquery.min.js"></script> 
<script src="content/js/angular.min.js"></script> 
<script src="content/js/angular-ui-router.min.js"></script> 
<script src="content/js/angular-resource.min.js"></script> 
<script src="content/js/angular-route.min.js"></script> 
<script src="content/js/bootstrap.js"></script> 
<script src="content/js/bootstrap.min.js"></script> 
<script src="content/js/jssor/jssor.slider.mini.js"></script> 
<script src="content/js/app/jssor-directive.js"></script> 
<script src="content/js/app/scroll-directive.js"></script> 
<script src="content/js/app/crs-directives.js"></script> 
<script src="content/js/app/main.js"></script>

источник

2015-01-03 22:03:31

Различия между AngularJS «Отзывчивые» вызовы и добрые старые звонки AJAX?

ответ

Смежные вопросы