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.

Regular Expressions in JavaScript with Examples

Example 1 : To return all the matched strings
var a = "This is regular expression example.";
var regex = /regular/g; // to find string regular
var matches = a.match(regex);


Example 2:  To return all matched numbers
var a = "This is 1 apple, this is 2 apple";
var regex = /\d+/g;
var matches = a.match(regex);

Example 3:  To return number of spaces in the sentence
var a = "How many spaces are there in this sentence?";
var regex = /\s+/g;
var matches = a.match(regex).length;

How to Generate Random Number within the range

This example shows how to generate random number from the range of number given.

function generateRandomNumber(minNum, maxNum) {
        return Math.floor(Math.random() * (maxNum- minNum+ 1)) + minNum;
}
generateRandomNumber(5, 15);

Above code will generate random number between 5 and 15.

Cool JavaScript Tricks

Today I would like to mention some of the JavaScript tricks that many JavaScript programmers do not know. They are cool to have in our code, but some are not practiced in real world. Here are few of them.

1. Use of .call() function:
   If you want to iterate over the properties of object.
   

   var listitems = document.querySelectorAll('li'); 
   [].forEach.call(items, function(item) {
   //your code here
   })
   

   Above code does the same as the code below

   for (i = 0; i < items.length; i++) {
   var item= items[i];
   // your code here
   }

   Reversing a string:
   

   var js = 'hello javascript';
   var sj = [].reverse.call(hey.split('')).join(''); // "tpircsavaj olleh"
   console.log(sj);

2. Always use var while declaring variable for the first time.
3. Use === instead of == .
4. undefined, null, 0, false, "", NaN are all false values.
5. Use semicolon (;) for line termination.
6. Get random item in an array.

   var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
   var random = items[Math.floor(Math.random() * items.length)];
   

7. Verify that the given argument is number

   function isNumber(n){
       return !isNaN(parseFloat(n)) && isFinite(n);
   }

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.