Question

我正在学习AngularJS，我找到了一个像这样的简单代码：

<!DOCTYPE html>
<html>
   <head>
    <meta charset='utf-8'>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app ng-init="name = 'World'">
    <h1>Hello, {{name}}!</h1>
</body>
</html>

未通过W3C验证测试，主要是因为存在非标准属性（ng-app，ng-init）。

问题是：我应该关心我的应用程序的W3C验证吗？我应该放弃AngularJS吗？

Answer 1

您可以使用标准的数据 - html5属性，据我所知，Angular的工作方式相同。类似的东西：

data-ng-app=""
data-ng-init="xxx"

在Angular中的工作方式相同，并由W3C验证。

另请注意：ng-app vs. data-ng-app, what is the difference?

除此之外，根据我使用标准的经验总是更好，当您的产品将被交付给可能的大群人（所以你建立一个网站或公共网络应用程序等）与不同的客户，版本等。如果您正在使用angular和phonegap构建SPA来创建一个移动应用程序，该应用程序将作为本机应用程序安装在移动设备上，标准可能不那么重要，重要的是它将适用于您的目标设备。 / p>

Answer 2

这里是W3C HTML5验证器维护者。我们已经讨论了如何处理更好地促进包含自定义属性的文档的验证，例如Angular的ng-*属性 - 属性虽然非标准仍然非常广泛和正确使用，因此让验证器发出“错误“关于他们的消息并没有真正帮助作者。

我已添加到HTML5验证程序中以缓解此问题的一项功能是“邮件过滤”功能，该功能可让您持续忽略对您不重要或有用的错误/警告消息。前端在这里：

http://validator.w3.org/nu/

在您提交要检查的文档后，在结果页面上您会看到邮件过滤按钮，如果按下该按钮，您将获得所有错误消息的列表使用“显示/隐藏”复选框设置。

validator screen shot showing Message Filtering button

更新2017-02-06：正在讨论的自定义属性的HTML规范提案

I recently added support for custom elements到HTML Checker（W3C验证程序） - 所以，为了添加对自定义属性的支持，我可以使用类似于我用来实现它的机制。

但是，在更新HTML规范以允许HTML规范之前，无法更改HTML检查器以允许自定义属性名称。为此，see the proposal being discussed in the HTML-spec issue tracker。

Answer 3

您是否“应该”关心取决于您自己。那里有很多页面which are not valid HTML。

HTML5允许custom attributes以data-作为前缀，因此您可以使用one of the other equivalent directives，如：

<span data-ng-bind="name"></span>

Answer 4

HTML约定有助于防止反模式并保持代码可维护。

呀。在这些方面，我最近在“为什么验证？”部分写了一篇关于HTML5验证器的“关于”部分的更多篇幅：

http://validator.w3.org/nu/about.html#why-validate

该部分文本的来源如下：

https://github.com/validator/validator/blob/master/site/nu-about.html#L160

欢迎使用建议的优化/添加提取请求。

我目前所拥有的是：

通过一致性运行HTML文档的核心原因   检查员很简单：抓住意想不到的错误 - 你可能会犯错误   否则错过了 - 这样你就可以解决它们。

除此之外，还有一些文件一致性要求（有效性规则）   在HTML规范中，可以帮助您和您的文档的用户   避免某些潜在的问题。解释理由   在这些要求背后，HTML规范包含以下两个部分：


rationale for syntax-level errors

rationale for restrictions on content models and on attribute values


总结这两部分的内容：


有些标记案例被定义为错误，因为它们是   可访问性，可用性，互操作性的潜在问题，   安全性或可维护性 - 或者因为它们可能导致贫困   性能，或者可能导致脚本失败的方式   很难排除故障。

除此之外，还定义了一些标记案例   因为它们可能会导致你遇到潜在的问题   HTML解析和错误处理行为 - 例如，你最终会结束   在DOM中出现一些不直观，意外的结果。


验证您的文档会提醒您注意这些潜在问题。

Answer 5

在角度应用中使用前缀“data-”。例如：

<body data-ng-app data-ng-init="name = 'World'">
   <h1>Hello, {{name}}!</h1>
</body>

Answer 6

您可以使用构建系统GulpJs并尝试我编写的插件，该插件完全符合您的要求：

将ng-directives转换为data-ng-directives，这是W3C验证的规范。

经过严格测试，可在此处找到：https://github.com/pgilad/gulp-angular-htmlify

https://www.npmjs.com/package/gulp-angular-htmlify

Answer 7

您可以install with npm：

$ npm install --save-dev gulp-angular-htmlify

Answer 8

这取决于项目的大小。

通常，HTML约定有助于防止反模式并保持代码可维护。

这个特定的规则（要求标签以-data为前缀作为有效属性）在我看来有点无关紧要，因为它往往会促使额外的标记无用。

我想说，如果你在一个有很多开发人员的大项目中工作，坚持根据WC3惯例验证你的HTML。否则，没有真正的优势。

Answer 9

尝试使用https：

在安全的domail上运行脚本

请使用https：

参考下文

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app ng-init="name = 'World'">
    <h1>Hello, {{name}}!</h1>
</body>
</html>

我应该关心W3C验证吗？

9 个答案:

更新2017-02-06：正在讨论的自定义属性的HTML规范提案