AngularJS"响应"调用与旧的AJAX调用之间有什么不同？

Question

我正在观看在angularjs.org上发表的免费互动课程,以学习Angular,使用Angular js.

在他们说的第一章的这个课程中,使用AngularJS的一个主要原因是,它可以构建"响应式"Web应用程序.(我知道"响应式设计",但这完全是一个不同的东西),并解释说,使用Angular你不需要刷新你的网页来更新它来自网络服务器的数据(他们告诉你这个,就像这是全新的科技!).

我认为与过去10年我们使用Ajax做的事情不一样吗？或者这是完全不同的东西？

请帮助我理解这个因为我是AngularJS的新手.

Answer 1

从我的视图“Responsive” web apps.意味着更新View关于模型更改(MVC)的应用程序类型.

Angular应用程序UI充满了观察者.对于{{}} 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>

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

一开始我们有空data: $scope.data = false;

我们点击按钮,我们从工厂获得Geo数据并填充dataGeo输出.我们的GUI更新,无需任何其他代码.

我打电话给这种方法 “Responsive” web app

我建议你阅读Josh David Miller撰写的这篇精彩文章:

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