更新记录

0.0.1(2020-12-27) 下载此版本

添加 Angular 和 Typescript 的代码块


平台兼容性

HBuilderX最低兼容版本
2.7.0

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后,卸载时需手动卸载,详细教程参考:如何手动卸载插件


代码块前缀

前缀 描述
ng- Angular Snippets
fx- Angular Flex Layout Snippets
ngrx- Angular NgRx Snippets
ngxs- Angular Ngxs Snippets
m- Angular Material Design Snippets
rx- RxJS Snippets for both TypeScript and JavaScript
sw- Service Workers Snippets
t- Test Snippets
e- Test Expect Snippets
pwa- Progressive Web Applications Snippets

代码块后缀

后缀 描述
-cheatsheet Cheat Sheet

TypeScript & Html代码块

代码块 描述
"\"\": \"\", ng-content
cli-cheatsheet Cli Cheat Sheet
e-atbr ExpectAsync toBeResolved
e-ntb Expect Not toBe
e-ntbd Expect not toBe Defined
e-ntbf Expect not toBe Falsy
e-ntbn Expect Not toBeNull
e-ntbt Expect not toBe Truthy
e-ntbu Expect not toBe Undefined
e-nthbc Expect Not toHaveBeenCalled
e-ntm Expect Not toMatch
e-ntmr Expect Not toMatch regex
e-tb Expect toBe
e-tbct Expect toBeCloseTo
e-tbd Expect toBe Defined
e-tbf Expect toBe Falsy
e-tbgt Expect toBeGreaterThan
e-tbgtoe Expect toBeGreaterThanOrEqual
e-tbio Expect toBeInstanceOf
e-tblt Expect toBeLessThan
e-tbltoe Expect toBeLessThanOrEqual
e-tbn Expect toBeNull
e-tbt Expect toBe Truthy
e-tbu Expect toBe Undefined
e-tc Expect toContain
e-thbc Expect toHaveBeenCalled
e-thbcw Expect toHaveBeenCalledWith
e-thlrw Expect toHaveLastReturnedWith(value)
e-thnrw Expect toHaveNthReturnedWith(nthCall, value)
e-thp Expect toHaveProperty
e-thrt Expect toHaveReturnedTimes(2)
e-thrw Expect toHaveLastReturnedWith(value)
e-tm Expect toMatch
e-tmo Expect toMatchObject
e-tmr Expect toMatch regex
e-tms Jest Expect toMatchSnapshot
e-tse Expect toStrictEqual
fx-col Flex Layout Column
fx-col-element Flex Layout Column with Element
fx-col-reverse Flex Layout Reverse Column
fx-import Flex Layout Import
fx-item Flex Layout Item
fx-item-align Flex Layout Item with fxFlexAlign
fx-item-fill Flex Layout Item with fxFlexFill
fx-item-offset Flex Layout Item with fxFlexOffset
fx-item-order Flex Layout Item with fxFlexOrder
fx-layout Flex Layout Property
fx-layout-align Flex Layout Align Property
fx-layout-gap Flex Layout Gap Property
fx-row Flex Layout Row
fx-row-reverse Flex Layout Reverse Row
m-accordion> Material Accordion
m-button Rectangular Material button w/ no elevation.
m-button-fab Circular button w/ elevation.
m-button-fab-mini Small circular button w/ elevation.
m-button-flat Rectangular Material flat button.
m-button-icon Circular Material button with a transparent background
m-button-raised Rectangular Material button w/ elevation.
m-button-stroked Rectangular Material button with a transparent background and a stroke.
m-button-toggle Material toggle button
m-card Material Basic Card
m-card-full Material Card
m-checkbox Material Checkbox
m-checkbox-ngmodel Material Checkbox ngmodel
m-chip Material Chip
m-chip-list Material Chip List
m-chip-list-stacked Material Chip Stacked List
m-datepicker Material Datepicker
m-divider Material Divider
m-divider-inset Material Inset Divider
m-divider-vertical Material Vertical Divider
m-drag-drop-box Material drag drop box
m-expansion-panel Material Expansion Panel
m-grid-list Material Grid List
m-icon Material Icon
m-icon-badge Material Icon with a Badge
m-icon-fontawesome Material Font Awesome Icon
m-icon-svg Material SVG Icon
m-input Material Input Textbox
m-list Material List
m-list-item Material List Item
m-list-ngfor Material List ngFor
m-paginator Material Paginator
m-progress-bar Material Determinate Progress Bar
m-progress-bar-buffer Material Buffer Progress Bar
m-progress-bar-indeterminate Material indeterminate Progress Bar
m-progress-bar-query Material Query Progress Bar
m-radiobutton Material Radio Button
m-radiobutton-option Material Radio Button Option
m-select Material Select
m-slide-toggle Material Slide toggle
m-slider Material Slider
m-slider-thumbLabel Material Slider thumbLabel
m-slider-tickInterval Material Slider tickInterval
m-slider-tickInterval-auto Material Slider tickInterval Auto
m-slider-vertical Material Vertical Slider
m-spinner Material Determinate Spinner
m-spinner-indeterminate Material Indeterminate Spinner
m-step Material Vertical Stepper
m-stepper-horizontal Material Horizontal Stepper
m-stepper-vertical Material Vertical Stepper
m-tab Material Tab
m-tab-group Material Tab Group
m-table Material Table
m-table-column Material Table Column
m-toolbar Material toolbar
m-toolbar-multiRow Material Toolbar with multiple rows
m-toolbar-row Material toolbar row
m-tooltip Material Tooltip
m-tooltip-position Material Tooltip position
m-tooltip-with-position Material Tooltip with position
nest-controller Nest Controller
nest-dto Nest Data Transfer Object with Swagger
nest-service Nest Service
nest-swagger-main Nest Add Swagger to main.ts
ng-afterContentChecked Lifecycle hook: Called after every check of the component's or directive's content
ng-afterContentInit Lifecycle hook: Called after ngOnInit when the component's or directive's content has been initialized
ng-afterViewChecked Lifecycle hook: Called after every check of the component's view. Applies to components only
ng-afterViewInit Lifecycle hook: Called after ngAfterContentInit when the component's view has been initialized
ng-binding-oneway Property: [property]=\"expression\"
ng-binding-twoway Two-way data binding with the NgModel
ng-bootstraping Bootstraping example
ng-button A button element with a click event
ng-button-submit A submit button element with a click event
ng-class CSS class
ng-click Click event
ng-component Component with template and style urls
ng-component-inline Component with inline Template and Styles
ng-component-value-accessor Angular Component With NG_VALUE_ACCESSOR
ng-conf The World's Original Angular Conference
ng-container Angular Container
ng-container-component Angular Container with *ngContainerOutlet
ng-container-ngfor Angular Container with *ngFor
ng-container-template Angular Container with *ngTemplateOutlet
ng-controller Use component instead.
ng-debug pre obj pipe json
ng-debug-async pre obj pipe async pipe json
ng-directive Directive template
ng-directive-attribute Attribute directive
ng-directive-css CSS directive
ng-doCheck Lifecycle hook: Called every time that the input properties of a component or a directive are checked
ng-event Event: (event) = \"onEvent()\"
ng-filter For performance reasons, no comparable pipe exists in Angular 2. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.
ng-for For-loop directive
ng-for-index For-loop directive with index
ng-for-li For-loop directive with li element
ng-for-trackBy For-loop directive with trackBy
ng-girls Angular Girls
ng-hide Usage: Bind to the hidden property.
ng-href Usage: Bind to the href property.
ng-http-get Http observable get request
ng-http-get-post Http observable get & post request
ng-http-interceptor Intercept an outgoing HttpRequest and optionally transform it or the response.
ng-httpClient-get HttpClient observable get request
ng-if If directive: *ngIf=\"expression\"
ng-if-else v4: If else directive: *ngIf=\"expression; else\"
ng-if-then-else v4: If then else directive: *ngIf=\"expression; then; else\"
ng-import import module or component from path;
ng-input Class Input Property
ng-interpolation Interpolation: {{ interpolation }}
ng-material-module App Material Module
ng-model ngModel directive: [(ngModel)]=\"name\"
ng-module Feature Module
ng-module-root App root module
ng-ngOnChanges Lifecycle hook: Called before any other lifecycle hook
ng-onDestroy Lifecycle hook: Called before the instance is destroyed
ng-onInit Lifecycle hook: Called after the constructor
ng-orderBy For performance reasons, no comparable pipe exists in Angular 2. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
ng-output Class Output Event
ng-pipe Pipe template
ng-pipe-async Async pipe - Usage: observable_or_promise_expression | async
ng-pipe-currency Currency pipe - Usage: money | currency:'EUR'
ng-pipe-date Date pipe - Default format: 09/15/1971
ng-pipe-date-custom Date pipe - Format: \"MM/dd/yy\" = 09/15/71
ng-pipe-date-full Full date pipe - Format: Wednesday, September 15, 1971
ng-pipe-date-short Short date pipe - Format: 09/15/1971
ng-pipe-decimal Decimal pipe - Usage: number_expression | decimal[:digitInfo]
ng-pipe-example Angular pipe example
ng-pipe-json Json pipe - Usage: object | json
ng-pipe-lowercase Lowercase pipe
ng-pipe-percent Percent pipe - Usage: number_expression | percent[:digitInfo]
ng-pipe-slice Slice pipe - Usage: array_or_string_expression | slice:start[:end]
ng-pipe-titlecase v4: Titlecase pipe
ng-pipe-uppercase Uppercase pipe
ng-property Property: [property]=\"expression\"
ng-repeat Use ngFor instead.
ng-route-feature Angular Route Feature
ng-route-guard-canactivate CanActivate Guard Route
ng-route-guard-canactivatechild CanActivateChild Route
ng-route-guard-candeactivate CanDeactivate Guard Route
ng-route-guard-canload CanLoad Guard Route
ng-route-guard-resolve Resolve Guard Route
ng-route-lazy Router link
ng-route-lazy-ivy Router link
ng-router Router template
ng-router-appmodule Routes to include in root module
ng-router-attribute Router link
ng-router-featuremodule Routes to include in a feature module
ng-router-link Router link
ng-router-linkActive Router active link
ng-router-outlet Router outlet element
ng-router-outlet-name Router outlet element with name
ng-service Basic service
ng-show Usage: Bind to the hidden property.
ng-src Usage: Bind to the src property.
ng-style CSS style
ng-switch Switch template
ng-template Angular template
ng-validator Angular validator snippet
ngrx-action-const ngRx Single action
ngrx-action-creator ngRx Single action with const
ngrx-action-creator-enum ngRx Single action creator for enum
ngrx-actions ngRx Actions class
ngrx-actiontype-enum ngRx enum action type
ngrx-actiontypes-enum ngRx enum action types
ngrx-effect ngRx Effect
ngrx-module ngRx Root Module
ngrx-reducer ngRx Reducer
ngrx-util ngRx Util
ngxs-action Ngxs Action
ngxs-action-payload Ngxs Action with Payload
ngxs-select Ngxs Select
ngxs-state Ngxs State
ngxs-state-model Ngxs State Model
ngxs-store Ngxs Store
ngxs-store-import Ngxs Import Store
nx-cheatsheet Nx Cheat Sheet
nx-ngrx-cheatsheet Nx Cheat Sheet
pwa-link-manifest PWA Link Manifest
pwa-manifest PWA Json Manifest
rx-import-observable RxJS Import Observable
rx-import-operator RxJS Import an Operator
rx-import-subject RxJS Import Subject
rx-mergeMap RxJS MergeMap Example
sw-register Register Service Worker
sw-register-and-check Register Service Worker and Check
t-afterAll afterAll
t-afterEach afterEach
t-beforeAll beforeAll
t-beforeEach beforeEach
t-component-async Test Async Component
t-component-sync Test Synchronous Component
t-component-sync-old Test Synchronous Component
t-describe Describe
t-describe-it Describe, It & Expect
t-directive Test a directive
t-it It
t-ite It and Expect
t-module Test Module
t-pipe Test a pipe
t-service Test a service
wat A lightning talk by Gary Bernhardt from CodeMash 2012. ng-wat talk by Shai Reznik in 2015

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问