By Anthony Coggine
Style guides, like any guide, provide programmers and web developers a set of guidelines, which enforce a specific set of practices. Just as MLA and APA supply academic writers with certain rules, so do AngularJS Style Guides for programmers.
The rules and suggestions set up by style guides enforce best practices. Of course, what is or isn’t a best practice can be wildly subjective, even in the tech world. Hence, we have more than one AngularJS Style Guide to choose from.
Before we dive into AngularJS Style Guides, let’s take a moment to break down what AngularJS is and how it helps web developers create complex web applications (apps) with ease.
What does the JS stand for?
The JS in AngularJS stands for JavaScript. JavaScript is a programming language that makes web pages interactive. For example, if you want certain elements on your web page to appear only upon someone scrolling down the page, you’re probably going to need JavaScript to do it. JavaScript makes web pages come alive. It’s one of the front-end web designer’s best friends, along with HTML and CSS.
AngularJS is a JavaScript-based language, so it’s easier to learn after being acquainted with JavaScript’s style and syntax.
Why do we need AngularJS?
AngularJS can be used to make web apps. A web app framework like AngularJS makes it easier to code dynamic websites. They supply web developers with built-in libraries they can build upon. They allow the developer to build upon existing code instead of building applications from scratch. Right out of the box, AngularJS makes code cleaner and easier to read.
AngularJS is primarily used for creating Single Page Applications. These are simply web apps on a single page that update dynamically as a user interacts with them. An example of a Single Page Application would be Gmail. When using Gmail you can check your inbox, trash spam, and compose a new email—all on a single page.
Now that you have a basic understanding of AngularJS and what web developers use it for, let’s delve into style guides.
What kind of rules do AngularJS Style Guides establish?
It’s perfectly fine to format your code any way you like—if you are the only one reading it. What happens when you need to share code? AngularJS Style Guides establish a specific way to format your code so that anyone else reading it will be able to do so painlessly.
As mentioned earlier, style guides provide rules; rules like how to format AngularJS programs in order to make them readable. They may also provide recommendations for making code faster or more robust. Different guides supply different conventions of style. One guide may recommend that you limit one component to 400 lines of code. Another may give you a slightly different recommendation.
Some frequently covered topics in AngularJS Style Guides include modules, directives, controllers, application structure, configuration, routing, exception handling, performance, security, testing, naming conventions, and comments, each described in more detail below.
Modules
A module acts as a container for parts of your app. Your app can be composed of controllers and directives, for example. These are encapsulated inside modules.
Directives
Directives extend HTML attributes. They act as functions that execute when the browser reads them.
Controllers
Controllers control data in AngularJS. Directives can define controllers.
Application Structure
This is the actual structure of your program—how you organize your files and what software engineering principles you choose to employ. This is entirely up to you, but you should keep readability and reusability in mind.
Configuration
This is how your app initializes.
Routing
Routing is how you navigate from one state to another. An example of Single Page Application routing is opening your inbox in Gmail and clicking on a new message. You’ve changed states by opening an unread email.
Exception Handling
This is how an AngularJS program throws errors. This is especially useful during testing.
Performance
Minifying is just as important for AngularJS as it is for CSS.
Security
Style guides supply best practices that ensure your apps aren’t hijacked by hackers.
Testing
Testing correctly requires the proper tools. Style guides recommend tools and tricks for the most efficient and reliable testing.
Naming Conventions
These guidelines give suggestions for labelling documents and data. Sticking to certain naming conventions can make your AngularJS code easier to read.
Comments
Some guides lean towards excessive comments. Others prefer a minimalist approach. Comments are strictly a matter of preference, but a team of developers need to agree on what their preference is.
Consider Style Guides
AngularJS Style Guides, like all style guides, are integral to coding projects, especially for projects utilizing a team of developers. Style guides make it easier to read and reuse code because it gives all coders a common set of rules to abide by.
Take the time to research popular style guides and see what works for you. It may take a little tinkering around, but soon enough, you’ll be integrating an AngularJS Style Guide into your projects. SW
Anthony Coggine is a tech professional turned business analyst. He has spent more than five years as a recruitment consultant in a variety of industries, primarily focused on consumer technology and research. You may connect with him on Twitter @anthonycoggine.
Apr2017, Software Magazine
