PsiberTech Solutions: AngularJS : 5 Guaranteed mistakes you do & how to avoid it

AngularJS is one of the most popular JavaScript frameworks available today. The developer’s friend is 100% JavaScript, 100% client-side and compatible with both desktop and mobile browsers. Its goal is to simplify development, so it's great for prototyping small apps. However its power allows scaling to full featured client side applications too. With great power comes the greater chances of making mistakes, this post takes a look at some of the common mistakes or pitfalls when using AngularJS which are consolidated for you to peruse. Here we go in no particular order.

1. MVC: Directory structure

Essentially AngularJS is MVC framework. The obvious practice while using MVC framework is to group files based on file type. However while scaling the apps, the layout causes many folders to be open at once, causing a lot of time spent scrolling through the directory tree.

Solution: Instead of keeping the files grouped by type, group files based on features.

2. Do it AngularJS way

While learning directives it’s tempting and easy to just write jQuery code wrapped in Angular directive. While this is better than working with no framework, this isn’t the AngularJS way.

AngularJS built-in directives, services $window, $timeout, $http are wrapped for you so you don’t have to accidently interfere with AngularJS.

Solution: Don’t wrap jQuery code in a directive, only reach for custom solutions when you really have to.

3. Global Dependencies

One of the main issue in testing arises out of dependency injection module. Often when writing AngularJS apps, there will be a dependency on an object that binds itself to the global scope. This means it’s available in any AngularJS code, causing the issues in testing.

Solution: AngularJS makes it simple to encapsulate these global into modules so they can be injected like standard AngularJS modules.Underscore.js is a great library for simplifying JavaScript code in a functional pattern, and it can be turned into a module

4. External callbacks and $scope.$apply()

At times programmers have to integrate with jQuery or need to handle events out of AngularJS scope using callbacks. Understanding $scope.$apply become essential as model changes outside of AngularJS context are not tracked by the AngularJS model binding infrastructure.

Solution: $scope.model='someData'; //scope updates have to be done inside the $apply callback. scope.$apply() causes a digest cycle to be executed and hence call to it should be minimized. Number of JavaScript constructs such as setTimeout, setInterval are available as AngularJS services

5. Not seeing the browser console log for errors

This is not just limited to AngularJS. Number of issues can be resolved just by looking at the error details in browser console log and taking corrective actions.

This is not a comprehensive list but can help you get started on where to look when you are breaking your head with AngularJS. For further reading please head to Thenittygritty and AngularJS Style guide.

You might also be interested to look at these posts, Angular.js vs Ember.js : The perfect fit for Javascript Framework & AngularJS & IE Family : Deal with it .If you like to know more details about the AngularJS apps we do, head to App development model . Thanks for stopping by and Have a great day!