ngx-admin/articles/012-project-structure/index.html
Alexander Zhukov 00a47bf22f Updates
2017-02-28 14:37:20 +03:00

126 lines
No EOL
6.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
<title>ng2-admin documentation - Project Structure</title>
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
<link rel="stylesheet" href="/ng2-admin/css/main.css">
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo">&nbsp;<span class="blur-label">ng2-</span>admin</a>
<ul class="nav-site nav-site-internal">
<li><a href="/ng2-admin/">Home</a></li>
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
</div>
</div>
<section class="content wrap documentationContent">
<div class="nav-docs">
<div class="nav-docs section">
<h5>Quick Start</h5>
<ul>
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
</ul>
</div>
<div class="nav-docs section">
<h5>Customization</h5>
<ul>
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
<li><a href="/ng2-admin/articles/012-project-structure/" class="active">Project Structure</a></li>
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
</ul>
</div>
<div class="nav-docs section">
<h5>Components</h5>
<ul>
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Project Structure</h1>
<div class="subHeader"></div><p>The project structure is originally based on <a href="https://github.com/AngularClass/angular2-webpack-starter#file-structure">Angular2 Webpack Starter</a>. We made some changes we thought would be better in our particular<span class="widont">&nbsp;</span>case.</p>
<p>The directory structure of this template is as<span class="widont">&nbsp;</span>follows:</p>
<pre><code>ng2-admin/
├──config/ * webpack build configuration
│ ├──head-config.common.js * configuration for head elements in index.html
│ │
│ ├──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
│ │
│ ├──electron/ * electron webpack config
│ │
│ └──html-elements-plugin/ * html elements plugin
├──src/ * source files that will be compiled to javascript
│ ├──custom-typings.d.ts * custom typings for third-party modules
│ │
│ ├──desktop.ts * electron window initialization
│ │
│ ├──index.html * application layout
│ │
│ ├──main.browser.ts * entry file for our browser environment
│ │
│ ├──package.json * electrons package.json
│ │
│ ├──polyfills.browser.ts * polyfills file
│ │
│ ├──vendor.browser.ts * vendors file
│ │
│ ├──app/ * application code - our working directory
│ │ │
│ │ ├──app.component.ts * main application component
│ │ │
│ │ │
│ │ ├──app.menu.ts * menu pages routes
│ │ │
│ │ ├──app.module.ts * main application module
│ │ │
│ │ ├──app.routes.ts * application routes
│ │ │
│ │ ├──global.state.ts * global application state for data exchange between components
│ │ │
│ │ ├──environment.ts * environment provider
│ │ │
│ │ ├──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
└──package.json * what npm uses to manage it&#39;s dependencies
</code></pre><p>In our template we tried to separate the theme layer and presentation layer. We believe most of other templates
have them combined. Thats why when you start developing using them, it gets very hard for you to remove things you
dont<span class="widont">&nbsp;</span>need.</p>
</div>
</section>
<footer class="wrap">
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
<div class="right">© 20152016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
</footer>
</div><a href="https://github.com/akveo/ng2-admin" title="Star &amp; Fork on GitHub" class="github-fork-ribbon"></a>
</body>
</html>