Wondering what’s next for npm?Check out our public roadmap! »

    fl-framework-angular
    TypeScript icon, indicating that this package has built-in type declarations

    10.0.2-beta.1 • Public • Published

    fl-framework-angular

    how to use

    install

    npm install fl-framework-angular @angular/flex-layout
    

    app.module.ts

    import { NgModule, Injector } from '@angular/core';
    import { FlFrameworkModule, FrameworkModule } from 'fl-framework-angular';
    
    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...
        FlFrameworkModule
      ],
      providers: [
        {
          //custom call setting
          provide: 'flRequestEndPoint', 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);
      }
    }

    app.component.ts

    import { Component } from '@angular/core';
    import { FlComponentBase, isEmpty, FlServiceName } from 'fl-framework-angular';
    
    @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
    })
    @FlServiceName('Test')
    export class AppComponent extends FlComponentBase {
     /**
      * 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 FlServiceName 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

    @import '~@angular/material/theming';
    @import '~fl-framework-angular/theming';  // <-here
    // require angular material
    @include mat-core();
    
    // mat-deep-purple,mat-purple,mat-indigo
    $primary: mat-palette($mat-blue, A200);
    $accent:  mat-palette($mat-orange, A400);
    $warn:    mat-palette($mat-teal, 500);
    $theme: mat-light-theme($primary, $accent, $warn);
    
    @include angular-material-theme($theme);
    
    //fl-framework-theme($info, $question, $complete,$warning,$error);
    //@include fl-framework-theme(#53c1dc,#2a7cb4,#59b764,#f3ab58,#F44336); <- default color
    @include fl-framework-theme();    // alert panel color
    
    //fl-framework-wait-dialog($color);
    //@include fl-framework-wait-dialog(#3f51b5); <- default color
    @include fl-framework-wait-dialog();  //wait dialog color
    

    Keywords

    Install

    npm i fl-framework-angular

    DownloadsWeekly Downloads

    3

    Version

    10.0.2-beta.1

    License

    MIT

    Unpacked Size

    471 kB

    Total Files

    46

    Last publish

    Collaborators

    • avatar