@ra/horus library for administration pages.

Install

Create new project.

ng new cd

Install horus library

npm install -save horus

Install horus dependencies

npm install -save @angular/cdk @angular/material @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @ngx-translate/core @ngx-translate/http-loader

Copy default translation files and images

cp -r node_modules/horus/assets/* src/assets/

Initialize default css class.

You can simply change file src/style.css adding following line:

@import "../node_modules/horus/lib/css/green"; for green theme.

@import "../node_modules/horus/lib/css/indigo"; for indigo theme.

For using desired fonts you should add following line in head part of index.html

Skeleton project

#--------------------------------- app-routing.module.ts

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HorusAdminLayoutComponent, HorusAuthGuard, HorusDashboardComponent, HorusLoginComponent } from "horus";

const routes: Routes = [ { path: '', component: HorusLoginComponent }, { path: 'cab', component: HorusAdminLayoutComponent, canActivate: [HorusAuthGuard], canActivateChild: [HorusAuthGuard], children: [ { path: 'dashboard', component: HorusDashboardComponent }, { path: 'dash', component: HorusDashboardComponent }, { path: 'anubis', loadChildren: '../../projects/horus/src/lib/_modules/anubis/anubis.module#AnubisModule' } ] }, { path: 'login', component: HorusLoginComponent }, ];

@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

#--------------------------------- app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from "@angular/common/http"; import { TranslateHttpLoader } from "@ngx-translate/http-loader"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AuthInterceptor, HorusAuthGuard, HorusModule } from "horus"; import { TranslateLoader, TranslateModule } from "@ngx-translate/core";

// Loading translation modules export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); }

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule, HorusModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] }, }), ], providers: [ HorusAuthGuard, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, ], bootstrap: [AppComponent] }) export class AppModule { }

#--------------------------------- app.component.ts

import { Component } from '@angular/core'; import { HorusGlobalService, HorusMenuService } from "horus"; import { environment } from "../environments/environment";

@Component({ selector: 'app-root', template: '', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'horus-app'; constructor( private global: HorusGlobalService, private menu: HorusMenuService ) { console.log('application started'); this.global.i18n.setDefaultLang('ru'); this.global.apiUrl = environment.api_server + 'api/1/'; this.global.year = String(environment.year); this.global.mustAuthenticate = true; this.menu.initMenu(); console.log('App constructor'); }

get loaded() { return this.global.menuLoaded; } }

#--------------------------------- environment.ts

export const environment = { production: false, year: , api_server: //api_server: 'http://95.56.249.178:3006/' };