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.
Cultivate a Tidy Project Architecture
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.
- Modules: At the basic level, Angular modules are simply classes that use the @NgModule decorator and allow you to disperse your application into logical blocks of functionality.
- Components: Similar to controllers in other popular MVC frameworks, components are used to create the user interface (i.e. views) within your application.
- Templates: As with views in other MVCs, templates in Angular are altered forms of HTML that describe how the application renders the interface.
- Metadata: Typically a short and sweet collection of data that precedes a class, which is used to explicitly inform Angular that the class definition which follows is a particular type of class, such as a component.
- Data Binding: Angular allows for simple binding of data between the DOM and the underlying components. Depending on the syntax used within the templates, this binding can be one way from DOM to component, component to DOM, or simultaneously in both directions.
- Directives: Markers attached to particular DOM elements which apply a specific behavior or transformation to the element.
- Services: Perhaps the most generic part of an Angular application, a service is typically a class with well-defined, logical functionality, such as configuration, logging, or data management.
- Dependency Injection: Finally, with a number of services powering your application, you can utilize an injector to inform a particular component about which services it requires to be functional.
Exploit a Task Runner
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:
- Minification: To speed up browser load times, most web applications "minify" their combined JavaScript files, a task Grunt can handle automatically.
- Live Reload: During development, can automatically reload your browser when changes are made to the code.
- Best Practice Hints: Like the live reload function, when code is altered, Grunt will analyze and output any hints about potential changes to conform to JavaScript best practices.
- SASS/LESS Compilation: Will automatically compile any CSS-style framework files into actual CSS.
- THOUSANDS More: Grunt has a massive plugin directory that contains a plethora of potential tasks depending on your needs.
Exercise Proper Style Guidelines
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.
Automate Your Testing
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.
Utilize Helper Modules
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.
