Question

我正在观看angularjs.org发布的免费互动课程，以学习Angular，Shaping up with Angular js。

在他们说的第一章的这个课程中，使用AngularJS的一个主要原因是，它可以构建“响应式”Web应用程序。（我知道＆＃34;响应式设计＆＃34;但这完全是一个不同的东西），并解释说，使用Angular你不需要刷新你的网页来更新它与数据获取来自网络服务器（他们告诉你这个，就像这是全新的技术！）。

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

请帮助我理解这个因为我是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;

我们点击按钮，我们从工厂获取地理数据，并使用地理输出填充data。我们的GUI更新，无需任何其他代码。

这种方法我会称之为“Responsive” web app

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

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

AngularJS“响应”呼叫与良好的旧AJAX呼叫有何不同？

1 个答案: