The document discusses five common mistakes made when developing applications with Angular: 1) Improper event handler usage that violates separation of display and logic; 2) Nested scope binding issues caused by how Angular handles primitive objects; 3) Controllers that are too complex and perform tasks that belong in services; 4) Failure to use available debugging tools like browser consoles; 5) Writing non-idiomatic code that does not follow Angular's intended declarative style. Avoiding these mistakes can help reduce bugs and make Angular applications easier to develop and maintain.

1. Five Common Angular Mistakes
Angular is a powerful tool for managing the display of data.
However, like any powerful tool there can be trouble if misused.
Below we’ll look at some common AngularJS mistakes. They
vary in severity, but ultimately can conspire to make developing
an AngularJS application more of a headache than it needs to
be. We’ll cover five of these common mistakes, and ways to
avoid them.
Mistake 1 – Improper Event Handler Usage
Angular’s scope object is, according to the Angular docs, the “glue between
application controller and the view.” To be more specific, the scope is intended
to hold all of the data needed for your views to present the page to the
user. The Angular scope is very flexible, allowing for a number of custom
functions to be written based upon the populated contents. This can be a very
seductive tool for coders coming from a more imperative-style background.
The temptation to add code like:
www.backand.com

2. can be great, particularly when it just makes sense to add functionality
based on data displayed thus far (such as displaying a custom button based
upon user input). However, this violates one of the core principles of Angular
development (and web development in general) – keep your display and your
logic as separated as possible. With Angular having a declarative focus, this
type of coding can become unwieldy very quickly.
Mistake 2 – Nested Scope Binding
Like any other programming language, Angular comes with its own scope
nesting rules. A naïve implementation of inputs bound to a model, for
example, can lead to a general breakdown in the binding process. In essence,
the problem comes down to making sure names are fully qualified. Let’s say
you have a controller defined as follows:
Any subsequent access to the index element will result in local changes only.
This is largely due to how scopes handle Javascript primitive objects – in
subsequent scope contexts, these scope elements will actually be duplicated
– modifying the “dollars” element, for example, will result in no changes to
any elements tied to the primitive. In essence, this means that primitives are
passed by value, while non-primitives (such as objects and arrays) are passed
by reference. To fix this, simply structure your scope objects as, well, objects:
Due to the modification to store index in a non-primitive type, all “magic”
angular binding should work properly – you just need to change references
to the data to be of the style “customerData.index”.
Mistake 3 – Too-Complex Controllers
One of the common pitfalls of compressed development time lines and
rushed coding jobs is code that tries to do too much within a given context.
Developing a decent program architecture is a time-consuming endeavor, and
is something that is often given short shrift once time becomes a precious
resource. Thus, it is common among these kinds of code bases to mix logic
layers, and have controllers perform too many tasks. For example, performing
www.backand.com

3. AJAX calls in controllers, when they truly belong in services, or having way too
many event handlers than are needed to accomplish the task at hand.
The best way to avoid this is to stick to your guns in design and development.
Make your project stakeholders understand that good code must not just
work, it needs to be both well-written and maintainable as well. A clear
separation between functionality layers – keeping DOM manipulation in
directives, ensuring the display layer focuses exclusively on data display, and
so on – helps to not only reduce bugs in the codebase, but to also ease future
extensions of the developed functionality.
Mistake 4 – Ignoring the Tools Available
One of the most frustrating things for nearly any person trying to help
an aspiring programmer is when they fail to make adequate use of the
tools available. Chrome and Firefox, for example, include a full-featured
development suite that covers profiling, debugging, and error output. This
allows a developer to develop more iteratively in the browser, finding and
troubleshooting errors very quickly. A common example of this is the console
log – Angular errors are often printed on the console log, with more than
enough information to provide a start to the troubleshooting process. This
is particularly an issue during the learning process, when finding your way
through Angular code for the first time. It can be far too easy to rely upon
asking questions and having someone give you answers. Thus, it should be a
best practice to always check the console output before hunting for solutions
– a number of seemingly complex errors boil down to a simple error reported
in the browser.
Mistake 5 – Non-Idiomatic Code
Angular is developed with a declarative style of programming in mind. It
was designed to serve as an extension of HTML, meaning that it wants to
present the data based on a concrete set of rules. In other words, once the
data is displayed the DOM should be changed as little as possible. Trying
to approach this type of programming from a jQuery perspective – where
imperative programming is used to drive DOM changes in a procedural
approach – can quickly make your code a mess. While relying upon what you
know can be a quick draw for a programmer looking to get something up and
running quickly, Angular becomes a lot easier to use when developed along
the intended paths.
www.backand.com

4. Conclusion
The above list of common issues with Angular development is not exhaustive
– far from it. However, the issues presented above are exceedingly common
among neophyte Angular developers. Some are architectural in nature, and as
such not necessarily Angular-specific, but quirks like scope handling in Angular
can catch even seasoned developers off-guard. Keep the above in mind as you
develop your code, and you’ll find yourself with a lot fewer headaches.
www.backand.com
Contact Information
Backand Inc.
info@backand.com
www.backand.com