Skip to content
This repository has been archived by the owner on Jun 15, 2020. It is now read-only.

Update the app folder structure #61

Open
dsebastien opened this issue Jan 19, 2016 · 0 comments
Open

Update the app folder structure #61

dsebastien opened this issue Jan 19, 2016 · 0 comments

Comments

@dsebastien
Copy link
Owner

At work we've thought a bit more about the project structure and currently think that the following structure would make more sense both for Angular 1 or Angular 2 projects (probably also for other component-based frameworks).

This is a first draft; will evolve:

src\
|-- index.html
|-- ...
|-- app\
|    |-- app.ts: top level element of the application
|    |-- boot.ts: boostrap the application (loaded in the index.html and used as entrypoint): loads app.ts and kick-starts the application
|-- modules\
|    |-- modules.ts: configure all the modules
|    |-- _modules.scss: imports all the stylesheets of the modules
|    |-- common\: all common code
|    |    |-- common.ts: configure the common module
|    |    |-- components\: all components that you can reuse across the application
|    |    |    |-- awesome-datepicker: example common component
|    |    |    |    |    |-- ... (see further for an example of the structure)
|    |    |-- services\: all services that you can reuse across the whole application
|    |    |    |-- ...
|    |    |-- filters\: all filters that you can reuse across the whole application
|    |    |    |-- ...
|    |    |-- ...
|    |-- admin\: an example module, regrouping a set of related functionalities of your application
|    |    |-- admin.ts: configure the admin module (e.g., can define the module configuration for AngularJS)
|    |    |-- _admin.scss: import all the styles of the admin module
|    |    |-- services\: the common services of the admin module (if any)
|    |    |-- components\: the components of the admin module
|    |    |    |-- foo\: the foo component
|    |    |    |    |-- controllers\: the controllers of the component
|    |    |    |    |    |-- fooController.ts: FooController class (with Angular 2 it's where you'd find the @Component decorator)
|    |    |    |    |    |-- fooControl.spec.js: FooController class tests
|    |    |    |    |-- views\: the views of the component
|    |    |    |    |    |-- _fooTemplate.html: the template for that component
|    |    |    |    |-- styles\: the styles of the component
|    |    |    |    |    |-- _foo.scss: the styles of the component
|-- assets: all static assets
|    |-- font
|    |-- icons
|    |-- images
|-- scripts: generic scripts (usually 3rd party that you have to put in your codebase for some reason)
|-- styles\: general stylesheets
|    |-- base\
|    |    |-- _base.scss: base styles
|    |    |-- _fonts.scss: font definitions
|    |    |-- _typography.scss: typography
|    |    |-- _functions.scss: reusable functions
|    |    |-- _mixins.scss: mixins
|    |    |-- _reset.scss: reset styles
|    |    |-- _responsive.scss: responsive web design styles
|    |    |-- _utils.scss: misc
|    |    |-- _variables.scss
|    |-- main.scss: load all the application style partials
|    |-- vendor.scss

Modules represent the sections of your application, making things a bit more organized. For AngularJS, a module corresponds 1 to 1 to an AngularJS module.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant