Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Chris2011/netbeans-angular2-code-templates

Code templates for Angular 2 in Netbeans. Templates exists for TypeScript and HTML.
https://github.com/Chris2011/netbeans-angular2-code-templates

Last synced: 3 months ago
JSON representation

Code templates for Angular 2 in Netbeans. Templates exists for TypeScript and HTML.

Awesome Lists containing this project

README 

        
Angular TypeScript Snippets for NetBeans


Now Updated for Angular 4.3.0 release



Biggest change


Now I use camelCase, because NetBeans has a problem when you type a-.

The code completion will disappear. So this will not happen with camelCase.



Now I use a or aNg and rx as a prefix, to be faster while typing. 



It is based on the Visual Studio Code implementation: https://github.com/johnpapa/vscode-angular2-snippets

This extension for NetBeans adds snippets for Angular for TypeScript and HTML.



TypeScript (old screenshot)


Use Extension



HTML (old screenshot)


Use Extension



Usage


Type part of a snippet, press enter or tab, and the snippet unfolds.



TypeScript Angular Snippets


    

        
  1. 

    aComponent - component
    2. 

        
  2. 

    aComponentInline - component with inline template
    3. 

        
  3. 

    aComponentRoot - root app component
    4. 

        
  4. 

    aDirective - directive
    5. 

        
  5. 

    aGuardCanActive - CanActivate guard
    6. 

        
  6. 

    aGuardCanActiveChild - CanActivateChild guard
    7. 

        
  7. 

    aGuardCanDeactivate - CanDeactivate guard
    8. 

        
  8. 

    aHttpGet - http.get with Rx Observable
    9. 

        
  9. 

    aHttpclientGet - httpClient.get with Rx Observable
    10. 

        
  10. 

    aHttpInterceptor - Empty Angular HttpInterceptor for HttpClient

    11. 

        
  11. 

    aHttpInterceptorHeaders - Angular HttpInterceptor that sets headers for HttpClient

    12. 

        
  12. 

    aHttpInterceptorLogging - Angular HttpInterceptor that logs traffic for HttpClient

    13. 

        
  13. 

    aModule - module
    14. 

        
  14. 

    aModuleRoot - root app module
    15. 

        
  15. 

    aModuleRouting - routing module file (forChild)
    16. 

        
  16. 

    aOutputEvent - @Output event and emitter
    17. 

        
  17. 

    aPipe - pipe
    18. 

        
  18. 

    aRoutePath404 - 404 route path
    19. 

        
  19. 

    aRoutePathDefault - default route path
    20. 

        
  20. 

    aRoutePathEager - eager route path
    21. 

        
  21. 

    aRoutePathLazy - lazy route path
    22. 

        
  22. 

    aRouterEvents - listen to one or more router events
    23. 

        
  23. 

    aService - service
    24. 

        
  24. 

    aServiceHttp - service with Http

    25. 

        
  25. 

    aServiceHttpclient - service with HttpClient

    26. 

        
  26. 

    aCtorSkipSelf - angular NgModule's skipself constructor
    27. 

        
  27. 

    aSubscribe - Rx Observable subscription
    28. 

        
  28. 

    aResolver - resolver
    29. 




TypeScript RxJS Snippets


    

        
  1. 

    rxObservable - Rx Observable import
    2. 

        
  2. 

    rxSubject - Rx Subject import
    3. 

        
  3. 

    rxReplaySubject - Rx ReplaySubject import
    4. 

        
  4. 

    rxBehaviorSubject - Rx BehaviorSubject import
    5. 

        
  5. 

    rxAddOperator - Rx add operator import
    6. 

        
  6. 

    rxAddObservable - Rx add observable import
    7. 




HTML Snippets


    

        
  1. 

    aClass - [class] binding
    2. 

        
  2. 

    aNgClass - ngClass

    3. 

        
  3. 

    aNgContainer - <ng-container> element
    4. 

        
  4. 

    aNgContent - <ng-content> element
    5. 

        
  5. 

    aNgFor - *ngFor

    6. 

        
  6. 

    aNgForAsync - *ngFor with async
    7. 

        
  7. 

    aNgForTrackBy - *ngFor with trackBy
    8. 

        
  8. 

    aNgIf - *ngIf

    9. 

        
  9. 

    aNgIfElse - *ngIf with else

    10. 

        
  10. 

    aNgModel - ngModel

    11. 

        
  11. 

    aNgStyle - ngStyle

    12. 

        
  12. 

    aNgSwitch - ngSwitch

    13. 

        
  13. 

    aNgTemplate - <ng-template> element
    14. 

        
  14. 

    aPrej - show the JSON form of a model
    15. 

        
  15. 

    aPreja - show the JSON form of a model, using async
    16. 

        
  16. 

    aRouterLink - routerLink

    17. 

        
  17. 

    aRouterLinkParam - routerLink with a route parameter
    18. 

        
  18. 

    aSelect - <select> control
    19. 

        
  19. 

    aStyle - [style] binding
    20. 




How to install


Install the plugin.


Test it into a TypeScript or HTML file (Examples: typescript shortcut aPipe + TAB => import { Pipe, PipeTransform..., html shortcut aNgSwitch + TAB => <div [ngSwitch]=...", ...)



Known Bugs


HTML code completion doesn't include the code templates, but the code templates are working well. A Ticket was created: https://netbeans.org/bugzilla/show_bug.cgi?id=250321