NG Triton

Business application shell template based on Angular.

NG Triton is Angular Triton. It's a beautiful shell. See via Google search

Design

For design and description, https://github.com/dopsun/ng-triton.

Getting Started

Prerequisites

• Angular (https://angular.io/) and its dependencies, including NodeJS.

Step for new project

Step 1: Create project:

ng new ng-triton-app
cd ng-triton-app

Step 2: Install and configure angular material dependencies Referring: https://material.angular.io/guide/getting-started. ng-triton requires all 2, 3, 4, 5 and 6.

ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? No
? Set up browser animations for Angular Material? Yes

ng install @angular/flex-layout material-icons

Step 3: Install @dopsun/ng-triton:

npm install @dopsun/ng-triton

Step 4: Import NgTritonModule and HttpClientModule

import { HttpClientModule } from '@angular/common/http';
import { NgTritonModule } from '@dopsun/ng-triton';

@NgModule({
  ...
  imports: [
    ...
    HttpClientModule,
    NgTritonModule,
    ...
  ],
  ...
})
export class AppModule { }

Step 5: update styles.scss

@import "~material-icons/iconfont/material-icons.css";
@import "~@dopsun/ng-triton/triton-light-blue-orange";

.ngt-dark-theme {
  @import "~@dopsun/ng-triton/triton-dark-blue-orange";
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Step 6: Create ShellInputService

ng g service shell-input

import { AbstractShellInput } from '@dopsun/ng-triton';

export class ShellInputService extends AbstractShellInput {
  constructor() {
    super();
  }
}

Step 7: Update app.component.ts and app.component.html

app.component.ts:

import {ShellInputService} from './shell-input.service';

constructor(public shellInput: ShellInputService) {
}

app.component.html:

<ngt-shell [input]="this.shellInput"></ngt-shell>

Step 8: Add first component and update app-routing.module.ts

ng g component home

app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

Step 9: That's it. Start...

npm start

Contributing

Please visit https://github.com/dopsun/ng-triton.

Versioning

We use SemVer for versioning. For the versions available, see the tags on GitHub repository.

Authors

• Dop Sun - Initial work - Dop Sun

See also the list of contributors who participated in this project.

License

This project is licensed under Apache License, Version 2.0 - see the LICENSE file for details

Acknowledgments

• README.md template: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
• gitignore template: https://www.gitignore.io/api/java,node,macos,eclipse,angular
• Work with Angular library: https://medium.com/atom-platform/angular-7-series-part-2-create-custom-library-8d7a0494b2cc