AngularJS (1.X) Best Practices and Naming Conventions

angular-js-best-practices.md

Angular Naming Convention

TYPE	CONVENTION	EXAMPLE
App Module	UpperCamel	MyApp
Controller	UpperCamel	SomeController
Service	UpperCamel	SomeDataService
Factory	UpperCamel	SomeFactory
Directive	lowerCamel	someDirective
Filter	lowerCamel	someFilter
Class	UpperCamel	function SomeClassName (){};
Function	lowerCamel	vm.getValues = function(){};
$scope Member	lowerCamel	$scope.userInputModel = {};
Constant	ALL_CAPS	var STATIC_URL = ""https://google.com";
Function Arguments	_lowerCamel	vm.setValue = function( _value ){ value = _value; }

Angular Best practices

• $timeout instead of setTimeout
• $interval instead of setInterval
• $window instead of window
• $document instead of document
• $http instead of $.ajax
• $location instead of window.location or $window.location
• $cookies instead of document.cookie
• Do not pollute your vm . Only add functions and variables that are being used in the templates.
• Use vm instead of $scope everywhere possible. https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/
• If a controller is nested by a parent controller, use vmControllerName
• Do not use JQUERY inside your app, If you must, use JQLite instead with angular.element.
• DOM manipulations must be done only through directives in their link function.
• Use directives as attributes or elements instead of comments or classes, this will make your code more readable.
• Use scope.$on('$destroy', fn) for cleaning up. This is especially useful when you're wrapping third-party plugins as directives.
• Do not forget to use $sce when you should deal with untrusted content.
• Make your filters as light as possible. They are called often during the $digest loop so creating a slow filter will slow down your app.
• Do a single thing in your filters, keep them coherent. More complex manipulations can be achieved by piping existing filters.
• Encapsulate all the business logic in services. Prefer using it as your model. Avoid writing business logic inside controllers
• Avoid writing complex expressions in the templates.
• When you need to set the src of an image dynamically use ng-src instead of src with {{ }} template.
• When you need to set the href of an anchor tag dynamically use ng-href instead of href with {{ }} template.
• Instead of using scope variable as string and using it with style attribute with {{ }}, use the directive ng-style with object-like parameters and scope variables as values:
• Use resolve to resolve dependencies before the view is shown.
• Do not place explicit RESTful calls inside the resolve callback. Isolate all the requests inside appropriate services. This way you can enable caching and follow the separation of concerns principle.
• Avoid Watches, they can significantly slow down the app and are indicative of bad design.
• Avoid Broadcasts, they can significantly slow down the app and are indicative of bad design.

Service vs Factory vs Controller vs Directive vs Component

• A Controller manages template logic. Any functions that interface with the UI belong in the controller. The controller is bound to either a route (in app.js) or to a template (using ng-controller attribute in HTML)

• A Service is a class that implements the service pattern. Typically, these are used to make calls to some API. Services can also encapsulate complicated business logic.

• A Factory is a class that implements factory pattern. Anytime you need some complex class instantiated across multiple controllers, use a factory to create it.

• A Component could be used anywhere in the app. These basically make up the UI building blocks of our applications. Write a Component when you want to create a reusable set of DOM elements of UI with custom behaviour. Write a directive when you want to write reusable behaviour to supplement existing DOM elements. Only one component can be present per DOM element.

• A Directive encapsulates shared functionality and UI. Directives add behaviour to an existing DOM element or an existing component instance. If a component is repeated in an app, or could be used as-is in another app, then it should be a Directive. A Directive can consume Services and Factories. A Directive has a controller and a template. Many directives can be used per DOM element.

Helpful Links

Example AngularJS App: https://gist.github.com/DevEarley/142b80299f89e8162b25daa6a5bbee5c

Example AngularJS Directives: https://gist.github.com/DevEarley/caf3e2966382d9548309ee778657e76a https://gist.github.com/DevEarley/2004f47e8b7deeb38a17dc479d9f35fe

Example AnuglarJS Service: https://gist.github.com/DevEarley/43e6f7b5c6c2c15de0a721d214321d6b

Example AngularJS Controller: https://gist.github.com/DevEarley/19dcabccb7c24abaaf7b4c1fa3d2be1f

Example AngularJS Factory: https://gist.github.com/DevEarley/5b49b965a4a5767c22deebea228616f3

Sources

https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/general-naming-conventions

https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/capitalization-conventions

https://www.webpagefx.com/blog/web-design/css-tip-2-structural-naming-convention-in-css/

https://google.github.io/styleguide/jsguide.html

https://www.w3schools.com/js/js_conventions.asp

https://github.com/mgechev/angularjs-style-guide#directives

Great content. Thanks for that!