mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-03 07:01:38 +00:00
Updated docs and guides to reflect the latest changes
This commit is contained in:
Sercan Yemen
parent
f2beb5626e
commit
aa790afacc
@ -104,8 +104,7 @@
|
||||
from your backend API if needed.
|
||||
</p>
|
||||
<p>
|
||||
Since Javascript cannot read or write <strong>HTTPOnly</strong> cookies, <em>refresh tokens</em> can only be accessed and set via the requests and responses by
|
||||
your backend implementation. Basically, the <em>refresh token</em> implementation needs to be done in your backend, there is nothing that can be done in Fuse or
|
||||
The <em>refresh token</em> implementation needs to be done in your backend, there is nothing that can be done in Fuse or
|
||||
in Javascript.
|
||||
</p>
|
||||
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
<h2>Translating the navigation</h2>
|
||||
<p>
|
||||
Since <code>FuseNavigation</code> supports runtime data swapping, you can replace the navigation data either partially or completely when the language changes.
|
||||
The <strong>LanguageComponent</strong> is a suitable place to do this and it's located at <code>src/app/layout/common/language</code>.
|
||||
The <strong>LanguageComponent</strong> is a suitable place to do this and it's located at <code>src/app/layout/common/languages</code>.
|
||||
</p>
|
||||
|
||||
<h2>Removing Transloco</h2>
|
||||
@ -63,11 +63,10 @@
|
||||
the <strong>Transloco</strong> from Fuse:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Navigate to <code>src/app/core/core.module.ts</code> file and remove imports of <code>TranslocoCoreModule</code></li>
|
||||
<li>Navigate to <code>src/app.config.ts</code> file and remove the lines marked with the comment <code>// Transloco Config</code></li>
|
||||
<li>Remove the <code>src/app/core/transloco</code> directory</li>
|
||||
<li>Do a project wide search for <code><languages></languages></code> and remove all instances</li>
|
||||
<li>Do a project wide search for <code>LanguageModule</code> and remove all imports</li>
|
||||
<li>Remove the <code>src/app/layout/common/language</code> directory</li>
|
||||
<li>Remove the <code>src/app/layout/common/languages</code> directory</li>
|
||||
<li>Finally navigate to the <code>package.json</code> file, remove the <strong>"@ngneat/transloco"</strong> from dependencies list and run <code>npm install</code> command</li>
|
||||
</ol>
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
This element is not an actual Angular component, it's just a simple wrapper to hold everything you may want to show on the splash screen.
|
||||
</p>
|
||||
<p>
|
||||
Splash screen styles are located in <code>src/assets/styles/splash-screen.css</code> file.
|
||||
Splash screen styles are located in <code>public/styles/splash-screen.css</code> file.
|
||||
</p>
|
||||
<p>
|
||||
You can change the styles to modify the look of the splash screen and put anything you want into the <code>fuse-splash-screen</code> element to show on the
|
||||
@ -88,7 +88,7 @@
|
||||
|
||||
<!-- Splash screen styles -->
|
||||
<link
|
||||
href="assets/styles/splash-screen.css"
|
||||
href="styles/splash-screen.css"
|
||||
rel="stylesheet">
|
||||
|
||||
...
|
||||
@ -96,7 +96,7 @@
|
||||
<!-- Splash screen -->
|
||||
<fuse-splash-screen>
|
||||
<img
|
||||
src="assets/images/logo/logo.svg"
|
||||
src="images/logo/logo.svg"
|
||||
alt="Fuse logo">
|
||||
<div class="spinner">
|
||||
<div class="bounce1"></div>
|
||||
|
||||
@ -44,8 +44,7 @@
|
||||
</p>
|
||||
<p>
|
||||
By default, layouts are applied automatically via the <code>LayoutComponent</code>. The default layout is set by the <code>app.config.ts</code> file from
|
||||
<strong>app/core/config/</strong> directory. This configuration file is supplied as the default configuration to the <code>FuseConfigService</code> which is a custom
|
||||
made configuration service to store, write and read application wide configurations.
|
||||
<strong>src/app/</strong> directory and it's available via <code>FuseConfigService</code>.
|
||||
</p>
|
||||
<fuse-alert
|
||||
[appearance]="'border'"
|
||||
|
||||
@ -334,7 +334,7 @@
|
||||
<h2>Setting the default theme</h2>
|
||||
<p>
|
||||
By default, the "default" theme will be used as the default theme for your application. If for some reason, you want to have more than
|
||||
one themes and choose something other than the "default", you can do so by setting the default theme via <code>app/core/config/app.config.ts</code> file.
|
||||
one themes and choose something other than the "default", you can do so by setting the default theme via <code>src/app.config.ts</code> file.
|
||||
You can also change the theme runtime using the <code>FuseConfigService</code>.
|
||||
</p>
|
||||
|
||||
@ -344,7 +344,7 @@
|
||||
change to a "dark" mode without losing your theme or setting up a separate "dark" theme.
|
||||
</p>
|
||||
<p>
|
||||
You can set the default scheme via <code>app/core/config/app.config.ts</code> file. You can also change the scheme runtime using the
|
||||
You can set the default scheme via <code>src/app.config.ts</code> file. You can also change the scheme runtime using the
|
||||
<code>FuseConfigService</code>.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
@ -98,7 +98,12 @@
|
||||
</mat-tree>
|
||||
</div>
|
||||
|
||||
<h2>@fuse/</h2>
|
||||
<h2>/public</h2>
|
||||
<p>
|
||||
Default folder for static assets like images, fonts, static styles and etc.
|
||||
</p>
|
||||
|
||||
<h2>/src/@fuse/</h2>
|
||||
<p>
|
||||
This is the core directory of the Fuse. It includes components, directives, services, pipes, custom validators, animations, base styles and much more.
|
||||
</p>
|
||||
@ -107,7 +112,7 @@
|
||||
directory and its content will make the updating process complex and time consuming.
|
||||
</p>
|
||||
|
||||
<h2>app/</h2>
|
||||
<h2>src/app/</h2>
|
||||
<p>
|
||||
This directory contains all application related codes. This is where you put your code.
|
||||
</p>
|
||||
@ -158,7 +163,7 @@
|
||||
</mat-tree>
|
||||
</div>
|
||||
|
||||
<h3>app/core/</h3>
|
||||
<h3>src/app/core/</h3>
|
||||
<p>
|
||||
This directory is designed to contain your application's core; Singleton services, default configurations, default states and likes. It's
|
||||
<strong>NOT</strong> recommended to put any components, directives, pipes or simply anything has a template or related to templates in here.
|
||||
@ -191,7 +196,7 @@
|
||||
</ul>
|
||||
<p>and etc...</p>
|
||||
|
||||
<h3>app/mock-api/</h3>
|
||||
<h3>src/app/mock-api/</h3>
|
||||
<p>
|
||||
This directory is designed to contain data services for custom made MockAPI library. Detailed information about this directory and the MockAPI library can be found
|
||||
in the
|
||||
@ -199,7 +204,7 @@
|
||||
section of this documentation.
|
||||
</p>
|
||||
|
||||
<h3>app/layout/</h3>
|
||||
<h3>src/app/layout/</h3>
|
||||
<p>
|
||||
This directory designed to contain everything related to the layout of your app. By default, Fuse provides variety of different layout options for you to use.
|
||||
</p>
|
||||
@ -224,7 +229,7 @@
|
||||
layouts, you can put them inside the <strong>common</strong> folder.
|
||||
</p>
|
||||
|
||||
<h3>app/modules/</h3>
|
||||
<h3>src/app/modules/</h3>
|
||||
<p>
|
||||
This directory is designed to contain your application's feature modules.
|
||||
</p>
|
||||
@ -236,12 +241,7 @@
|
||||
If you use SSR (Server Side Rendering) you can even include your <strong>landing</strong> page as one of the modules and keep everything in a single app.
|
||||
</p>
|
||||
|
||||
<h2>assets/</h2>
|
||||
<p>
|
||||
Default Angular assets folder.
|
||||
</p>
|
||||
|
||||
<h2>styles/</h2>
|
||||
<h2>src/styles/</h2>
|
||||
<p>
|
||||
This folder contains 4 different scss files:
|
||||
</p>
|
||||
|
||||
@ -110,14 +110,27 @@ export class DirectoryStructureComponent implements OnInit
|
||||
{name: 'app.component.html'},
|
||||
{name: 'app.component.scss'},
|
||||
{name: 'app.component.ts'},
|
||||
{name: 'app.config.ts'},
|
||||
{name: 'app.resolvers.ts'},
|
||||
{name: 'app.routing.ts'},
|
||||
{name: 'app.routes.ts'},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// General dir
|
||||
this.generalDir = [
|
||||
{
|
||||
name : 'public',
|
||||
children: [
|
||||
{name: 'fonts/'},
|
||||
{name: 'i18n/'},
|
||||
{name: 'icons/'},
|
||||
{name: 'images/'},
|
||||
{name: 'styles/'},
|
||||
{name: 'favicon-16x16.png'},
|
||||
{name: 'favicon-32x32.png'},
|
||||
],
|
||||
},
|
||||
{
|
||||
name : 'src/',
|
||||
children: [
|
||||
@ -139,16 +152,6 @@ export class DirectoryStructureComponent implements OnInit
|
||||
],
|
||||
},
|
||||
this.appDir[0],
|
||||
{
|
||||
name : 'assets/',
|
||||
children: [
|
||||
{name: 'fonts/'},
|
||||
{name: 'i18n/'},
|
||||
{name: 'icons/'},
|
||||
{name: 'images/'},
|
||||
{name: 'styles/'},
|
||||
],
|
||||
},
|
||||
{
|
||||
name : 'styles/',
|
||||
children: [
|
||||
@ -157,8 +160,6 @@ export class DirectoryStructureComponent implements OnInit
|
||||
{name: 'vendors.scss'},
|
||||
],
|
||||
},
|
||||
{name: 'favicon-16x16.png'},
|
||||
{name: 'favicon-32x32.png'},
|
||||
{name: 'index.html'},
|
||||
{name: 'main.ts'},
|
||||
],
|
||||
@ -205,9 +206,9 @@ export class DirectoryStructureComponent implements OnInit
|
||||
}
|
||||
});
|
||||
|
||||
// Expand the first item
|
||||
// Expand the tree nodes
|
||||
this.appTree.treeControl.expand(this.appTree.treeControl.dataNodes[0]);
|
||||
this.generalTree.treeControl.expand(this.generalTree.treeControl.dataNodes[0]);
|
||||
this.generalTree.treeControl.expand(this.generalTree.treeControl.dataNodes[8]);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
@ -52,100 +52,55 @@
|
||||
|
||||
<h2>Default configuration</h2>
|
||||
<p>
|
||||
By default, the application wide configuration is stored in <code>src/app/core/config/app.config.ts</code> file and it includes the <strong>layout style</strong> as
|
||||
By default, the application wide configuration is stored in <code>src/app.config.ts</code> file and it includes the <strong>layout style</strong> as
|
||||
well as the <strong>color theme</strong> configurations:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { Layout } from 'app/layout/layout.types';
|
||||
|
||||
// Types
|
||||
export type Scheme = 'auto' | 'dark' | 'light';
|
||||
export type Screens = { [key: string]: string };
|
||||
export type Theme = 'theme-default' | string;
|
||||
export type Themes = { id: string; name: string }[];
|
||||
|
||||
/**
|
||||
* AppConfig interface. Update this interface to strictly type your config
|
||||
* object.
|
||||
*/
|
||||
export interface AppConfig
|
||||
{
|
||||
layout: Layout;
|
||||
scheme: Scheme;
|
||||
screens: Screens;
|
||||
theme: Theme;
|
||||
themes: Themes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default configuration for the entire application. This object is used by
|
||||
* FuseConfigService to set the default configuration.
|
||||
*
|
||||
* If you need to store global configuration for your app, you can use this
|
||||
* object to set the defaults. To access, update and reset the config, use
|
||||
* FuseConfigService and its methods.
|
||||
*
|
||||
* "Screens" are carried over to the BreakpointObserver for accessing them within
|
||||
* components, and they are required.
|
||||
*
|
||||
* "Themes" are required for Tailwind to generate themes.
|
||||
*/
|
||||
export const appConfig: AppConfig = {
|
||||
layout : 'classy',
|
||||
scheme : 'light',
|
||||
screens: {
|
||||
sm: '600px',
|
||||
md: '960px',
|
||||
lg: '1280px',
|
||||
xl: '1440px'
|
||||
},
|
||||
theme : 'theme-default',
|
||||
themes : [
|
||||
{
|
||||
provideFuse({
|
||||
...
|
||||
fuse : {
|
||||
layout : 'classy',
|
||||
scheme : 'light',
|
||||
screens: {
|
||||
sm: '600px',
|
||||
md: '960px',
|
||||
lg: '1280px',
|
||||
xl: '1440px',
|
||||
},
|
||||
theme : 'theme-default',
|
||||
themes : [{
|
||||
id : 'theme-default',
|
||||
name: 'Default'
|
||||
name: 'Default',
|
||||
},
|
||||
{
|
||||
id : 'theme-brand',
|
||||
name: 'Brand'
|
||||
name: 'Brand',
|
||||
},
|
||||
{
|
||||
id : 'theme-teal',
|
||||
name: 'Teal'
|
||||
name: 'Teal',
|
||||
},
|
||||
{
|
||||
id : 'theme-rose',
|
||||
name: 'Rose'
|
||||
name: 'Rose',
|
||||
},
|
||||
{
|
||||
id : 'theme-purple',
|
||||
name: 'Purple'
|
||||
name: 'Purple',
|
||||
},
|
||||
{
|
||||
id : 'theme-amber',
|
||||
name: 'Amber'
|
||||
}
|
||||
]
|
||||
};
|
||||
name: 'Amber',
|
||||
}],
|
||||
},
|
||||
}),
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
The default configuration is supplied to the <strong>FuseConfigService</strong> using the <code>FuseConfigModule.forRoot()</code> in <strong>AppModule</strong>:
|
||||
The default configuration is supplied to the <strong>FuseConfigService</strong> automatically:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { appConfig } from 'app/core/config/app.config';
|
||||
|
||||
...
|
||||
|
||||
imports: [
|
||||
FuseConfigModule.forRoot(appConfig)
|
||||
...
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Methods</h2>
|
||||
<p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user