Angular best practices
Download as DOCX, PDF0 likes96 views
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.
Angular best practices
- 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