Last active
July 11, 2018 14:15
-
-
Save h4hany/c593cf3cde2b16caf5815245dec203c8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Anguler Best Practice | |
| This gist for how to create a good anguler app | |
| ## Folder Structure | |
| * [app](./tree-md) | |
| * [components](./dir2) (common component used in app) | |
| * [order](./dir2/file21.ts) | |
| * [index](./dir2/file22.ts) | |
| * [show](./dir2/file22.ts) | |
| * [create](./dir2/file22.ts) | |
| * [user](./dir2/file23.ts) | |
| * [index](./dir2/file22.ts) | |
| * [show](./dir2/file22.ts) | |
| * [create](./dir2/file22.ts) | |
| * [layout](./dir1) (layout component) | |
| * [header.ts](./dir1/file11.ts) | |
| * [footer.ts](./dir1/file12.ts) | |
| * [side-bar.ts](./dir1/file12.ts) | |
| * [pages](./dir1) (Routes Components) | |
| * [login.ts](./dir1/file11.ts) | |
| * [home.ts](./dir1/file12.ts) | |
| * [models](./dir1) (just structure for object that we use in app like user, order ...) | |
| * [user.ts](./dir1/file11.ts) | |
| * [order.ts](./dir1/file12.ts) | |
| * [product.ts](./dir1/file12.ts) | |
| * [services](./dir1) (for calling backend api ) | |
| * [userService.ts](./dir1/file11.ts) | |
| * [orderService.ts](./dir1/file12.ts) | |
| * [shared](./dir1) | |
| * [pips](./dir1) | |
| * [pip1.ts](./dir1/file11.ts) | |
| * [pip2.ts](./dir1/file12.ts) | |
| * [directive](./dir1) | |
| * [directive1.ts](./dir1/file11.ts) | |
| * [directive2.ts](./dir1/file12.ts) | |
| * [components](./dir1/file11.ts) | |
| * [component1.ts](./dir1/file12.ts) | |
| * [redux](./file_in_root.ts) | |
| * [actions](./README.md) | |
| * [user](./README.md) | |
| * [order](./README.md) | |
| * [dispatcher](./dir3) | |
| * [user](./README.md) | |
| * [order](./README.md) | |
| * [store](./dir3) | |
| * [user](./README.md) | |
| * [order](./README.md) | |
| After this structure you will find `import` will be like this `import {userComponent} from ../../../../` | |
| the we need to alias | |
| in `tsconfig.json` file | |
| ```json | |
| { | |
| "compilerOptions": { | |
| "baseUrl": "./src", | |
| "paths": { | |
| "@components": [ | |
| "../../../components" | |
| ], | |
| "@shared": [ | |
| "../../../shared" | |
| ] | |
| }, | |
| ... | |
| } | |
| ``` | |
| Now you can use those aliases `import {userComponent} from "@componets/user"` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment