Create Angular Template
Transform AngularJS templates into Angular syntax. Currently supports Angular > 5.x.
How it works
Before:
<div>
<p ng-if="vm.showDetails">Some details</p>
<ul>
<li ng-repeat="item in vm.items"></li>
</ul>
</div>
After:
<div>
<p *ngIf="showDetails">Some details</p>
<ul>
<li *ngFor="let item of items"></li>
</ul>
</div>
Usage
Installation
Install create-angular-template
as typical npm package:
npm install create-angular-template
Basic usage:
const { transformTemplate } = require('create-angular-template');
const angularTemplate = transformTemplate(template, options);
- template (string) - AngularJS template
- options (object) - configure transformation process
Options:
stripTagPrefix
(string) - used to strip prefixes likedata-ng-if
(default:data
)aliasForThis
(string) - used in AngularJS to define scope of given variable (default:$ctrl
)format
(string) - format of input template (default:html
, supported: html | pug)bindToCurlyBraces
(boolean) - transform ng-bind to curly braces binding (default:false
)classListToRemove
(array) - array of classes which should be removed from elements (default:['ng-hide']
)
Supported transformations
Syntax changes:
Based on AngularJS to Angular Quick Reference CheatSheet
ng-click
->(click)
ng-submit
->(ngSubmit)
ng-model
->[(ngModel)]
ng-if
->*ngIf
ng-switch
->[ngSwitch]
ng-switch-when
->*ngSwitchCase
ng-switch-default
->*ngSwitchDefault
ng-class
->[ngClass]
ng-hide
->[hidden]
ng-show
->[hidden] with negation
ng-bind
->[innerText]
(by default), or{{ }}
(optionbindToCurlyBraces
set totrue
)ng-bind-html
->[innerHTML]
ng-hide
->[hidden]
ng-repeat="item in items"
->*ngFor="let item of items"
ng-href
->[href]
ng-src
->[src]
Extras:
Prefixes cleanup:
data-ng-if
->*ngIf
x-ng-hide
->[hidden]
'Alias for this' cleanup - ($ctrl, vm, etc.):
ng-hide="$ctrl.isHidden"
->[hidden]="isHidden"
Typescript integration
Starting from 1.1.0 it's easier to use this library inside of TypeScript projects - there's a dedicated file containing type definitions which can help you write typed code.
Example (.ts):
import {transformTemplate, TransformationOptions} from 'create-angular-template';
const template = '<div ng-if="$ctrl.isVisible"></div>';
const options: TransformationOptions = {
format: 'html',
aliasForThis: '$ctrl'
};
const transformed = transformTemplate(template, options);
Would you like to see CLI here? Check Up!:
ng-up - Angular Upgrade Toolkit