Angular Style Guide for enterprise and large-scale projects

Standard

GitHub Repository:  GitHub Link

Angular Style Guide for enterprise and large-scale projects

Single Responsibility

  • Define 1 component per file.

pastedimage

IIFE

  • Wrap Angular components in an Immediately Invoked Function Expression (IIFE).

pastedimage 1

Definitions (aka Setters)

  • Declare modules without a variable using the setter syntax.
  • When using a module, avoid using a variable and instead use chaining with the getter syntax.
  • Only set once and get for all other instances.

pastedimage 2

Named vs Anonymous Functions

  • Use named functions instead of passing an anonymous function in as a callback.

pastedimage 3

controllerAs View Syntax

  • Use the controllerAs syntax over the classic controller with $scope syntax.
  • Use a capture variable for this when using the controllerAs syntax. Choose a consistent variable name such as vm, which stands for ViewModel.
  • When a controller must be paired with a view and either component may be re-used by other controllers or views, define controllers along with their routes.

pastedimage 4 pastedimage 5

Route Resolve Promises

  • When a controller depends on a promise to be resolved before the controller is activated, resolve those dependencies in the $stateProvider before the controller logic is executed. If you need to conditionally cancel a route before the controller is activated, use a route resolver.

pastedimage 6

Bindable Members Up Top

  • Place bindable members at the top of the controller, alphabetized, and not spread through the controller code.
  • Resolve start-up logic for a controller in an activate function.

pastedimage 7

Function Declarations to Hide Implementation Details

  • Use function declarations to hide implementation details. Keep your bindable members up top. When you need to bind a function in a controller, point it to a function declaration that appears later in the file. This is tied directly to the section Bindable Members Up Top
  • Resolve start-up logic for a controller in an activate function.

pastedimage 8

Separate Data Calls

  • Refactor logic for making data operations and interacting with data to a factory. Make data services responsible for XHR calls, local storage, stashing in memory, or any other data operations.

pastedimage 9

Directives

  • Create one directive per file. Name the file for the directive.
  • When manipulating the DOM directly, use a directive.
  • When creating a directive that makes sense as a stand-alone element, allow restrict E (custom element) and optionally restrict A (custom attribute).
  • Use controller as syntax with a directive to be consistent with using controller as with view and controller pairings.
  • Use bindToController = true when using controller as syntax with a directive when you want to bind the outer scope to the directive’s controller’s scope.

pastedimage 10

Manual Annotating for Dependency Injection

  • Avoid using the shortcut syntax of declaring dependencies without using a minification-safe approach. Use $inject to manually identify your dependencies for Angular components.

pastedimage 11

Startup Logic

  • Inject code into module configuration that must be configured before running the angular app. Ideal candidates include providers and constants.
  • Any code that needs to run when an application starts should be declared in a factory, exposed via a function, and injected into the run block.

pastedimage 12

Module Dependencies

  • The application root module depends on the app specific feature modules and any shared or reusable modules.

pastedimage 13

Application Structure LIFT Principle

  • LIFT is:
  • Locating our code is easy
  • Identify code at a glance
  • Flat structure as long as we can
  • Try to stay DRY (Don’t Repeat Yourself) or T-DRY

Folders-by-Feature Structure:

  • Create folders named for the feature they represent. When a folder grows to contain more than 7 files, start to consider creating a folder for them. Your threshold may be different, so adjust as needed.

pastedimage 14

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s