Simple architecture of Angular applications

Introduction to Atomic Design

Can you tell at a glance what is inside a shared module? And, without opening another file, tell which components have dependencies or bindings to other components? Whatever your answer, I suggest you brew some tea or coffee and understand the basics of Brad Frost's atomic design theory with me





Angular

 





Directory structure for atomic design in Angular
Angular

, Angular « — » ( «  — »). , , .





«»  — . .





 — «»





, . (@Input) - (@Output). , .





  •  — , . HTML- .





  •  — .





 — «»





HTML-, «» , TypeScript.





, , , .





, , . «» , . , . «» TypeScript HTML-CSS. , . , - .





«», . , , .





 . HTML-CSS ng-content



.





( ), HTML-. , .





:





A template component that groups common wrapper code alongside styling and has no logic.
-, .

 





A page or smart component based on a template component.  It has no styles, but it drives the logic.
«» -. , .

, Angular Material, . , router-outlet



. , «/» .





, .   .





, , . . .





«» «» ? . /. , -, .





 — «»

core/features/shared (  /  / ). «» /, .






"JavaScript Developer. Professional".



"Async Patterns JavaScript". JavaScript, , map, reduce . !








All Articles