I wondered why Polymer elements need a dash in custom elements name like <my-component> while this is not necessary for Angular components especially as Angular components also use ShadowDOM.
** Edit**
It doesn't even seem to be suggested good practice in Angular.
The HTML spec allows you to use unknown tags (<tab>, <panel>) without the HTML parser throwing a fit. To their benefit, Angular uses this behavior for their directives to make the components like native.
Tags that don't have a - inherit from HTMLUnknownElement. There's a good explanation of the upgrade process here: HTML5Rocks - Custom Elements - How elements are upgraded
Since Angular directives were designed in a time before the Custom Elements spec existed, they don't use a -. It's the standard that requires element names contain a -.
The dash is not required by Angular since there is no technical reason to require it. However, all large projects I have worked on prefix all components and directives with a two character and then dash prefix, e.g "ab-tab".
First, using dashes in names makes your syntax compatible with the Custom Elements standard, although Angular doesn't depending the spec.
Second, it helps with organization. Standard Angular directives are all prefixed with 'ng-'. By using your own prefix, people reading your code will be able to quickly distinguish between components from different libraries.
Related
I'm using protractor and locators like ng-bind and I got curious.
What does the "ng" stand for?
I did a bit of hunting and didn't find the definition.
I don't know much about protractor, but this might be related to Angular which has "ng" in front of a lot its functions. For example: ngFor, *ngIf, and ngClass.
Also a lot of 3rd party angular libraries use ng to denote that they are angular libraries. For example ng-bootstrap, ng-quill, and ng-score-polygon.
Note that ng was typically used for angularjs, ng2 and ngx were typically used for angular 2 and newer. Now ng is typically used for angular2 because angularjs is in long time support and not maintained.
If this is not related to some angular testing tool within protractor, then I'm not sure what it could stand for.
ng is short for A'ng'ular. I know, that it's not a great abbreviation but it is what it is. Since you are using Protractor, you must have come across additional locators like model, repeater etc, these utilises ng-model, ng-repeat. All built in functions of Angular uses this prefix.
The prefix ng stands for "Angular;" all of the built-in directives that ship with Angular use that prefix. Similarly, it is recommended that you do not use the ng prefix on your own directives in order to avoid possible name collisions in future versions of Angular.
From the FAQ:
Why is this project called "AngularJS"? Why is the namespace called
"ng"?
Because HTML has Angular brackets and "ng" sounds like "Angular".
I have created a custom XBL component that includes very little markup. It primarily consists of CSS, JavaScript and a <div>. The JavaScript then writes the markup to the DOM, inside the <div>. Its CSS specifies styles for a lot of specific element IDs. This works just fine in Form Runner, but not with the Server Side Embedding API.
The Server Side Embedding API appears to be rewriting the CSS file. It prefixes all the CSS selectors for specific IDs with o0. For example #MultiMousePosition-cwm is changed to #o0MultiMousePosition-cwm. This might work fine if the markup of the elements were included in the XBL component. Then it could be rewritten. But since the markup is generated by JavaScript after the page is loaded, this doesn't happen.
Is the rewrite of CSS and element IDs done in case the API is used to include multiple forms in the same page?
Is there a way to prevent the CSS from being rewritten? Or is there some other way to deal with this problem?
I tried to use <xxbl:global> but it looks like that won't work for CSS resources.
The JavaScript is a complex library created by another developer and rewriting it to avoid this issue would take a significant amount of work, if it is possible.
The rewrite of ids is done to prevent id conflicts in the resulting HTML page. That can include supporting multiple forms, but also possible conflicts with other content on the page.
Currently there is no way to disable rewriting. It wouldn't be hard to add as a configuration property, possibly on the XBL components (though some things would need to be rewritten on some not, which might make the configuration more difficult), or globally, for users who know for sure they won't have id conflicts.
since we are using dust.js to write templates, we have extended it to write css and js. For css and js our requirement is minimal. We just want to keep the location of assets in a variable which is passed to css and js during preprocessor stage. I tested it in all possible scenarios and it worked. Is there any side effect of using it this way?
I am not using less or sass because our requirement is very limited.
In the end, dust.js is just a text parser-- it doesn't care what sort of text you throw at it.
You should be careful to configure whitespace suppression if you are using dust to parse a whitespace-sensitive language like Javascript (newlines are very important for meaning in Javascript due to one-line comments and automatic semicolon insertion). For CSS, whitespace has no effect.
Angular gives you the possibility of dynamic two-way-data-binding. But it allows you also to create custom elements and directives.
So, if I use Angular in Dart, there is no need for Polymer any more, is it right?
There is a recent demo that shows how to combine Polymer's elements with Angular for routing and other app logic.
It looks fun, but I am not sure whether as of today the generated js code size is reasonable enough.
https://github.com/sethladd/dart-angular-polymer-data-binding
Slides for an accompanying talk: https://docs.google.com/file/d/0B3tMhVSd9MFIV0xfRm5NZ0VpNzg/edit
Blog with a summary: http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html
Slide 66:
In addition to the discussion referenced by #Paul Collingwood which contains a good explanation.
This similar question has an extensive explanation: What is the difference between Polymer elements and AngularJS directives?
I am getting ready to code a number of HTML helpers for UI elements in an ASP.NET MVC 3 project. I expect many of the helpers to depend on code that is located in external javascript libraries. These could be custom javascript libraries that I write, or they could reference 3rd party libraries like jQuery and jQueryUI. For example, I might write HTML.RichM.DataPicker(...) that would require the page to have jQuery and jQueryUI referenced and some code executed in the document ready function. Getting code into the document ready function is pretty straightforward I guess -- I could simply inject a new script block into the output with the contents of the function, even though that would mean I might have a page peppered with document ready functions all over.
The other part of this is making sure that the jQuery and jQuery UI libraries (in my example) are referenced and included. Is there an "MVC way" to add the code references to the view page or the layout/master if they are not already there, or must I instruct users of my HTML helpers that they need to add references manually for any required javascript files? Of course, I could just instruct them to include all possible external library references in the master or layout page, but that seems like overkill. In ASP.NET Web Forms, for example, I might have used RegisterClientStartupScript or RegisterStartupScript to do this from my custom control.
Thanks for any suggestions!
I think the easiest way is to include the dependant scripts in the header, that's maybe not what you want to do, but I think it's the easiest way.
I suggest you using a tool like SquishIt to bundle your JS files together, that way, you will not have to load like 20 js files, it will be more efficient and cleaner.