ng2cli

    3.0.0 • Public • Published

    Angular 2/ngrx templates generator

    CLI util for easy generate Angular 2 and ngrx files

    Installation

    npm install -g ng2cli

    Usage

    ng2cli --help

    Create new module####

    ng2cli -m contact

    contact.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
     
    @NgModule({
      declarations: [],
      exports: [],
      imports: [BrowserModule],
      providers: []
    })
    export class ContactModule {
     
    }
     

    Create new component####

    ng2cli footer

    Will generate four files:

    footer.component.ts

    import { Component, EventEmitter, Input, Output, OnInit, ChangeDetectionStrategy } from '@angular/core';
     
    @Component({
      selector: 'footer',
      template: require('./footer.component.html'),
      style: [require('./footer.component.scss')],
      changeDetection: ChangeDetectionStrategy.OnPush
    })
     
     
    export class FooterComponent implements OnInit {
      @Input() myProperty;
      @Output() myEvent = new EventEmitter<string>();
     
      constructor() {
     
      }
     
      ngOnInit() {
     
      }
    }
     
     

    footer.component.spec.ts

    import {
      TestBed
    } from '@angular/testing/core';
    import { FooterComponent } from './footer.component';
     
    describe('Component: Footer', () => {
     
      let fixture: ComponentFixture<FooterComponent>;
     
      beforeEach(() => {
        TestBed.configureTestingModule({
          declarations: [FooterComponent]
        });
        fixture = TestBed.createComponent(FooterComponent);
      });
     
      it('should have some h1', () => {
        const component = fixture.componentInstance;
        fixture.detectChanges();
        const element = fixture.nativeElement;
        expect(element.querySelector('h1').textContent).toBe('Something');
      });
     
    });
     

    footer.component.html

    <section class="footer">
      <h1>footer Component</h1>
      <input type="text" #input />
      <button (click)="myEvent.emit(input.value)">Click me</button>
    </section>
     

    footer.component.scss

    .footer {
     
    }

    Create new service####

    ng2cli -s todos

    Will generate two files:

    todos.service.ts

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
     
    @Injectable()
    class TodosService {
     
      constructor(private http: Http) {
      }
     
    }
     

    todos.service.spec.ts

    import {
        beforeEachProviders,
        inject,
        fakeAsync,
        tick
    } from '@angular/testing/core';
    import { BaseRequestOptions, Http } from '@angular/http';
    import { MockBackend } from '@angular/http/testing';
    import { TodosService } from './todos.service';
     
    describe('Todos Service', () => {
      beforeEachProviders(() =>
        [
            BaseRequestOptions,
            MockBackend,
            {
                provide: Http,
                useFactory: function(backend, defaultOptions) {
                    return new Http(backend, defaultOptions);
                },
                deps: [MockBackend, BaseRequestOptions]
            },
            TodosService
        ];
      );
     
     
    it('should ...',
        inject([TodosService], (todosService: TodosService) => {
            expect(todosService).toBeTruthy();
        }));
        /**
          When you are testing code that returns either a Promise or an RxJS Observable,
          you can use the fakeAsync helper to test that code as if it were synchronous.
          Promises are be fulfilled and Observables are notified immediately after you call tick()
        **/
        it('should make HTTP request',
          inject([TodosService, MockBackend], fakeAsync((todosService:TodosService, mockBackend:MockBackend) => {
            var res:Response;
            mockBackend.connections.subscribe(c => {
              expect(c.request.url).toBe('some.api.call');
              let response = new ResponseOptions({body: '[{}, {}]'});
              c.mockRespond(new Response(response));
            });
            todosService.get().subscribe(response => {
              res = response;
            });
            tick();
            expect(res.length).toBe(2);
          }))
        );
     });
     

    Create new pipe####

    ng2cli -p camel-case

    Will generate two files:

    camel-case.pipe.ts

    import { Pipe, PipeTransform } from '@angular/core';
     
    @Pipe({name: 'camelCase'})
     
    export class CamelCasePipe implements PipeTransform {
     
      transform( value: any, args?: any): any {
        return null;
      }
     
    }
     

    camel-case.pipe.spec.ts

    import { CamelCasePipe } from './camel-case.pipe';
     
    describe('Pipe: CamelCase', () => {
      let pipe: CamelCasePipe;
     
      beforeEach(() => {
        pipe = new CamelCasePipe();
      });
     
      it('transforms "abc" to "ABC"', () => {
        expect(pipe.transform('abc')).toEqual('ABC');
      });
     
    });
     

    Create new stateful pipe####

    ng2cli --sp stateful

    Will generate: ( with test file )

    import { Pipe, PipeTransform } from '@angular/core';
    import { Http }                from '@angular/http';
    import 'rxjs/operators/map';
     
    @Pipe({
        name: 'stateful',
        pure: false
    })
     
    export class StatefulPipe {
        private fetchedJson: any = null;
        private prevUrl = '';
        constructor(private _http: Http) { }
     
        transform(url: string): any {
            if (url !== this.prevUrl) {
                this.prevUrl = url;
                this.fetchedJson = null;
                this._http.get(url)
                    .map(result => result.json())
                    .subscribe(result => this.fetchedJson = result);
            }
            return this.fetchedJson;
        }
     
    }
     

    Create new directive####

    ng2cli -d my-directive

    will generate two files:

    my-directive.directive.ts

    import { Directive, ElementRef, Input, HostListener, HostBinding, Renderer } from '@angular/core';
     
    @Directive({
      selector: '[myDirective]'
    })
     
    export class MyDirectiveDirective {
     
      constructor(el: ElementRef, renderer: Renderer) {
         //el.nativeElement.style.backgroundColor = 'yellow';
        // renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
      }
     
      @HostBinding('attr.role') role = 'button';
     
      @HostListener('mouseenter')
      onMouseEnter() {
     
      }
     
    }
     

    my-directive.directive.spec.ts

    import {CommonModule} from '@angular/common';
    import {Component} from '@angular/core';
    import {ComponentFixture, TestBed, async} from '@angular/core/testing';
    import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
    import {expect} from '@angular/platform-browser/testing/matchers';
     
    describe('MyDirective Directive', () => {
      let fixture: ComponentFixture<any>;
     
      function getComponent(): TestComponent {
        return fixture.componentInstance;
      }
     
      afterEach(() => { fixture = null; });
     
      beforeEach(() => {
        TestBed.configureTestingModule({
          declarations: [TestComponent],
          imports: [CommonModule]
        });
      });
     
      it('should do some dom manipulation', async(() => {
           const template = '<div myDirective>hello</div>';
           fixture = createTestComponent(template);
     
           fixture.detectChanges();
           expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);
           expect(fixture.nativeElement).toHaveText('hello');
         }));
     
      });
     
    // Create a test component to test directives
    @Component({selector: 'test-cmp', template: ''})
    class TestComponent {}
     
    function createTestComponent(template: string): ComponentFixture<TestComponent> {
      return TestBed.overrideComponent(TestComponent, {set: {template: template}})
          .createComponent(TestComponent);
    }
     

    Create new stractural directive####

    ng2cli --sd my-directive

    Will generate: ( with test file )

    import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular2/core';
     
    @Directive({ selector: '[myDirective]' })
     
    export class MyDirectiveDirective {
      constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
        ) { }
     
      @Input() set myDirective(condition: boolean) {
        if (!condition) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.clear();
        }
      }
     
    }

    ngrx/store

    Create new ngrx reducer with actions####

    ng2cli -r todos -a add_todo remove_todo

    Will generate three files:

    todos.actions.ts

    export const ADD_TODO = 'ADD_TODO';
    export const REMOVE_TODO = 'REMOVE_TODO';

    todos.reducer.ts

    import { ActionReducer, Action } from '@ngrx/store';
    import * as todosActions from './todos.actions';
     
    export const todosReducer: ActionReducer<type= (state: type = [], action: Action) => {
        switch (action.type) {
          case todosActions.ADD_TODO
            return [...state, action.payload];
          case todosActions.REMOVE_TODO
            return [...state, action.payload];
          default:
            return state;
        }
    }
     

    todos.reducer.spec.ts

    import * as todosActions from './todos.actions';
    import { todos } from "./todos";
     
    describe('The todos reducer', () => {
        it('should return current state when x action is dispatched', () => {
            const actual = todos(0, {type: todosActions.x});
            const expected = 0;
            expect(actual).toBe(expected);
        });
    });
     

    Create new actions####

    ng2cli -n todos -a add_todo remove_todo

    todos.actions.ts

    export const ADD_TODO = 'ADD_TODO';
    export const REMOVE_TODO = 'REMOVE_TODO';

    Change the default file types for html and style

    If you are using something else from the default html and scss you can set this one time like this:

    sudo ng2cli --html jade --style less

    PR ME!!!

    If you want to fix/improve the templates please PR ME.

    Install

    npm i ng2cli

    DownloadsWeekly Downloads

    0

    Version

    3.0.0

    License

    ISC

    Last publish

    Collaborators

    • netbasal