Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(structure): project structure article

Browse source
This commit is contained in:
nixa 2016-05-24 13:00:25 +03:00
parent d03c9d82b1
commit f2370a2e09
1 changed files with 50 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

72
docs/contents/articles/012-project-structure/index.md
View file

@ -6,28 +6,56 @@ group: Customization
template: article.jade template: article.jade
--- ---
Project structure was originally based on [this angular generator](https://github.com/Swiip/generator-gulp-angular). We made some changes we thought would be better for our particular problem. Project structure was originally based on [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter#file-structure). We made some changes we thought would be better in our particular case.
The directory structure of this template is as follows: The directory structure of this template is as follows:
```
├── bower.json <- front-end library dependencies
├── gulpfile.js <- main task runner file
├── package.json <- mostly task runner dependencies
├── docs/ <- wintersmith documentation generator
├── gulp/ <- build tasks
├── src/ <- main front-end assets
│   ├── 404.html
│   ├── auth.html
│   ├── index.html <- main app dashboard page
│   ├── reg.html
│   ├── app/ <- angular application files
│   │   ├── app.js <- angular application entry point. Used for managing dependencies
│   │   ├── pages/ <- UI router pages. Pages created for demonstration purposes. Put your application js and html files here
│   │   ├── theme/ <- theme components. Contains various common widgets, panels which used across application
│   ├── assets/ <- static files (images, fonts etc.)
│   ├── sass/ <- sass styles
│   │   ├── app/ <- application styles. Used mostly for demonstration purposes. Put your app styles here.
│   │   ├── theme/ <- theme styles. Used to customize bootstrap and other common components used in tempate.
```
In our template we tried to separate theme layer and presentation layer. We believe most of other templates have them combined. That's why when you start developing using them, it gets very hard for you to remove things you don't need. Though we understand that our structure is not ideal, but we're aiming to make it as good as possible. ```
ng2-admin/
├──config/ * build configuration
│ ├──helpers.js * helper functions for our configuration files
│ ├──webpack.dev.js * development webpack config
│ ├──webpack.prod.js * production webpack config
│ └──webpack.test.js * testing webpack config
│
├──src/ * source files that will be compiled to javascript
│ ├──main.browser.ts * entry file for our browser environment
│ │
│ ├──index.html * application layout
│ │
│ ├──polyfills.ts * polyfills file
│ │
│ ├──vendor.ts * vendors file
│ │
│ ├──custom-typings.d.ts * custom typings for third-party modules
│ │
│ ├──platform/ * platform dependent imports
│ │
│ ├──app/ * application code - our working directory
│ │ │
│ │ ├──app.component.ts * main application component
│ │ │
│ │ ├──app.loader.ts * requires initial css styles (most important for application loading stage)
│ │ │
│ │ ├──app.menu.ts * sidebar menu configuration
│ │ │
│ │ ├──app.state.ts * global application state for data exchange between components
│ │ │
│ │ ├──app.scss * application styles
│ │ │
│ │ ├──pages/ * application pages components, place where you can create pages and fill them with components
│ │ │
│ │ └──theme/ * template global components/directives/pipes and styles
│ │
│ └──assets/ * static assets are served here
│
│
├──tslint.json * typescript lint config
├──typedoc.json * typescript documentation generator
├──tsconfig.json * config that webpack uses for typescript
├──typings.json * our typings manager
├──package.json * what npm uses to manage it's dependencies
├──bower.json * DEPRECATED - moving to npm as primary package manager for all dependenties
└──.bowerrc * DEPRECARD - temporary bower configuration
```
In our template we tried to separate theme layer and presentation layer. We believe most of other templates have them combined. That's why when you start developing using them, it gets very hard for you to remove things you don't need.