11

AngularJS directives have ng- prefixed to them. Why does it insist on making use of a prefix instead of using an actual xml namespace?

From AngularJS's documentation:

If you choose to use the old style directive syntax ng: then include xml-namespace in html to make IE happy. (This is here for historical reasons, and we no longer recommend use of ng:.)

Using something like this does seem to work:

<html xmlns:ng="http://angularjs.org" ng:app="my-app">

as is evident from this jsFiddle.

But it does not recommend using it and supports it just for historical reasons. Can someone point me to what those reasons might be? Coming from a Flex background, I think XML namespaces are great and I would love to make use of them, but perhaps there is are strong reasons for Angular to go with the prefix approach?

Himanshu
  • 399
  • 3
  • 14
  • This is curious for using AngularJS with SVG, because SVG uses an XML parser. For instance, data-* and ng-* are not legal in SVG (tho some browsers might allow it). However, ng:* is legal in SVG. http://stackoverflow.com/questions/15532371/do-svg-docs-support-custom-data-attributes – John Henckel Apr 07 '17 at 07:54

2 Answers2

4

At risk of sounding glib, because angular is focussed on extending html functionality, rather than xml?

ryan j
  • 310
  • 2
  • 9
4

I've wondered about this myself. Consider two independent projects, "Widget Factory" and "Wombat Framework" that each develop directive x. It's preferred practice to prefix directive names to avoid namespace conflicts, but in this case, each might still end up defining a wf-x.

What happens if I use <div wf-x="something"></div> in an application containing both modules? Interestingly, angular will attach both, linking each in descending priority order. But the odds of this producing a correct result are low. Angular will raise an error if both directives try to add a controller, and the semantics of the two directives and what they expect for the value of the attribute and structure of the element could easily conflict with one another.

In XML, this problem is solved with namespaces. <div xmlns:wf1="..." wf1:x="something"></div> or <wf1:x xmlns:wf1="..."></wf1:x> aren't pretty, but they clearly describe which directive we intend to use.

Why doesn't angular support this? XML namespaces are uncommon and may not be well-supported in general HTML, and there may be technical challenges with parsing. Directives are supported in comments and CSS classes as well as elements and attributes, and : would have to be mangled somehow in a class name. The simplest answer though may be that it's not a common enough problem yet to require anything more advanced than the prefixes we see in use today. It should be noted that angular's current approach is the one recommended by Web Components. As that standard evolves, I would expect angular to track it. There's some discussion on this topic in the Polymer group as well.

Nathan Williams
  • 951
  • 9
  • 12
  • Judging from the flexibility of attribute naming, my guess is Angular is not parsing in a namespace-aware manner, but is instead applying a text transform to the fully-qualified attribute name, stripping delimiters like ":" and applying camelCasing. They probably recommend against ng: because it could lead you to believe you can use namespaces as XML defines them. – Rich Remer Feb 01 '15 at 19:55