# Complex Controllers
It is one of the most common mistakes with rushed coding jobs. Complex controllers try to do too many things within a given context. Many developers end up mixing logic layers to perform too many tasks. You can easily avoid this pitfall by sticking to the basics in design and development. Coding doesn’t need to simply work but need to be maintainable and well-written. Separate the functionality layers by keeping DOM manipulation in directives. This ensures that display layers would solely focus on data display and you won’t end up with bugs.
# Not Using Tools Available
Aspiring programmers often make the mistake of not using the tools available to them adequately. There are a number of tools for Chrome and Firefox that let you profile, debug and also generate the error output. These allow you to develop the app iteratively in the browser that lets you find errors easily and troubleshoot them. Your console log is a common example of this where the Angular errors are often printed. To avoid this you need to always check the console before you start hunting for solutions.
# Getting The MVC Framework Wrong
AngularJS can be termed as a MVC framework and but the models aren’t clearly defined such as in the case of backbone.js, though the architectural pattern would still fit well. So a common practice is to files together based as the example below –
While this can seem obvious if you have a Rails background but as your app begins to scale, this layout starts giving problems and would cause folders to be open at once. Irrespective of the tools you use, a lot of time is spent scrolling through the directory. The way out is to group the files based on their features instead of their type as in the example below –
# Ignoring Batarang
It is one of the best Chrome extensions that helps debug AngularJS apps and often ignored by developers. Batarang brings to you model browsing that lets you look inside the AngularJS app and determine models bound to scopes. This is very useful when you are working with directives and can be used to isolate scopes and locate where the values are bound. It also offers you a dependency graph and helps in determining services that deserve your urgent attention.
# Testing Manually
Test Driven Development or TDD may not be everyone’s forte. But every time you check to see if the codes are fine and work, you are manually testing the app. This can easily be termed as wastage of time and effort. You need to understand the fact that AngularJS has been designed to be testable from the ground up. The Dependency Injection and the ngMock module take testing to the new level and do away with the concept of manual testing.