With great strength comes a big responsibility - the safety technique in AngularJS

Undoubtedly, Angulyar gives you strength. But she needs to use it wisely. I tried to formulate three simple rules that I violated many times and suffered from this.

1. Make a copy of the object if it can undergo unwanted changes.

In Angular, the default data is the same, and if you change it intentionally, accidentally or as a result of an error, all places of its use will be at risk. For example, we have a factory of empty entities that will be used to fill out forms.

module.factory("emptyEntity", function() { var emptyObject = { name:"", surname:"", address:{ city:"" street:"", } }; return { createEmptyEntity: function(){ return emptyObject; } }; }); 

And further, in the form controller, we create this empty object in $ scope and use it as a form model.

  $scope.model = mapper.createEmptyPetition(); 

What happens if this model changes when you enter a form, and then call mapper.createEmptyPetition () again for another form? So, as the same emptyObject object is used everywhere, the changes will be reflected in it, and the next time we call mapper.createEmptyPetition (), we get the dirty and used object. There may be a great deal of similar moments during development, and you need to be careful about distributing references to objects to the right and left. In this case, it should be done like this - return a copy of the object so that its changes do not concern the original object:

  createEmptyEntity: function(){ return angular.copy(emptyObject); } 

2. Do not lose the object / array reference if you do not want to lose data synchronization.

A simple example.
We have a controller, in the $ scope of which the array lies, and there is a function for cleaning the array:

 module.controller("NewPetitionController", ["$scope", function($scope) { $scope.myArray = [1,2,3,4]; $scope.cleanArray = function(){ $scope.myArray = []; } } ]); 

And somewhere in the view, you give the array to some directive, for example, which will draw it.

 <div my-array-viewer array="myArray"></div> 

What happens if you call the cleanArray function? The directive will quietly continue to display the good old full array, because it has a link to it. And with the code "$ scope.myArray = []" we just created a new array and wrote a reference to it in the myArray property, to which the my-array-viewer directive is absolutely parallel. To null an array without losing a link to it, you just need to call $ scope.myArray.length = 0;
The same applies to objects. It is impossible to simply take and assign a new object to a variable; you need to change the old one so that the remaining parts of the application, which have a reference to this object, do not lose it.

 module.controller("NewPetitionController", ["$scope", function($scope) { $scope.myObj = {foo: "bar"}; $scope.setObj = function(newObj){ //$scope.myObj = newObj; //  ,      angular.extend($scope.myObj, newObj); //  ,     } } ]); 

3. Be careful with the child $ scope

Many directives such as ng-if, ng-include create a child $ scope. What does it mean? These directives will create a new instance of $ scope, in the prototype property of which there will be a parent scop - standard javascript inheritance. From this it follows that changing simple properties (string, number, boolean, etc.) in a child will NOT affect the parent, since simple properties are copied during inheritance. In contrast, objects with prototype inheritance are transmitted by links, so the change in the properties of objects will be displayed in the parent scopes.
Therefore, you should not do this, it will not work:

 <div ng-if="true"> <a ng-click="showSecondBlock = true">  </a> </div> <div ng-if="showSecondBlock">   ! </div> 

Instead, you need to have for such cases a special object in $ scope, let's call it viewModel

 app.controller("MainCtrl", function($scope) { $scope.viewModel = {}; }); 

 <div ng-if="true"> <a ng-click="viewModel.showSecondBlock = true">  </a> </div> <div ng-if="viewModel.showSecondBlock">   ! </div> 

Write in the comments, what other features of the angular way you had to fill the cones.