Skip to content

ostikatriel24/Angular-atomic-design-Typescript-Skeleton

 
 

Repository files navigation

Angular atomic design

This project is an angular template of atomic design

Concept

Atomic Design

Description

  • Atoms: Dumb components (we cannot call any service or conditional (intelligent) expression it is only for displaying info that's all and doesn't have a unit test it has a storybook to display forms that can be taken with the props (inputs))
  • Molecules: intelligent components group of Atoms(you can call services and conditional expressions and it can have a unit test if it is intelligent or sotrybook if it has inputs and it is not intelligent)
  • Organisms: intelligent components group of Molecules(you can call services and conditional expressions and it can have a unit test if it is intelligent or sotrybook if it has inputs and it is not intelligent)
  • Templates: intelligent components group of Organisms and layout Designs(you can call services and conditional expressions and it can have a unit test if it is intelligent or sotrybook if it has inputs and it is not intelligent)
  • Pages: Generally used to group common components like header and footer with internal templates
  • Commun Folder: contains the common pages (as about us, terms and conditions) and common components headers, footers ....
  • Services Folder: contains API calls and common services and modules

Example usefull CLI


ng generate module exampleForm --route exampleForm --module app.module

ng generate module example-form/pages/page1 --route page1 --module example-form.module

ng generate module example-form/Templates/example-temp --module example-form/pages/page1/page1.module
ng generate module example-form/Templates/example-temp2 --module example-form/pages/page1/page1.module
ng generate component example-form/Templates/example-temp
ng generate component example-form/Templates/example-temp2

ng generate module example-form/organisms/example-org --module example-form/pages/page1/page1.module
ng generate module example-form/organisms/example-org2 --module example-form/pages/page1/page1.module
ng generate module example-form/organisms/example-org3 --module example-form/pages/page1/page1.module
ng generate component example-form/organisms/example-org
ng generate component example-form/organisms/example-org2
ng generate component example-form/organisms/example-org3

ng generate module example-form/molecules/form --module example-form/organisms/example-org/example-org.module
ng generate module example-form/molecules/avatar-container --module example-form/organisms/example-org2/example-org2.module
ng generate module example-form/molecules/label-conatiner --module example-form/organisms/example-org/example-org.module
ng generate module example-form/molecules/list-conatiner --module example-form/organisms/example-org3/example-org3.module
ng generate component example-form/molecules/form
ng generate component example-form/molecules/avatar-container
ng generate component example-form/molecules/label-conatiner
ng generate component example-form/molecules/list-conatiner
  
ng generate module example-form/atoms/rich-text --module example-form/molecules/form/form.module
ng generate module example-form/atoms/avatar-comp --module example-form/molecules/avatar-container/avatar-container.module
ng generate module example-form/atoms/button --module example-form/molecules/form/form.module
ng generate module example-form/atoms/text --module example-form/molecules/form/form.module
ng generate module example-form/atoms/label --module example-form/molecules/label-conatiner/label-conatiner.module
ng generate module example-form/atoms/list --module example-form/molecules/list-conatiner/list-conatiner.module
ng generate component example-form/atoms/avatar-comp
ng generate component example-form/atoms/button
ng generate component example-form/atoms/button
ng generate component example-form/atoms/text
ng generate component example-form/atoms/label
ng generate component example-form/atoms/list

ng generate service services/nom-service

Perspective

we want to add

DummyAPI to test

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

About

Angular atomic design project template

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 89.7%
  • HTML 5.6%
  • JavaScript 4.3%
  • CSS 0.4%