Copie en Angular

Rana Hasnain Khan 15 février 2024

Angular Angular Copy

Nous allons montrer quand et comment utiliser le angular.copy en angular.

`angular.copy` dans Angular

angular.copy est une méthode puissante pour conserver la valeur d’un objet que nous voulons copier dans une autre variable.

Lorsque nous utilisons angular.copy, modifier la valeur de la propriété ou ajouter une nouvelle propriété mettra à jour tous les objets référençant le même objet. angular.copy n’est pas destiné à être une fonction de copie polyvalente.

Il a aussi quelques limites. Si aucune destination n’est fournie à angular.copy, une copie de l’objet ou un tableau sera créé.

Si nous fournissons la destination, tous ses éléments pour le tableau et les propriétés des objets seront supprimés, et tous les éléments/propriétés de la source y seront copiés. Si la source fournie n’est pas un objet ou un tableau incluant null et undefined, la source sera retournée.

Si la source fournie est identique à la destination fournie, une exception sera levée. Certains types d’objets qui ne sont pas gérés correctement par angular.copy comme File, Map, ImageData, MediaStream, Set, WeakMap, getter et setter.

angular.copy duplique profondément la variable. Une copie complète d’une variable est celle qui ne partage pas la même adresse mémoire que la variable d’origine.

Par exemple, créons un formulaire qui prendra les entrées des utilisateurs et utilisera angular.copy. Notre code HTML sera comme ci-dessous.

# angular
<body ng-app="NgCopy">
  <div ng-controller="NgController">
  <form novalidate class="simple-form">
    <label>Name: <input type="text" ng-model="user.name" /></label><br />
    <button ng-click="ngreset()">RESET</button>
    <button ng-click="ngupdate(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>member = {{member | json}}</pre>
</div>
</body>

Et notre code dans script.js ressemblera à ci-dessous.

# angular
(function(angular) {
  'use strict';
angular.
  module('NgCopy', []).
  controller('NgController', ['$scope', function($scope) {
    $scope.member = {};

    $scope.ngreset = function() {
      $scope.user = angular.copy($scope.member);
    };

    $scope.ngupdate = function(user) {
      angular.copy(user, $scope.member);
    };

    $scope.ngreset();
  }]);
})(window.angular);

Comme on le voit dans l’exemple ci-dessus, nous avons utilisé angular.copy deux fois. Dans $scope.user = angular.copy($scope.member); nous l’avons utilisé avec un seul paramètre, et dans angular.copy(user, $scope.member); nous avons utilisé angular.copy avec deux paramètres.

Production :

angular copy result

Auteur: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

angular.copy dans Angular

`angular.copy` dans Angular