ngx-gethtml
v0.0.3
Published
You can use raw html, javascript, stylesheet in Angular 2+ HTML template with this library.
Downloads
6
Maintainers
Readme
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>