Whats different between AngularJS “Responsive” calls vs good old AJAX calls?

Question

I was watching a free interactive course published at angularjs.org to learn Angular, Shaping up with Angular js.

On this course at the very first chapter they say, one of the main reasons to use AngularJS is, it can build “Responsive” web apps. (I know about "Responsive Design" but that's totally a different thing), and explaining it saying that, with Angular you don’t need to refresh your web page to update it with the data getting from the web server (They tell you this, like this is brand new tech!).

I think isn’t that the same thing we did for last 10 years using Ajax? Or is this something totally different?

Please help me to understand this coz I'm new to AngularJS.

Sounds like the writer of the course is just confused with buzzwords. Responsive is only used to describe responsive design as far as I know. It is distinct from Ajax. — Quentin, Oct 15 '14 at 11:58
Yes, this is the same thing we did for last 10 years using Ajax. — Clive, Oct 15 '14 at 11:58
I suppose one could describe the use of AJAX as "responsive" when used effectively from a UX perspective in the sense that, when invoking an operation, the user doesn't need to sit and wait for the page to re-load before the user is able to do anything else. Even if the operation takes a few moments, the rest of the UI can still "respond" to other interactions. But yes, still plain old AJAX just wrapped in a framework interface. And I agree that it's a potentially misleading use of the terminology. — David, Oct 15 '14 at 12:01
Yep agree, its use of misleading terminology I reckon. Thanx guys for helping me out. — Thanu, Oct 15 '14 at 12:06
By responsive, he means it provides rich client-side interactivity and user experience by avoiding full page post-backs. — Michael Kang, Oct 15 '14 at 14:37

score 5 · Accepted Answer · edited May 23 '17 at 12:22

From my view “Responsive” web apps. means type of application that updates View regards to model change (MVC).

Angular application UI is full of watchers. For each variable wrapped by {{}} in HTML, Angular creates new watcher and when we update during code running this value, Angular, by using digest cycle updates view respectively. Or ng-repeat directive that creates separate scope per list item and adds watcher as well.

On other hand in pure Javascript I need find my element by id and update it manually.

Consider following example in Fiddle

HTML

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

JS

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;
}]);

On start we have empty data: $scope.data = false;

We click on button, we get Geo data from factory and populate data with Geo output. Our GUI updates without any additional code.

This approach I would call “Responsive” web app

I suggest you to read this great post written by Josh David Miller:

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

Agree, but its again ajax calls, which wrapped in a Javascript framework (AngularJS), which allows the developer to build their web applications in a easy, fast and much organised way, isn't it? — Thanu, Oct 15 '14 at 22:35

Whats different between AngularJS “Responsive” calls vs good old AJAX calls?

1 Answers1