It has only been a few months since I have started out with AngularJS but this JavaScript framework has caught my mind by storm. The unparalleled flexibility and features it delivers are top notch. So like every guy who takes a walk into the unexplored woods, I had road blocks, found shortcuts, discovered hidden treasures and I am still on the mission to explore more.
Well here are some excerpts from my travelogue. They are some of the problems that I had faced and how I found my way around.
1) Angular knows jQuery but jQuery doesn’t
Before AngularJS, it was jQuery which dominated the DOM manipulation tasks and it still does to an extent. AngularJS knows how to call a jQuery method from its functions. But jQuery cannot call an Angular method directly upon will. To understand what I mean take a look at this piece of code:
$scope.clearFields = function(){ $(“#emp_name”).value = “”; }
Yeah, this would execute perfectly but what about the next one:
$(“#reset_button” ).on( “click”, function() { $scope.clearFields(); });
Nah, it won’t. Because jQuery doesn’t know which scope this programmer is referring to! So the solution? Tell jQuery about the scope, problem solved!
You can do it like this:
angular.element(document.getElementById(‘ emp_name ‘)).scope().clearFields();
In the function it would be like:
$(“#reset_button” ).on( “click”, function() { angular.element(document.getElementById(‘ emp_name ‘)).scope().clearFields(); });
The element can be anything that has a unique id and belongs to the scope in question.
2) Normal object copy passes only the reference
Using the equals operator to copy an Angular object won’t do any good. You would notice that editing the new object changes the old object’s values too:
$scope.edit_emp_details = $scope.emp_details[i]; // Not fine
Here “angular.copy” is your friend. Use it like this:
$scope.edit_emp_details = angular.copy($scope.emp_details[i]);
3) Prevent usage of $scope prefixes for variables/functions if they are used locally
The usage of $scope is to create a link between the view and the controller (HTML page script and Controller script). Hence if you want to call a local function which is not required to be known outside the scope, just make it a normal JS function
$scope.createUser = function(){ var user = {}; user.id = $scope.generateUniqueId(); // Is discouraged user.id = generateUniqueId(); // Is fine }
4) Please don’t confuse ng-repeat with duplicates
While using ng-repeat for displaying a list or a table, someone might end up with such an error in the console like:
Error: [ngRepeat:dupes]
AngularJS doesn’t know how to distinguish between similar data when it populates it on a list. So to help Angular overcome this dilemma, use this simple keyword “track by $index” with the ng-repeat attribute values.
<tr ng-repeat=”employee in employees track by $index” />
This usage distinguishes all the entries by using an index value generated by Angular itself and hence would be unique always.
