AngularJS has rapidly become one of the hottest new trends in development for creating powerful web or local applications on virtually any platform. While this extraordinary platform heralds itself as a MVW (Model-View-Whatever) framework - and is therefore suited for whatever your team or project requires - it can also be an overwhelmingly daunting foundation to build off of. To help alleviate any potential vertigo as you gaze down from the mountain of potential that is AngularJS, we've put together a handful of AngularJS best practices to keep your code clean and your mind (somewhat) sane.
Perhaps the best place to begin with any development project, but even more so with AngularJS, is in the creation of a properly structured project. The configuration of project files, directories, and components plants the seeds of the entire life cycle of the project. Components that are illogically structured will make for a miserable development experience as new components must be added or code must be altered.
The challenge is that the sheer scope of the code base for even the most rudimentary AngularJS project can be overwhelming, to say the least. Therefore, it's strongly recommended that you relieve yourself of a modicum of this burden by establishing and maintaining proper project architecture, particularly when your venture is just taking off.
A great place to start is to consider how the business logic of your project will be configured utilizing the primary building blocks of Angular. While some of these are designed specifically for Angular 2, they can be implemented within Angular 1 even, and generally represent the community-accepted method for structuring your project.
If you're at all experienced with modern JavaScript application development, you've undoubtedly heard of (if not used) Grunt. For those unfamiliar, Grunt is a task runner, which essentially means it is a tool that will automate a number of menial tasks you would otherwise need to perform yourself on a fairly regular basis. Not only does the automation provided by a task runner like Grunt reduce your workflow requirement as a developer, but it also eliminates many unintentional mistakes that may be made by human hands.
Grunt is capable of many, many types of tasks (inherently or custom-designed), but a few of the common uses include:
As with any programming language, AngularJS (and the JavaScript that effectively powers it) can be written in a variety of ways and styles, but "breaking the mold" of the established style guides used by the AngularJS community is never advisable.
Instead, wherever possible, it is highly recommended that you try to follow the popular best practice style guidelines laid out in this documentation. More specifically, if you're using the latest version of AngularJS (Angular 2), these guidelines are now actually part of the official AngularJS documentation.
Just as Grunt can be used to help you automate a number of menial tasks during AngularJS development, with the growing popularity of heavy focus on test-driven development (TDD), there's never been a better time to get in the habit of using a test runner tool to automate and speed up all your testing requirements.
Best of all, the AngularJS team has taken it upon themselves to develop and support an extremely powerful test runningtool known as Karma (previously named Testacular).
At the outside, it should be understood that Karma is not a test framework, meaning you will not directly write code in a specific format or syntax to then instruct Karma to perform a few tests. Instead, as a test runner, similar to the way Grunt is a task runner, Karma is used to automatically execute your entire test suite on real browsers and devices. The power of this simple differentiation from most testing that is not performed on actual browsers/devices cannot be overstated.
The Karma homepage includes a nice little introductory video on how Karma works, but the simple explanation is that once you've written a few tests in your favorite test framework (Jasmine is a popular and powerful choice), anytime you make a change to your codebase and save the file, Karma will recognize that change, immediately execute all your tests, and display the results in your terminal. This saves loads of time and headache during development, ensuring that you never have to remember to run tests after changes are made.
One final addition to our list of AngularJS best practices is to make heavy use of the work of others that have come before you, in the form of the numerous and often exceptionally powerful helper modules available to AngularJS.
Just as with libraries or plugins for other programming frameworks, modules in AngularJS are packaged code components that provide additional functionality out of the box. Modules can greatly speed up your own development and improve productivity by allowing you to focus on the core business logic of your code that is unique to the project at hand.
There are a number of sources where you can find helpful modules, but a few examples are ngmodules.org and AngularUI.AngularUI will be of particular interest to anyone with experience in (and fondness for) the jQuery framework and it's plethora of popular UI components.
Beyond that, the UI-Router module is a popular way to easily implement client-side routing, whereby the browser's displayed URL automatically updates based on the server-side routing (e.g. app/#/users, app/#/login, etc).
The Restangular module is another proven service that allows for simple implementation of a standard RESTful API through standard GET, POST, UPDATE, and DELETE requests.
For more help on your AngularJS app, check out Airbrake's AngularJS Error Handling tool.