App

An "App" refers to an Angular Application, it is comprised of the standard Angular app plus an external App Service which sets config files (interfaces provided by fire-ng package).

App Service

To use the App Service in a component, page (or widget), include:

import { AppService } from 'src/app/shared/app.service';

Then, you can inject with constructor:

constructor(private appService: AppService) { 
// you can access the config object with:
// const config = appService.getConfig();
}

to set a page:

import { AppService } from 'src/app/shared/app.service';
 import { page } from './home.page'; 
constructor(private appService: AppService) { 
 appService.setPage(page);
}

Page Config

Each page must have a config file (*.page.ts), located within its component directory. It should look like:

import { Page } from 'fire-ng/lib/interfaces/page';

export const page = {
    title: "Homepage",
    description: "Example homepage."
} as Page;

App Config

App config should be located in a file within the /src/app/config/ directory, and should look like:

import { Config } from 'fire-ng/lib/interfaces/config';

export const app = {
    title: "Fire for Angular",
    email: "[email protected]",
    phone: "18557882348",
    theme: "#515152",
    company: "Blazed Labs LLC",
    icon: "https://blazed.sirv.com/logo/Beaker-Red.png",
    dns: {
        preconnect: [
            "https://blazed.sirv.com/",
            "https://res.cloudinary.com/"
        ],
        prefetch: [
            "//res.cloudinary.com/",
            "//blazed.sirv.com/"
        ]
    },
    license: "https://res.cloudinary.com/blazed-space/raw/upload/v1637201502/txt/license.txt",
    author: "https://res.cloudinary.com/blazed-space/raw/upload/v1637200777/txt/humans.txt",
    browserconfig: "https://res.cloudinary.com/blazed-space/raw/upload/v1652469389/xml/browserconfig.xml",
    social: {
        twitter: {
            handle: "BlazedLabs",
            url: "https://twitter.com/BlazedLabs"
        },
        facebook: {
            app: "503698127531557",
            url: "https://www.facebook.com/blazedlabs"
        },
        linkedin: {
            url: "https://www.instagram.com/blazed_labs/"
        },
        instagram: {
            url: "https://www.instagram.com/blazed_labs/"
        }
    },
    image: "https://blazed.sirv.com/logo/Wallpaper-Beaker.png",
    description: "Boilerplate for Angular JS."
} as Config;

Site Config

The layout/site config should be located in the same directory, and will allow you to define the top nav links and bottom footer links, and it should look like:

import { Layout, FooterLink } from 'fire-ng/lib/interfaces/layout';

export const site = {
    logo: "https://blazed.sirv.com/logo/BLZ-blue.png",
    nav: [
        {
            text: "Home",
            link: "/home"
        },
        {
            text: "Services",
            link: "/services"
        },
        {
            text: "Products",
            link: "/products"
        }
    ],
    burgerVisible: false,
    footerLinks: [
        {
            header: "Company",
            body: [
                {
                    text: "Home",
                    link: "/home"
                },
                {
                    text: "Services",
                    link: "/services"
                },
                {
                    text: "Products",
                    link: "/products"
                },
                {
                    text: "Corportate",
                    link: "https://blazed.company/"
                }
            ]
        },
        {
            header: "Platforms",
            body: [
                {
                    text: "Gaming",
                    link: "https://blazed.games/"
                },
                {
                    text: "Social",
                    link: "https://blz.one/"
                },
                {
                    text: "World",
                    link: "https://blazed.world/"
                },
                {
                    text: "Software",
                    link: "https://blazed.software/"
                }
            ]
        },
        {
            header: "Services",
            body: [
                {
                    text: "Governance",
                    link: "https://vexio.quest/"
                },
                {
                    text: "Sales",
                    link: "https://ixis.space/"
                },
                {
                    text: "Publishing",
                    link: "https://blazed.xyz/"
                },
                {
                    text: "Telecom",
                    link: "https://blazed.tel/"
                }
            ]
        }
    ]
} as Layout;