Five Common Angular Mistakes
0 likes567 views
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.
Five Common Angular Mistakes
- 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. [email protected] www.backand.com