carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code format

Browse Source
This commit is contained in:
Çetin
2025-01-07 17:29:51 +03:00
parent e3bcb0fdb6
commit 44c2361564
49 changed files with 1536 additions and 1723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/app/pages/documentation/documentation.ts
View File

@@ -3,33 +3,29 @@ import { CommonModule } from '@angular/common';
@Component({
selector: 'app-documentation',
standalone: true,
standalone: true,
imports: [CommonModule],
template: `
<div class="card mb-4">
<div>
<h2>Documentation</h2>
<h4>Getting Started</h4>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular
v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
template: `
<div class="card mb-4">
<div>
<h2>Documentation</h2>
<h4>Getting Started</h4>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
<pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre>
<pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre>
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory,
install the libraries from npm and then execute "ng serve" to run the application in your local
environment.</p>
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
<pre class="app-code"><code>cd sakai
<pre class="app-code"><code>cd sakai
npm install
ng serve</code></pre>
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start
with the development of your application.</p>
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start with the development of your application.</p>
<h5>Important CLI Commands</h5>
<p>Following commands are derived from CLI.</p>
<h5>Important CLI Commands</h5>
<p>Following commands are derived from CLI.</p>
<pre class="app-code"><code>Run 'ng serve' for a dev server. Navigate to \`http://localhost:4200/\`. The app will automatically reload if you change any of the source files.
<pre class="app-code"><code>Run 'ng serve' for a dev server. Navigate to \`http://localhost:4200/\`. The app will automatically reload if you change any of the source files.
Run 'ng generate component component-name' to generate a new component. You can also use \`ng generate directive/pipe/service/class/module\`.
@@ -41,24 +37,21 @@ Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protrac
Run 'ng help' for more options.</code></pre>
<h4>Structure</h4>
<p>Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets.
Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder,
and the assets are in the <span class="text-primary font-medium">src/assets/layout</span> folder.
</p>
<h4>Structure</h4>
<p>
Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder, and the assets are in the
<span class="text-primary font-medium">src/assets/layout</span> folder.
</p>
<h5>Default Configuration</h5>
<p>Initial layout configuration can be defined at the main app component by injecting the <span
class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when
customizing the defaults. Note that <span class="text-primary font-medium">theme</span> and
<span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of
Angular at <strong class="font-semibold">index.html</strong> by default and
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong
class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially,
it is required to configure the layout service with the matching values
to avoid sync issues. </p>
<h5>Default Configuration</h5>
<p>
Initial layout configuration can be defined at the main app component by injecting the <span class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when customizing the defaults. Note that
<span class="text-primary font-medium">theme</span> and <span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of Angular at <strong class="font-semibold">index.html</strong> by
default and initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is
required to configure the layout service with the matching values to avoid sync issues.
</p>
<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core';
<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api';
import &#123; LayoutService, AppConfig &#125; from './layout/service/app.layout.service';
@@ -87,12 +80,13 @@ export class AppComponent implements OnInit &#123;
&#125;</code></pre>
<h5>Menu</h5>
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span>
file and based on PrimeNG MenuModel API. In order to define the menuitems,
navigate to this file and define your own model as a nested structure.</p>
<h5>Menu</h5>
<p>
Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems, navigate to this file and define
your own model as a nested structure.
</p>
<pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core';
<pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core';
import &#123; Component &#125; from '&#64;angular/core';
&#64;Component(&#123;
@@ -120,43 +114,40 @@ export class AppMenuComponent implements OnInit &#123;
&#125;
&#125;</code></pre>
<h4>Integration with Existing Angular CLI Projects</h4>
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing
application. We've created a short tutorial with details.</p>
<h4>Integration with Existing Angular CLI Projects</h4>
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.</p>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0"
allowfullscreen></iframe>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0" allowfullscreen></iframe>
</div>
<h4>Theme</h4>
<p>
Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme to your bundle that are located inside <span class="text-primary font-medium">assets/layout/styles/theme/</span> folder such
as <span class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.
</p>
<p>Another alternative would be creating dynamic bundles, please see the <a href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video tutorial</a> for an example.</p>
</div>
</div>
`,
styles: `
@media screen and (max-width: 991px) {
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
<h4>Theme</h4>
<p>Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme
to your bundle that are located inside <span
class="text-primary font-medium">assets/layout/styles/theme/</span>
folder such as <span
class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.</p>
<p>Another alternative would be creating dynamic bundles, please see the <a
href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video
tutorial</a> for an example.</p>
</div>
</div>
`,
styles: `@media screen and (max-width: 991px) {
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}`
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
`
})
export class Documentation { }
export class Documentation {}