Tips and Tricks For Using AngularJS in your web development projects


Welcome to another article in our series about JavaScript. So far, we’ve talked about Meteor and Node.js, two important topics in JavaScript. Node.js, if you’ll recall, is a runtime environment that supports back-end server-side development using JavaScript. Meteor, meanwhile, is a JavaScript framework that’s useful for cross-browser and cross-platform development. Today, we’re going to talk about another development framework: Angular.js. Commonly referred to just as Angular.

Angular.js is a development framework that’s maintained by Google as well as its community of volunteers. Like Meteor, AngularJS has experienced a lot of popularity in recent years, and it’s been adopted by the websites used by corporations like NBC, Walgreens, Intel, Sprint, ABC News, and around 8,400 other sites.

AngularJS is built around the thought that declarative programming, which expresses the logic of a computational function without describing its control flow, is good for user interfaces and that imperative programming, which does allow influence to its control flow, is best used in an application that needs to define its business logic. In this article, we’re going to cover some tips for using AngularJS as well as some common mistakes that users make and that you can avoid.

Tips for Angular.js applicationsTips for Angular.js applications

Although AngularJS is pretty easy to learn and work with, it has an extensive codebase that can be a little intimidating to even the most experienced scripters. The following are some tips that can help you use AngularJS to its greatest potential.

1) Properly organize code
As the very old saying goes, the early bird gets the worm. In this case, that means organizing your code as you develop it, instead of waiting for it to be a mess that you’ll look back on and wish you’d structured better. Although this can really be done to your own preference, here’s an example of what it might look like: keep your own Angular.js code n the ‘app’ folder. Keep shared assets that you’ve used from other people in the ‘app/common’ folder. Place app features into a folder labeled ‘features.’ Finally, but third-party JavaScript that you’ve used into the ‘scripts’ folder.

2) Install SideWaffle extension
If you’re thinking about using the Visual Studio property for Angular, you’ll also want to consider using the SideWaffle extension. SideWaffle lets you customize your patterns used in directives, factories, and services. SideWaffle is free to download and install, and can be found here:

3) Utilize the Angular UI router
Unfortunately, the provided routing mechanism that’s provided with Angular isn’t the greatest thing out there. A lot of people are of the opinion that trying to use it for anything more than a basic website is a waste of time. Fortunately, some developers made the AngularUI router, which is much more powerful.

4) Use directives to manipulate the DOM
This one can trip some people up, especially if they come from a jQuery background. The temptation is to use a jQuery service to manipulate the DOM. However, when you’re using Angular, that’s not a good idea. Instead, you should use the Angular.js directives for all the manipulating you’ll need to do.

5) Use Less and compile it into CSS
Less is a CSS pre-processor. It extends the language of CSS, which allows it to add features, such as mixins, functions, and many more. A lot of people suggest using Less when programming with Angular. It can simplify a lot of things and make Bootstrap tables much more responsive and easy to organize.

6) Angular service for shared code
There’s a mode of thinking that every programmer gets into, especially when they’ve become familiar with a new language. It’s the kind of thinking where you start saying, “I don’t need anyone else’s code – I’ve mastered this language and now I want to prove it.” While it’s always good to stretch your abilities and prove your skills, it’s also important to know when you can rely on the work that other people have done already. Especially in the Angular controller, the temptation exists to do too much work yourself. However, there are a lot of resources available out there for shared code that you can use freely to speed up your process.

7) Broadcast when $HTTP calls begin or end
This is another topic relating to the best practices of documentation. It’s really important to know when your code is broadcasting a $http call and when those calls have completed. Taking the necessary documentation steps to be able to see that as it happens is pretty important for your sanity in the long run.

8) Combine JavaScript files
I hope I’ve hit home that documentation is as important the code that you write, but I’ll say it again in another recommendation. Streamlining your code is very important, and one way that you can do it is to combine your JavaScript files. Since they share a similar origin, they’ll fit well together, and there’s a lot you can do to collapse overlapping code.

9) Put HTML into template cache
AngularJS provides a $templateCache that you can use to store your HTML. This has the benefits that your HTML pages are cached, they can be accessed by a key instead of a URL, and your directives won’t need an inline reference for them to work in testing.

10) Active tab highlighting
A simple thing that you can do with Angular is to set up active tab highlighting for your web project. It’s pretty simple to work through and it provides a very clean view.

11) Abstracting business
Rather than a coding tip, this is more of an architectural suggestion. Something that it’s pretty easy to do is to abstract your business into a format where data provides the logic for services. This means that the controller can become something that sort of glues the entire project together and that has a big impact on the DOM.

12) Switching from view to view and retaining state
The final tip we’re going to present here is that you can switch between views while retaining the state that you’ve previously established. This can be done with some simple scripting, and it’s a nice thing to do in order to preserve a type of look for a project.

13) Common mistakes to avoidCommon mistakes to avoid

In addition to these tips, there are a few common mistakes you should try to avoid when you’re using Angular. First, don’t try to access the scope through the DOM. Like we mentioned before, it’s better to use the provided controllers for the DOM, and messing around with it doesn’t usually work well. Next, not using controllerAs Syntax – it’s really the most efficient thing you’ll have access to, and ignoring it won’t work out well. Next, not using named views with the UI-Router for power is another mistake. This goes back to what we were talking about before with not using jQuery resources to control the router. It’s better to use the boxed materials. Finally, overusing resolves is a pretty common mistake. They add extra time to loading a view, and putting in too many of them can really slow down your project.

Hopefully, this article has given you a good idea of how some of the finer points of Angular.js work and how you can best put them to use for your project!


Please enter your comment!
Please enter your name here