ngCustomTemplates

A development environment utility that makes it easy to use custom templates in Angular JS.

Install

$ npm i -D 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 for each folder.

[Generating]

$ ng g ng-custom-templates:run demo

? Class Name (ex> CountryCode) :  CountryCode
? Page Title (ex> Country List) :  Country List
? Install Path :  /src/app
CREATE src/app/routes/country-code/country-code-routing.module.ts (218 bytes)
CREATE src/app/routes/country-code/country-code.module.ts (432 bytes)
CREATE src/app/routes/country-code/services/country-code.service.ts (161 bytes)

[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]

export class <%= classify(className) %>Component {
  const <%= camelize(className) %>;
}

[After generating]

export class CountryCodeComponent {
 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.

 classify('innerHTML');             // 'InnerHTML'
 classify('action_name');           // 'ActionName'
 classify('css-class-name');        // 'CssClassName'
 classify('my favorite items');     // 'MyFavoriteItems'

※ camelize : Returns the lowerCamelCase form of a string.

 camelize('innerHTML');             // 'innerHTML'
 camelize('action_name');           // 'actionName'
 camelize('css-class-name');        // 'cssClassName'
 camelize('my favorite items');     // 'myFavoriteItems'
 camelize('My Favorite Items');     // 'myFavoriteItems'

※ decamelize : Converts a camelized string into all lower case separated by underscores.

 decamelize('innerHTML');           // 'inner_html'
 decamelize('action_name');         // 'action_name'
 decamelize('css-class-name');      // 'css-class-name'
 decamelize('my favorite items');   // 'my favorite items'

※ dasherize : Replaces underscores, spaces, or camelCase with dashes.

 dasherize('innerHTML');            // 'inner-html'
 dasherize('action_name');          // 'action-name'
 dasherize('css-class-name');       // 'css-class-name'
 dasherize('my favorite items');    // 'my-favorite-items'

※ underscore : More general than decamelize. Returns the lower_case_and_underscored form of a string.

 underscore('innerHTML');           // 'inner_html'
 underscore('action_name');         // 'action_name'
 underscore('css-class-name');      // 'css_class_name'
 underscore('my favorite items');   // 'my_favorite_items'

※ capitalize : Returns the Capitalized form of a string.

 capitalize('innerHTML');           // 'InnerHTML'
 capitalize('action_name');         // 'Action_name'
 capitalize('css-class-name');      // 'Css-class-name'
 capitalize('my favorite items');   // 'My favorite items'

References

Total Guide To Custom Angular Schematics

Schematics: Building blocks