ngCustomTemplates
A development environment utility that makes it easy to use custom templates in Angular JS.
Install
$ npm i ng-custom-templates
Use
$ ng g ng-custom-templates:run [My Templates Name]
※ My Templates Name : You should create and use a template for each folder in the 'templates' folder.
Folder structure
[Before generating]
root |- e2e |- node_modules |- src <-- AngularJS source folder. |- app |- templates <-- The folder you need to create! |- demo <-- The templates to be used can be registered and used
[Generating]
$ ng g ng-custom-templates:run demo ? Class Name : CountryCode? Page Title : Country List? Install Path : /src/appCREATE src/app/routes/country-code/country-code-routing.module.ts CREATE src/app/routes/country-code/country-code.module.ts CREATE src/app/routes/country-code/services/country-code.service.ts
[After generating]
root |- e2e |- node_modules |- src |- app |- routes |- country-code <-- Generated folder |- templates |- demo
Conversion rules
Propertis of ngCustomTemplates
- className : The property to convert to the user specified class name.
- pageTitle : The property to convert to the user specified page name.
Usage - Folder & File
※ Rules of Use : __[PROPERTY_NAME]@[FUNCTION_NAME]__
※ Apply to : Folder & File
[Before generating]
__className@dasherize <- folder |- __className@dasherize.component.css <- files |- __className@dasherize.component.html |- __className@dasherize.component.js
[After generating]
country-code <- folder |- country-code.component.css <- files |- country-code.component.html |- country-code.component.js
Usage - Text in file
※ Rules of Use : <%= [FUNCTION_NAME]([PROPERTY_NAME]) %>
※ Apply to : Text in file
[Before generating]
class <%= %>Component const <%= %>;
[After generating]
const countryCode;
※ You can use the same syntax in all files such as html and css.
Functions
※ classify : Returns the UpperCamelCase form of a string.
; // 'InnerHTML' ; // 'ActionName' ; // 'CssClassName' ; // 'MyFavoriteItems'
※ camelize : Returns the lowerCamelCase form of a string.
; // 'innerHTML' ; // 'actionName' ; // 'cssClassName' ; // 'myFavoriteItems' ; // 'myFavoriteItems'
※ decamelize : Converts a camelized string into all lower case separated by underscores.
; // 'inner_html' ; // 'action_name' ; // 'css-class-name' ; // 'my favorite items'
※ dasherize : Replaces underscores, spaces, or camelCase with dashes.
; // 'inner-html' ; // 'action-name' ; // 'css-class-name' ; // 'my-favorite-items'
※ underscore : More general than decamelize. Returns the lower_case_and_underscored form of a string.
; // 'inner_html' ; // 'action_name' ; // 'css_class_name' ; // 'my_favorite_items'
※ capitalize : Returns the Capitalized form of a string.
; // 'InnerHTML' ; // 'Action_name' ; // 'Css-class-name' ; // 'My favorite items'