web-dev-qa-db-ja.com

検証方法angular HTMLテンプレート

angular HTMLテンプレートでほぼ有効なポリグロット（X）HTML 5を書き込もうとしています。次のようになります：

<div class="some-class">
  <input type="checkbox" data-ng-model="variable" />
  <foo-directive data-ng-if="variable"></foo-directive>
</div>

タグを正しく閉じるのを忘れて、ブラウザが壊れることがあります。そのため、ツールチェーンにバリデーターを含めたいと思います。

問題は次のとおりです。このケースを処理できるバリデーターがわかりません。 XMLバリデーターは通常DTDを必要とし、HTMLバリデーターはコードで使用されるangularディレクティブについて文句を言います。

たぶんvalidatorは間違った単語であり、私は本当にlinterが欲しいです。私がしたい唯一の本当のことは、すべての開始タグに一致する終了タグがあることを確認することです。他のすべてはボーナスです。

そのようなバリデーターを知っていますか？

[〜＃〜] note [〜＃〜]：私は主に、自動テストと統合できるコマンドラインツールを検索します。しかし、Webサービスも役立つかもしれません。

angularjsxmlvalidationxhtmlpolyglot-markup
15
tobib

htmlhint はオプションなので、コマンドラインから here のように使用できます（もちろん、最初にnpm installして、PATHに含まれていることを確認する必要がありますnode_modules/.bin）：

htmlhint test.html

特定のオプションをテストするには：

htmlhint -r tag-pair,attr-no-duplication test.html

または、オプションが構成ファイルにある場合：

htmlhint -c config-file test.html

私はAngularで次のオプションを使用します：

  • tag-pair：タグが適切に閉じられていることを確認してください
  • attr-no-duplication：要素に重複する属性はありません
11
Nikos Paraskevopoulos

html-angular-validate プロジェクトは私が使用しているものであり、これには最適だと思います。 W3C HTML検証サービスを使用し、基本的に、know angularのもの（通常は無効なHTMLであるng-*で始まるプロパティなど）に関するエラーを無視します。

gulp-html-angular-validate を使用してgulp経由で実行します

カスタム要素と属性ディレクティブについて知るように構成する必要があります。これは、常に新しいディレクティブを追加する場合は少し面倒になる可能性があります...ただし、これを実行すると、非常にうまく機能し、私のチームを救うことができます。単純なタイプミスや一般的なエラーを見つけることで何度も！

0
Chris Barr