Se si vuole utilizzare al meglio AngularJS occorre smettere di pensare in jQuery.
jQuery può essere utilizzata correttamente in Angular solo nel caso della manipolazione del DOM nelle direttive. jQuery principalmente opera in simbiosi con il DOM, mentre il design di Angular è radicalmente diverso.
In jQuery si parte da una selezione di un elemento del DOM su cui operare:
$( "#btn" ).click(function() {
// Codice
});
Ciò implica che il codice è legato a un elemento specifico del DOM. Se si modifica l'ID dell'elemento nel codice HTML, occorre anche aggiornare il codice jQuery. L'approccio di Angular è radicalmente diverso:
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<button type="button" ng-click="test()">Test</button>
</div>
<script type="text/javascript" src="angular.js"></script>
<script>
var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.test = function() {
// Codice
};
}]);
</script>
</body>
Noterete che il pulsante non ha l'ID btn: Angular non ne ha bisogno perché tutto il nostro codice è spostato nel controller. In questo modo anche modificando il codice HTML il risultato non cambierà.
Una volta compresa questa differenza sarà più semplice smettere di pensare in jQuery.