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.

Answer 1

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