Mistakes That AngularJS Developers Could Make

mistakes angularjs developers make
Image Source - https://twitter.com/gopinath_va

AngularJS stands among the top JavaScript frameworks today. It has simplified the development process making it an optimal framework for prototyping small apps. The fact that it also allows scaling to full featured client side apps is what makes it so popular in the market. Though it is relatively easy to apply, developers often end up making some common mistakes. If you are an AngularJS developer here are some mistakes you must avoid.

# 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.

 

mistakes angularjs developers make
mistakes angularjs developers make

 

# 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 –

 

templates/

_login.html

_feed.html

app/

app.js

controllers/

LoginController.js

FeedController.js

directives/

FeedEntryDirective.js

services/

LoginService.js

FeedService.js

filters/

CapatalizeFilter.js

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 –

app/

app.js

Feed/

_feed.html

FeedController.js

FeedEntryDirective.js

FeedService.js

Login/

_login.html

LoginController.js

LoginService.js

Shared/

CapatalizeFilter.js

# 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.

About the Author

Mantra is a Business Consultant & strategic thought leader bridging the divide between technology and client satisfaction. With 12 years of knowledge, innovation and hands-on experience in providing consultations to Startups, ISVs & Agencies who need dedicated development & technology partners. He has also lead to the delivery of countless successful projects.
Blogging is his passion & he shares his expertise here through ValueCoders.. Follow him on Twitter & LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.