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

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

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

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

Ответы

Ответ 1

Из моего представления "Responsive" web apps. означает тип приложения, которое обновляет представление относительно изменения модели (MVC).

Angular Пользовательский интерфейс приложения заполнен наблюдателями. Для каждой переменной, обернутой {{}} в 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 от factory и заполняем data с помощью вывода Geo. Наш графический интерфейс обновляется без дополнительного кода.

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

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

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

Ответ 2

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

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

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

Затем на вашем index.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>