2014-10-15 16 views
15

Tôi đã xem một khóa học tương tác miễn phí được xuất bản tại angularjs.org để tìm hiểu Góc, Shaping up with Angular js.Whats khác nhau giữa AngularJS "Đáp ứng" cuộc gọi so với các cuộc gọi AJAX cũ tốt?

Trên khóa học này ở chương đầu tiên họ nói, một trong những lý do chính để sử dụng AngularJS là, nó có thể xây dựng ứng dụng web “Responsive”. (Tôi biết về "Thiết kế đáp ứng" nhưng đó hoàn toàn là một điều khác), và giải thích nó nói rằng, với Angular bạn không cần phải làm mới trang web của bạn để cập nhật nó với dữ liệu nhận được từ máy chủ web (Họ cho bạn biết điều này , như thế này là công nghệ mới!).

Tôi nghĩ rằng đó không phải là điều tương tự chúng tôi đã làm trong 10 năm qua khi sử dụng Ajax? Hay cái gì đó hoàn toàn khác?

Hãy giúp tôi hiểu coz này Tôi mới sử dụng AngularJS.

+3

Âm thanh như các nhà văn của khóa học chỉ là nhầm lẫn với thuật ngữ thông dụng. Responsive chỉ được sử dụng để mô tả thiết kế đáp ứng theo như tôi biết. Nó khác với Ajax. – Quentin

+2

Vâng, đây là điều tương tự chúng tôi đã làm trong 10 năm qua bằng cách sử dụng Ajax. – Clive

+1

Tôi cho rằng người ta có thể mô tả việc sử dụng AJAX là "đáp ứng" khi được sử dụng hiệu quả từ góc độ UX theo nghĩa, khi gọi một thao tác, người dùng không cần phải ngồi và đợi trang tải lại trước người dùng có thể làm bất cứ điều gì khác. Ngay cả khi thao tác diễn ra trong vài phút, phần còn lại của giao diện người dùng vẫn có thể "phản hồi" với các tương tác khác. Nhưng có, vẫn còn cũ AJAX chỉ gói trong một giao diện khung. Và tôi đồng ý rằng đó là việc sử dụng thuật ngữ có khả năng gây hiểu nhầm. – David

Trả lời

5

Từ chế độ xem của tôi “Responsive” web apps. là loại ứng dụng cập nhật Xem liên quan đến thay đổi mô hình (MVC).

Giao diện người dùng ứng dụng góc có đầy đủ người theo dõi. Đối với mỗi biến được bao bọc bởi {{}} trong HTML, Angular tạo trình xem mới và khi chúng tôi cập nhật trong khi mã chạy giá trị này, Angular, bằng cách sử dụng lượt xem cập nhật digest cycle tương ứng. Hoặc ng-repeat chỉ thị tạo phạm vi riêng cho mỗi mục danh sách và thêm người theo dõi.

Mặt khác trong Javascript thuần túy, tôi cần tìm phần tử của mình theo id và cập nhật nó theo cách thủ công.

xem xét sau đây ví dụ trong 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; 
}]); 

Mở đầu chúng tôi có sản phẩm nào data: $scope.data = false;

Chúng tôi nhấp vào nút, chúng tôi lấy dữ liệu địa lý từ nhà máy và điền data với đầu ra Geo. GUI của chúng tôi cập nhật mà không cần bất kỳ mã bổ sung nào.

Cách tiếp cận này tôi sẽ gọi “Responsive” web app


Tôi đề nghị bạn đọc bài tuyệt vời này được viết bởi Josh David Miller:

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

+0

Đồng ý, nhưng một lần nữa các cuộc gọi ajax, được bao bọc trong một khung Javascript (AngularJS), cho phép nhà phát triển xây dựng các ứng dụng web của họ một cách dễ dàng, nhanh chóng và có tổ chức, phải không? – Thanu

0

Cả hai góc và AJAX làm, gần như cùng một điều, nhưng khi nói đến tốt nhất, AGULAR chỉ là bữa ăn tối tuyệt vời .... nó làm cho phát triển dễ dàng hơn và nhanh hơn. Góc có thứ gọi là $stateproviders, $locationProviders$urlRouterProvider.

Hãy thử điều này sau khi tải mã nguồn góc của bạn.

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

Sau đó, trên chỉ mục của bạn.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> 

Các vấn đề liên quan