This document provides Angular coding standards and best practices for developers. It recommends restructuring default directories, keeping presentation logic out of controllers, using dependency injection, and testing with Angular-specific tools. The document also suggests keeping controllers simple, putting business logic in models, using code analysis tools, lazy loading, Ahead-of-Time compilation, focused components, small functions, deferring logic to services, following file naming guidelines, and creating modular applications. Developers should avoid naming collisions, unnecessary imports, and overdependence on jQuery plugins.

1. Angular Coding Standards.
The purpose of the Angular coding standards document istocreate abaseline for collaboration andreview within various aspects of the HTML project
andthis document will helpdevelopers tounderstand how he/she canwrite better code, sothat other developers canbetter understand it.
Do’s
Rework the defaultdirectory structure:
It’s helpful toknow that you canrestructure Angular’s default
directories. The default directories you’re given will depend on the
type ofsoftware you’re writing.
Keep presentation logic out of controllers:
InanMVC architecture, every module isseparated intoeither the
model, viewor controller. The view iswhere your presentation logic is
coded. The presentation isanything todowith the DOM. Ifyou need
tochange avalue inanyHTML element, youshould only usethe
presentation layer todoit.
.
Use dependency injection:
Dependency injection isawaytodecouple parts ofyour application
from the mainlogic.
Use angularjs-specific testing tools:
There are options when it comes totesting, but be sure tochoose
carefully. Chrome comes with itsown developer tools, and many
developers useFirefox plugins totestJavaScript code. But AngularJS is
ahighly modified formof JavaScript. Because Google developed
AngularJS, the most common (andprobably the safest) tool touse is
the Chrome extension ng-inspector.
Keep controllers simple:
Controllers are meant todefine your scope variables and encapsulate
view relatedlogic. Please don’t use controllers for DOM interactions
or data manipulation.
Business logic belongs to models:
Data processing should always be kept inmodels, that way they can
easilybe shared between controllers andother services. Plus it'seasier
towrite unit test for them.
Use codelyzer tool:
Codelyzer helps us suggest the best practices during writing angular
code.
Use lazy load:
Uselazyloading onsubcomponents andwhere ever possible.
Use AoT:
Usageof AoT (aheadof time)compilation isagreat steptowards
performance gains atruntime. Italsoreduces your bundle byabout
30kb (gzipped) which isaLOT of improvement. Angular 4.0+ brings
about 30% improvement inappbundles due tohow itgenerates the
AoT code.
Keep Components Focused:
Reusing components withseveral views isbrittle andgoodend-to-
end(e2e) test coverage isrequired toensure stability across large
applications.
Small Functions:
Small functions helpavoid hidden bugs that come withlarge functions
that share variables with external scope, create unwanted closures, or
unwanted coupling with dependencies
Defer Logic to Services:
Logic maybe reused bymultiple components when placedwithin a
service andexposed via afunction.
File Naming Guidelines:
Namingconventions helpprovide aconsistent way tofindcontent at
aglance. Consistency within the project isvital.
Modularity:
Modular applications makeit easytoplug andgoasthey allow the
development teamstobuild vertical slices ofthe applications androll
out incrementally. This meanswe can plug innew features aswe
develop them.
Don’ts
● Avoid NamingCollisions.
● Don’t import the full package.
● Don’t dependmuchonjQuery plugin