Time Saving Tips for AngularJS Developer

Here are some of the tips while learning and coding on angularjs.

At a high / architecture level:

1. Do not forget to write your tests. In Javascript, you don't have the compiler to hand hold you and tell you that you did something wrong. And you will want to pull your hair out the next time your app is broken because of a missing letter. And the large your application gets, having the comfort of making large scale changes and refactorings without worrying about broken functionality is amazing. And writing your unit tests is the only way to get there.
2. Don't put too many things on the scope. The scope is expensive, as it is the one that undergoes dirty checks. Just put exactly what will be displayed on the UI on the scope, and leave the rest as variables in the controller, but not on the scope.
3. Data is the truth. Let the data drive the app, and not any other way. You should purely focus on getting the data in the right places. The route controlling logic, the watches and the data binding should drive what is visible in the UI.
4. If you need a UI widget like datepicker, autocomplete then think directive. Wrap all your third party components in directives for easy reuse, as well as to make your app modular. Being able to write <input datepicker> is way better than writing <input id="myinput"> and then in JS, $('#something').datepicker().
5. Don't do DOM manipulation in your controllers, as well as your services. Try to restrict that work to directives.
6. If you need to communicate between controllers, there are basically two options. Either create a service which is sigleton and use it to communicate or fire events on the scope, and have the other controller watch. Don't create your own new way outside of these two.
7. Dependency Injection: Understand it, love it, breathe and live it. That should be the one and only way you ask for and work with services or any dependencies from any of your code.
8. For directives, try and isolate the scopes so that you can reuse them without worries. Isolating the scope ensures that your directive does not depend on some particular method / variable on a parent scope, and thus can be reused. Pass in whatever you need as arguments to the directive. Use the databinding to ensure you get the updated value instead of the value at that instant.

How to fix Duplicate error with ng-repeat in angularjs

While working with angularjs directive ng-repeat, you may have encountered with the problem of duplicate error with ng-repeat. Here is the proper description and problem and the solution of it.
In order for angular to know exactly what items have changed, it calculates a hash for each item within the ng-repeat. Otherwise, if you had 5 items with the exact same contents, how would it be able to determine which of those items was modified? When it determines that duplicates exist, it prints out that error.

In this case, to get around this, there's a track by expression that you can add to the end of the ng-repeat expression. This expression lets you define a property that uniquely identifies each item in the array. For arrays with primitive types, one approach is to use track by $index which tracks each item in the array by the objects position within the array.

  
<div ng-repeat="num in [1, 2, 2, 3] track by $index">
 {{num}}
</div>
  
 

By adding the track by $index, you will not get the duplicate error.