AngularJS 单页应用中的数据通信方式详解

在 AngularJS 单页应用中，数据通信是一项至关重要的任务。正确地实现数据传输可以让你的应用获得更好的响应速度和用户体验。本文将详细介绍 AngularJS 单页应用中的数据通信方式并提供示例代码。

$http 服务

在 AngularJS 中，最常见的数据通信方式是使用内置的 $http 服务。$http 服务可以发送 HTTP 请求并返回响应，可以用于获取服务器端数据，保存数据，更新数据等。

发送 HTTP 请求

使用 $http.get 发送 GET 请求：

$http.get('/api/data')
  .then(function(response) {
    console.log(response.data);
  });

使用 $http.post 发送 POST 请求：

$http.post('/api/data', {data: 'some data'})
  .then(function(response) {
    console.log(response.data);
  });

使用 $http.put 发送 PUT 请求：

$http.put('/api/data', {data: 'updated data'})
  .then(function(response) {
    console.log(response.data);
  });

使用 $http.delete 发送 DELETE 请求：

$http.delete('/api/data/1')
  .then(function(response) {
    console.log(response.data);
  });

配置请求头

在发送请求时，你可以设置请求头。比如在发送 POST 请求时，将 Content-Type 设置为 application/json：

$http.post('/api/data', {data: 'some data'}, {
  headers: {'Content-Type': 'application/json'}
})
  .then(function(response) {
    console.log(response.data);
  });

处理响应

处理响应时，你可以使用 .then 方法，它接收两个函数参数：成功回调函数和错误回调函数。

$http.get('/api/data')
  .then(function(response) {
    console.log(response.status); // 状态码
    console.log(response.data); // 数据
  }, function(error) {
    console.log(error.status); // 状态码
    console.log(error.data); // 错误信息
  });

并发请求

当你需要同时发送多个请求时，你可以使用 $q.all 方法。下面的示例演示了如何同时获取两个数据源，并将它们合并进行处理：

$q.all([
  $http.get('/api/source1'),
  $http.get('/api/source2')
])
  .then(function(results) {
    var mergedData = [].concat.apply([], results);
    console.log(mergedData);
  });

$resource 服务

$resource 是 AngularJS 内置的 RESTful 路由器，可以实现对 RESTful API 的操作。

定义资源

使用 $resource 方法定义一个资源：

angular.module('app', ['ngResource'])
  .factory('Data', function($resource) {
    return $resource('/api/data/:id', {id: '@id'});
  });

在上面的代码中，定义了一种名为 Data 的资源。该资源可以通过 /api/data/:id 进行访问，其中 :id 是可变的参数。后面的对象表示可选的资源参数。

使用资源

通过 Data.get() 方法获取单个数据：

Data.get({id: 1}, function(response) {
  console.log(response);
});

通过 Data.query() 方法获取多个数据：

Data.query(function(response) {
  console.log(response);
});

通过 Data.save() 方法保存数据：

Data.save({name: 'new data'}, function(response) {
  console.log(response);
});

通过 Data.delete() 方法删除数据：

Data.delete({id: 1}, function(response) {
  console.log(response);
});

配置请求头

通过设置请求头，你可以指定请求体的格式。

// javascriptcn.com 代码示例
angular.module('app', ['ngResource'])
  .factory('Data', function($resource) {
    return $resource('/api/data/:id', {id: '@id'}, {
      create: {
        method: 'POST',
        headers: {'Content-Type': 'application/json'}
      },
      save: {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'}
      }
    });
  });

$emit 和 $broadcast

在 AngularJS 中，有两个用于事件处理的方法：$emit 和 $broadcast。它们都可以用于实现父子组件之间的数据通信。

$emit

使用 $emit 方法向上通知事件。例如，一个控制器需要通知它的父控制器一个事件已发生。

// javascriptcn.com 代码示例
angular.module('app')
  .controller('ChildCtrl', function($scope) {
    $scope.emitEvent = function() {
      $scope.$emit('eventName', {data: 'event data'});
    };
  })
  .controller('ParentCtrl', function($scope) {
    $scope.$on('eventName', function(event, args) {
      console.log(args.data);
    });
  });

在上述代码中，当 emitEvent 方法被调用时，它会向上通知 ParentCtrl 控制器，告知它事件已发生。在 ParentCtrl 中，事件被监听，并执行相应的操作。

$broadcast

与 $emit 方法相反，$broadcast 方法是向下通知事件。例如，一个父控制器将数据传递给它的子控制器。

// javascriptcn.com 代码示例
angular.module('app')
  .controller('ParentCtrl', function($scope) {
    $scope.$broadcast('eventName', {data: 'event data'});
  })
  .controller('ChildCtrl', function($scope) {
    $scope.$on('eventName', function(event, args) {
      console.log(args.data);
    });
  });

在上述代码中，当 ParentCtrl 控制器执行时，它会将数据传递给它的子控制器 ChildCtrl。在 ChildCtrl 中，事件被监听，并执行相应的操作。

总结

在本文中，我们详细介绍了 AngularJS 单页应用中的数据通信方式。你可以使用 $http 和 $resource 服务实现 RESTful API 的操作，使用 $emit 和 $broadcast 方法实现父子组件之间的数据通信。

正确选择并使用这些工具可以大大提高你的应用的响应速度和用户体验。

希望本文能够为你提供有用的指导意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6c5cef6b2d6eab3f4f3dc