1. Five Common Angular MistakesAngular is a powerful tool for managing the display of data.However, like any powerful tool there can be trouble if misused.Below well look at some common AngularJS mistakes. Theyvary in severity, but ultimately can conspire to make developingan AngularJS application more of a headache than it needs tobe. Well cover five of these common mistakes, and ways toavoid them.Mistake 1 Improper Event Handler UsageAngulars scope object is, according to the Angular docs, the glue betweenapplication controller and the view. To be more specific, the scope is intendedto hold all of the data needed for your views to present the page to theuser. The Angular scope is very flexible, allowing for a number of customfunctions to be written based upon the populated contents. This can be a veryseductive 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 functionalitybased on data displayed thus far (such as displaying a custom button basedupon user input). However, this violates one of the core principles of Angulardevelopment (and web development in general) keep your display and yourlogic as separated as possible. With Angular having a declarative focus, thistype of coding can become unwieldy very quickly.Mistake 2 Nested Scope BindingLike any other programming language, Angular comes with its own scopenesting rules. A nave implementation of inputs bound to a model, forexample, can lead to a general breakdown in the binding process. In essence,the problem comes down to making sure names are fully qualified. Lets sayyou 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 insubsequent scope contexts, these scope elements will actually be duplicated modifying the dollars element, for example, will result in no changes toany elements tied to the primitive. In essence, this means that primitives arepassed by value, while non-primitives (such as objects and arrays) are passedby 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 magicangular binding should work properly you just need to change referencesto the data to be of the style customerData.index.Mistake 3 Too-Complex ControllersOne of the common pitfalls of compressed development time lines andrushed coding jobs is code that tries to do too much within a given context.Developing a decent program architecture is a time-consuming endeavor, andis something that is often given short shrift once time becomes a preciousresource. Thus, it is common among these kinds of code bases to mix logiclayers, and have controllers perform too many tasks. For example, performingwww.backand.com 3. AJAX calls in controllers, when they truly belong in services, or having way toomany 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 justwork, it needs to be both well-written and maintainable as well. A clearseparation between functionality layers keeping DOM manipulation indirectives, ensuring the display layer focuses exclusively on data display, andso on helps to not only reduce bugs in the codebase, but to also ease futureextensions of the developed functionality.Mistake 4 Ignoring the Tools AvailableOne of the most frustrating things for nearly any person trying to helpan aspiring programmer is when they fail to make adequate use of thetools available. Chrome and Firefox, for example, include a full-featureddevelopment suite that covers profiling, debugging, and error output. Thisallows a developer to develop more iteratively in the browser, finding andtroubleshooting errors very quickly. A common example of this is the consolelog Angular errors are often printed on the console log, with more thanenough information to provide a start to the troubleshooting process. Thisis particularly an issue during the learning process, when finding your waythrough Angular code for the first time. It can be far too easy to rely uponasking questions and having someone give you answers. Thus, it should be abest practice to always check the console output before hunting for solutions a number of seemingly complex errors boil down to a simple error reportedin the browser.Mistake 5 Non-Idiomatic CodeAngular is developed with a declarative style of programming in mind. Itwas designed to serve as an extension of HTML, meaning that it wants topresent the data based on a concrete set of rules. In other words, once thedata is displayed the DOM should be changed as little as possible. Tryingto approach this type of programming from a jQuery perspective whereimperative programming is used to drive DOM changes in a proceduralapproach can quickly make your code a mess. While relying upon what youknow can be a quick draw for a programmer looking to get something up andrunning quickly, Angular becomes a lot easier to use when developed alongthe intended paths.www.backand.com 4. ConclusionThe above list of common issues with Angular development is not exhaustive far from it. However, the issues presented above are exceedingly commonamong neophyte Angular developers. Some are architectural in nature, and assuch not necessarily Angular-specific, but quirks like scope handling in Angularcan catch even seasoned developers off-guard. Keep the above in mind as youdevelop your code, and youll find yourself with a lot fewer headaches.www.backand.comContact InformationBackand Inc.info@backand.comwww.backand.com