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

Update the app folder structure #61

Description

@dsebastien

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions