ng-md-components
Markdown templateUrl
support for Angular
Usage
$ ng-md-components --help
OPTIONS
-d, --directory=directory (required) Directory to recurse through
-e, --ext=ext [default: .md] File extension to look for
-h, --help show CLI help
-v, --version show CLI version
Commands
Example
Setup
Let's create an Angular application, using Markdown rather than HTML:
ng new --skip-install --interactive=false a && cd $_
for c in {a..z}; do ng g m "$c"; ng g c "$c" & done
fd .html -exec bash -c 'f=${0%.*}; pandoc "$0" -o "$f.md"; rm "$0"' {} \;
fd .component.ts -exec sed -i 's/component.html/component.md/g' {} \;
fd
, bash
and pandoc
Reversal, using fd .md --exclude README.md -exec bash -c 'f=${0%.*}; pandoc "$0" -o "$f.html"; rm "$0"' {} \;
fd .component.ts -exec sed -i 's/component.md/component.html/g' {} \;
Disadvantages: the fd
and bash
aren't really cross-platform, and pandoc
doesn't do code-highlighting. Also there are no helpful hints saying what's generated, and no explicit way of referencing markdown templateUrl
.
ng-md-components
Reversal, using Open a file, let's use src/app/a/a.component.ts
:
import { Component, OnInit } from '@angular/core';
// templateUrl: './a.component.md' <-- add this line
@Component({
selector: 'app-a',
templateUrl: './a.component.html', // <-- this gets generated
styleUrls: ['./a.component.css']
})
export class AComponent {}
As you can see, we have added one line, a comment. Note that our simple parsing means the first templateUrl
will be converted into HTML.
Alternative approaches
Extend @Component
or create new decorator.
Advantages
- Can be used without any new precompilation stage
Disadvantage
- Bundle size
- Dynamic rather than static, so runtime performance is impacted