na-framework-angular v17.3.2

na-framework-angular

how to use

install

npm install na-framework-angular

app.module.ts

import { NgModule, Injector } from '@angular/core';
import { NaFrameworkModule, FrameworkModule } from 'na-framework-angular';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NaFrameworkModule
  ],
  providers: [
    {
      //custom call setting
      provide: 'naRequestEndPoint', useValue:
      {
        host: '',  //Call from the default caller.
        contextName: '_api',   //server addr(URI) + / + contextName + / <serviceName> + / <methodName> + /
        appVersion: '0.0.1',   //Add version number to http header.
        versionName: 'version' //http header name.
      }
    }
  ],
  bootstrap: [...]
})
export class AppModule extends FrameworkModule {
  constructor(injector: Injector){
    super(injector);
  }
}

*required RouterModule

app.component.ts

import { Component } from '@angular/core';
import { NaComponentBase, isEmpty, NaServiceName } from 'na-framework-angular';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
@NaServiceName('Test')
export class AppComponent extends NaComponentBase {
 /**
  * abstract initializeView -> ngOnInit
  **/
 initializeView(): void {
 
 }
 /**
  * abstract createCompleteView -> ngAfterViewInit + delay 50ms
  **/
 createCompleteView(): void {
   /**
    * call rest api service
    * methodName: init, search, regist 
    * serviceName: Specify the service name with NaServiceName decorator
    * 
    * default rest api address
    * /_api/[serviceName]/[methodName]
    **/
   this.init({...}).subscribe((result)=>{
   });
   this.search({...}).subscribe((result)=>{
   });
   this.regist({...}).subscribe((result)=>{
   });
   /**
    * custom method
    */
   this.callService([methodNameString],{...})
   .subscribe((result)=>{
   });
   /**
    * custom service and method
    */
   this.callCustomService([serviceNameString],[methodNameString],{...})
   .subscribe((result)=>{
   });
 }
 title = 'framework-demo';
}

style.scss

@use '@angular/material' as mat;
@import '../node_modules/na-framework-angular/theming';
// require angular material
@include mat.core();

$primary: mat.define-palette(mat.$blue-palette, A200);
$accent: mat.define-palette(mat.$orange-palette, A400);
$warn: mat.define-palette(mat.$teal-palette, 500);
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  )
));
@include mat.all-component-themes($theme);

//na-framework-theme($info, $question, $complete,$warning,$error);
//@include na-framework-theme(#53c1dc,#2a7cb4,#59b764,#f3ab58,#F44336); <- default color
@include na-framework-theme();    // alert panel color

//na-framework-wait-dialog($color);
//@include na-framework-wait-dialog(#3f51b5); <- default color
@include na-framework-wait-dialog();  //wait dialog color