{"id":16428799,"url":"https://github.com/netanelbasal/ng2cli","last_synced_at":"2025-03-23T07:33:29.078Z","repository":{"id":79938438,"uuid":"48226409","full_name":"NetanelBasal/ng2cli","owner":"NetanelBasal","description":"Angular 2 cli generator","archived":false,"fork":false,"pushed_at":"2016-09-12T08:20:24.000Z","size":59,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T18:54:10.313Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NetanelBasal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-18T09:28:48.000Z","updated_at":"2017-11-04T12:15:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"518238b9-59c5-43c7-b938-1d9cd70581f5","html_url":"https://github.com/NetanelBasal/ng2cli","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetanelBasal%2Fng2cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetanelBasal%2Fng2cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetanelBasal%2Fng2cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetanelBasal%2Fng2cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NetanelBasal","download_url":"https://codeload.github.com/NetanelBasal/ng2cli/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245072313,"owners_count":20556352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T08:19:03.556Z","updated_at":"2025-03-23T07:33:29.066Z","avatar_url":"https://github.com/NetanelBasal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 2/ngrx templates generator\n\nCLI util for easy generate Angular 2 and [ngrx](https://github.com/ngrx/store) files\n## Installation\n```js\nnpm install -g ng2cli\n```\n\n## Usage\n\n```bash\nng2cli --help\n```\n\n####**Create new module**####\n```bash\nng2cli -m contact\n```\n***contact.module.ts***\n```javascript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\n@NgModule({\n  declarations: [],\n  exports: [],\n  imports: [BrowserModule],\n  providers: []\n})\nexport class ContactModule {\n\n}\n\n```\n\n\n####**Create new component**####\n```bash\nng2cli footer\n```\nWill generate four files:\n\n**footer.component.ts**\n```javascript\nimport { Component, EventEmitter, Input, Output, OnInit, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n  selector: 'footer',\n  template: require('./footer.component.html'),\n  style: [require('./footer.component.scss')],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\n\n\nexport class FooterComponent implements OnInit {\n  @Input() myProperty;\n  @Output() myEvent = new EventEmitter\u003cstring\u003e();\n\n  constructor() {\n\n  }\n\n  ngOnInit() {\n\n  }\n}\n\n\n```\n\n**footer.component.spec.ts**\n```javascript\nimport {\n  TestBed\n} from '@angular/testing/core';\nimport { FooterComponent } from './footer.component';\n\ndescribe('Component: Footer', () =\u003e {\n\n  let fixture: ComponentFixture\u003cFooterComponent\u003e;\n\n  beforeEach(() =\u003e {\n    TestBed.configureTestingModule({\n      declarations: [FooterComponent]\n    });\n    fixture = TestBed.createComponent(FooterComponent);\n  });\n\n  it('should have some h1', () =\u003e {\n    const component = fixture.componentInstance;\n    fixture.detectChanges();\n    const element = fixture.nativeElement;\n    expect(element.querySelector('h1').textContent).toBe('Something');\n  });\n\n});\n\n```\n\n**footer.component.html**\n```html\n\u003csection class=\"footer\"\u003e\n  \u003ch1\u003efooter Component\u003c/h1\u003e\n  \u003cinput type=\"text\" #input /\u003e\n  \u003cbutton (click)=\"myEvent.emit(input.value)\"\u003eClick me\u003c/button\u003e\n\u003c/section\u003e\n\n```\n\n**footer.component.scss**\n```css\n.footer {\n\n}\n```\n\n####**Create new service**####\n```bash\nng2cli -s todos\n```\nWill generate two files:\n\n**todos.service.ts**\n```javascript\nimport { Injectable } from '@angular/core';\nimport { Http } from '@angular/http';\n\n@Injectable()\nclass TodosService {\n\n  constructor(private http: Http) {\n  }\n\n}\n\n```\n**todos.service.spec.ts**\n```javascript\nimport {\n    beforeEachProviders,\n    inject,\n    fakeAsync,\n    tick\n} from '@angular/testing/core';\nimport { BaseRequestOptions, Http } from '@angular/http';\nimport { MockBackend } from '@angular/http/testing';\nimport { TodosService } from './todos.service';\n\ndescribe('Todos Service', () =\u003e {\n  beforeEachProviders(() =\u003e\n    [\n        BaseRequestOptions,\n        MockBackend,\n        {\n            provide: Http,\n            useFactory: function(backend, defaultOptions) {\n                return new Http(backend, defaultOptions);\n            },\n            deps: [MockBackend, BaseRequestOptions]\n        },\n        TodosService\n    ];\n  );\n\n\nit('should ...',\n    inject([TodosService], (todosService: TodosService) =\u003e {\n        expect(todosService).toBeTruthy();\n    }));\n    /**\n      When you are testing code that returns either a Promise or an RxJS Observable,\n      you can use the fakeAsync helper to test that code as if it were synchronous.\n      Promises are be fulfilled and Observables are notified immediately after you call tick()\n    **/\n    it('should make HTTP request',\n      inject([TodosService, MockBackend], fakeAsync((todosService:TodosService, mockBackend:MockBackend) =\u003e {\n        var res:Response;\n        mockBackend.connections.subscribe(c =\u003e {\n          expect(c.request.url).toBe('some.api.call');\n          let response = new ResponseOptions({body: '[{}, {}]'});\n          c.mockRespond(new Response(response));\n        });\n        todosService.get().subscribe(response =\u003e {\n          res = response;\n        });\n        tick();\n        expect(res.length).toBe(2);\n      }))\n    );\n });\n\n```\n####**Create new pipe**####\n```bash\nng2cli -p camel-case\n```\nWill generate two files:\n\n**camel-case.pipe.ts**\n```ts\nimport { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({name: 'camelCase'})\n\nexport class CamelCasePipe implements PipeTransform {\n\n  transform( value: any, args?: any): any {\n    return null;\n  }\n\n}\n\n```\n\n\n**camel-case.pipe.spec.ts**\n```ts\nimport { CamelCasePipe } from './camel-case.pipe';\n\ndescribe('Pipe: CamelCase', () =\u003e {\n  let pipe: CamelCasePipe;\n\n  beforeEach(() =\u003e {\n    pipe = new CamelCasePipe();\n  });\n\n  it('transforms \"abc\" to \"ABC\"', () =\u003e {\n    expect(pipe.transform('abc')).toEqual('ABC');\n  });\n\n});\n\n```\n\n####**Create new stateful pipe**####\n```bash\nng2cli --sp stateful\n```\nWill generate: ( with test file )\n```ts\nimport { Pipe, PipeTransform } from '@angular/core';\nimport { Http }                from '@angular/http';\nimport 'rxjs/operators/map';\n\n@Pipe({\n    name: 'stateful',\n    pure: false\n})\n\nexport class StatefulPipe {\n    private fetchedJson: any = null;\n    private prevUrl = '';\n    constructor(private _http: Http) { }\n\n    transform(url: string): any {\n        if (url !== this.prevUrl) {\n            this.prevUrl = url;\n            this.fetchedJson = null;\n            this._http.get(url)\n                .map(result =\u003e result.json())\n                .subscribe(result =\u003e this.fetchedJson = result);\n        }\n        return this.fetchedJson;\n    }\n\n}\n\n```\n####**Create new directive**####\n```bash\nng2cli -d my-directive\n```\nwill generate two files:\n\n**my-directive.directive.ts**\n```ts\nimport { Directive, ElementRef, Input, HostListener, HostBinding, Renderer } from '@angular/core';\n\n@Directive({\n  selector: '[myDirective]'\n})\n\nexport class MyDirectiveDirective {\n\n  constructor(el: ElementRef, renderer: Renderer) {\n     //el.nativeElement.style.backgroundColor = 'yellow';\n    // renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');\n  }\n\n  @HostBinding('attr.role') role = 'button';\n\n  @HostListener('mouseenter')\n  onMouseEnter() {\n\n  }\n\n}\n\n```\n\n**my-directive.directive.spec.ts**\n```ts\nimport {CommonModule} from '@angular/common';\nimport {Component} from '@angular/core';\nimport {ComponentFixture, TestBed, async} from '@angular/core/testing';\nimport {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';\nimport {expect} from '@angular/platform-browser/testing/matchers';\n\ndescribe('MyDirective Directive', () =\u003e {\n  let fixture: ComponentFixture\u003cany\u003e;\n\n  function getComponent(): TestComponent {\n    return fixture.componentInstance;\n  }\n\n  afterEach(() =\u003e { fixture = null; });\n\n  beforeEach(() =\u003e {\n    TestBed.configureTestingModule({\n      declarations: [TestComponent],\n      imports: [CommonModule]\n    });\n  });\n\n  it('should do some dom manipulation', async(() =\u003e {\n       const template = '\u003cdiv myDirective\u003ehello\u003c/div\u003e';\n       fixture = createTestComponent(template);\n\n       fixture.detectChanges();\n       expect(getDOM().querySelectorAll(fixture.nativeElement, 'span').length).toEqual(1);\n       expect(fixture.nativeElement).toHaveText('hello');\n     }));\n\n  });\n\n// Create a test component to test directives\n@Component({selector: 'test-cmp', template: ''})\nclass TestComponent {}\n\nfunction createTestComponent(template: string): ComponentFixture\u003cTestComponent\u003e {\n  return TestBed.overrideComponent(TestComponent, {set: {template: template}})\n      .createComponent(TestComponent);\n}\n\n```\n####**Create new stractural directive**####\n```bash\nng2cli --sd my-directive\n```\nWill generate: ( with test file )\n```ts\nimport {Directive, Input, TemplateRef, ViewContainerRef} from '@angular2/core';\n\n@Directive({ selector: '[myDirective]' })\n\nexport class MyDirectiveDirective {\n  constructor(\n    private templateRef: TemplateRef\u003cany\u003e,\n    private viewContainer: ViewContainerRef\n    ) { }\n\n  @Input() set myDirective(condition: boolean) {\n    if (!condition) {\n      this.viewContainer.createEmbeddedView(this.templateRef);\n    } else {\n      this.viewContainer.clear();\n    }\n  }\n\n}\n```\n\n##ngrx/store\n####**Create new ngrx reducer with actions**####\n```bash\nng2cli -r todos -a add_todo remove_todo\n```\nWill generate three files:\n\n***todos.actions.ts***\n```javascript\nexport const ADD_TODO = 'ADD_TODO';\nexport const REMOVE_TODO = 'REMOVE_TODO';\n```\n***todos.reducer.ts***\n```javascript\nimport { ActionReducer, Action } from '@ngrx/store';\nimport * as todosActions from './todos.actions';\n\nexport const todosReducer: ActionReducer\u003ctype\u003e = (state: type = [], action: Action) =\u003e {\n    switch (action.type) {\n      case todosActions.ADD_TODO\n        return [...state, action.payload];\n      case todosActions.REMOVE_TODO\n        return [...state, action.payload];\n      default:\n        return state;\n    }\n}\n\n```\n\n***todos.reducer.spec.ts***\n```javascript\nimport * as todosActions from './todos.actions';\nimport { todos } from \"./todos\";\n\ndescribe('The todos reducer', () =\u003e {\n    it('should return current state when x action is dispatched', () =\u003e {\n        const actual = todos(0, {type: todosActions.x});\n        const expected = 0;\n        expect(actual).toBe(expected);\n    });\n});\n\n```\n\n####**Create new actions**####\n```bash\nng2cli -n todos -a add_todo remove_todo\n```\n***todos.actions.ts***\n```javascript\nexport const ADD_TODO = 'ADD_TODO';\nexport const REMOVE_TODO = 'REMOVE_TODO';\n```\n\n### Change the default file types for html and style\nIf you are using something else from the default html and scss you can set this one time like this:\n```bash\nsudo ng2cli --html jade --style less\n```\n### PR ME!!!\nIf you want to fix/improve the templates please PR ME.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetanelbasal%2Fng2cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetanelbasal%2Fng2cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetanelbasal%2Fng2cli/lists"}