Entity view (Content)

Top 10 list of AngularJS Style Guide Suggestions

By plaoha
Aug. 27, 2015

This post is based on the style guide written by John Papa titled Angular Style Guide: A starting point for Angular development teams to provide consistency through good practices. A quick background on AngularJS for those unfamiliar, AngularJS is a javascript framework for creating dynamic web apps. Specifically, it can be used to create single page applications. The framework is great in how it takes some well recognized design patterns and structures them into a framework which can make normally very complex apps easy. Since complexity can grow and teams need to find that common style to work from, it's important to use a system that is commonly accepted. Below are a list of guidelines that I think should be in the top ten with their corresponding reasons.

1. Choose Named over Anonymous Functions [Y024]
- Code is easier to read
- Easier to debug
- Reduces the amount of nested code

2. Use controllerAs View Syntax [Y030]
- Easier to read in the view
- Avoids reference issues by binding to an object

3. Defer Controller Logic to Services [Y035]
- Logic may be used by multiple controllers
- Logic in a service can be more easily isolated in a unit test
- Hides implementation details from a controller

4. Use Function Declarations to Hide Implementation Details [Y053]
- Accessible members up top make it easy to read
- Implementation details later in the file moves the complexity out of view
- Follows the Module Pattern so that private functions can be declared

5. Separate Data Calls into Factory or Services [Y060]
- Simplifies the controller
- Easier to test with fake data
- Easier to change the implementation by seperating out the logic concerning the data

6. Restrict some Directives to Elements and Attributes [Y074]
- If a directive is acting as an element then use it as one
- Easier to read in the view

7. Use Directives using ControllerAs syntax [Y075]
- Provides consistency with Controller As syntax with views
- Easier to understand naming for dependency injection

8. Create a Standardized Naming Convention [Y120]
- Helps to find files at a glance
- Easier to understand a files purpose if described in the name

9. Try to maintain a Flat Folder structure [Y143]
- Harder to find files that are nested
- Easier to maintain structure if its not too complex

10. Use Run Blocks for App initialization [Y171]
- Easier to read startup requirements
- Easier to abstract and test for issues

Post Tags: