Ngx-gethtml NPM

ngx-gethtml

Angular2+のプロジェクトにおいて、HTML、JavaScript、スタイルシート等を直接記述することを支援するためのライブラリです。

English | 日本語

インストール

npm i ngx-gethtml --save

クイックスタート

1. `NgxGetHTMLModule`をインポート:

AngularプロジェクトのAppModuleにNgxGetHTMLModuleをインポートします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxGetHTMLModule } from 'ngx-gethtml';

@NgModule({
    imports: [
        BrowserModule,
        NgxGetHTMLModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule

SharedModuleを利用する場合、 SharedModuleの中にNgxGetHTMLModuleをエクスポートすることで他のモジュールに再度インポートする必要はありません。

@NgModule({
    exports: [
        CommonModule,
        NgxGetHTMLModule
    ]
})
export class SharedModule { }

2. HTMLテンプレートで`<ngx-gethtml>` & `<ngx-script>`を利用:

<ngx-gethtml> & <ngx-script>コンポーネントを利用し、HTML、JavaScript、スタイルシートをHTMLテンプレートに直接書くことができます。また、ひとつのHTMLテンプレートには複数の<ngx-gethtml> & <ngx-script>が利用できます。
ただし<ngx-script>は<ngx-gethtml>の中に書かなければなりません。

例:

<h1>Demo</h1>
<div>
    <ngx-gethtml>
        <!-- jQuery インポート -->
        <ngx-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></ngx-script>
        <div id="loadResult"></div>
        <ngx-script>
            // jQueryを利用し、インポート完了の結果を表示する。
            $('#loadResult').html('jQuery loaded successfully.');
            // windowオブジェクトの属性として関数を定義したら、他のところ（JavaScript、HTML）から呼び出せることになる。
            // {{"{"}}のようにエスケープすることが必須。
            window.test = function() {{"{"}}
                alert('alert message.');
            };
        </ngx-script>
        <!-- call function -->
        <button onclick="test()">Click</button>
    </ngx-gethtml>
</div>

ドキュメント

`<ngx-gethtml>`

<ngx-gethtml>は単純に<ngx-script>と他のHTMLソースを囲むだけのものです。 <ngx-gethtml>の中で定義した<ngx-script>は記述した順番に通りに実行されます。
注意: 同じHTMLテンプレートに定義した<ngx-gethtml>の中の<ngx-script>は同時に実行されます。

<ngx-gethtml>
    <h3>Title</h3>
    <p>Some text.</p>
</ngx-gethtml>

スタイルシートのインポートや<style>を使ったスタイルの定義もそのまま記述できます。

<ngx-gethtml>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
    p {
        background-color: yellowgreen;
    }
    </style>
<ngx-gethtml>

`<ngx-script>`

<script>と同じくsrc属性を追加することで外部のJavaScriptファイルをインポートできます。type="text/javascript"等他の属性を定義する必要はありません。

<ngx-gethtml>
    <ngx-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></ngx-script>
<ngx-gethtml>

直接JavaScriptコードを書くことができます。

<ngx-gethtml>
    <ngx-script>
        alert('Hello, world!');
    </ngx-script>
<ngx-gethtml>

エスケープ

"{" はAngularの文法のひとつであるため、{{"{"}}にエスケープしなければなりません。
注意: "}" は文法でないためエスケープする必要がありません。

<ngx-gethtml>
    <ngx-script>
        function test() {{"{"}}
            // some code.
        }
    </ngx-script>
<ngx-gethtml>

JavaScript変数、関数のスコープ

セキュリティを向上するため、<ngx-script>の中に定義されたJavaScript変数、関数の有効範囲は<ngx-script> と </ngx-script>の中に限定しています。
他の<ngx-script>の中、もしくはイベントハンドラーとしてHTMLに使いたい場合には、windowオブジェクトの属性として定義する必要があります。

<ngx-gethtml>
    <ngx-script>
        window.test = function() {{"{"}}
            alert('alert message.');
        };
        window.msg = 'some message.'
    </ngx-script>
    <ngx-script>
        alert(msg);
    </ngx-script>
    <!-- call function -->
    <button onclick="test()">Click</button>
<ngx-gethtml>