ng-app V/S data-ng-app in AngularJS - angularjs

In AngularJS when using ng-app: ng-app found in the document will be used to define the root element to auto-bootstrap as an application.
In some of the application it is being used as data-ng-app.
Is there any difference in both of the following declaration, If Yes what & If No then which one is significant and why ?
1.
<body ng-app>
<p>{{ 1 + 2 }}</p>
</body>
2.
<body data-ng-app>
<p>{{ 1 + 2 }}</p>
</body>

Both and are the same except for the fact that if you want your template/code to be according to be HTML compliant and follow the best practices. Use data-ng-app.
This is what the official documentation quotes:
"Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them."
Hope that answers your question.
Cheers!

See the answer:
ng-app vs. data-ng-app, what is the difference?
Only diffrence regarding html5 validation

ng-app isn't strictly valid html.
Custom attributes should be prefixed with data- to be valid.
So angular added this syntax so users could still have valid html.
(Knockout also uses data- attributes.)
There is absolutely no difference in functionality.
Source: w3.org - custom data attributes

ng-app and data-ng-app both are similar to each other, the only difference between them is sometimes HTML validators will show an error while using ng-app. so that time you can use data-ng-app.
note: x-ng-app also have the same property. You can use x-ng-app too instead of using data-ng-app.

Related

Angular with Microdata

Does Microdata work with dynamic Angular ng-repeat items?
Can I use it as:
<div itemscope itemtype="http://schema.org/Product" ng-repeat="item in items">
…
</div>
I have found schema validator which, for my site actually shows angular expressions:
...
datePublished {{lvl_project['year']}}
name "{{lvl_project['title']}}"
keywords {{lvl_project['tools'].join(',')}}
...
Furthermore, it does NOT show all of the ng-repeat-generated elements.
This seems to me like a strong indication that the google-bot did not see the angular-generated elements and their values, but there could be more to the issue that I don't know.
Yes, you can use...it will work on all (but use if all comes in same category).

how to display the raw angular expressions without having them evaluated angularJS

here i am trying to display the expressions as it is {{x}}*{{y()}}:
But it is evaluated always.i have checked across the portal for possible answers and found none.
Here is a JSFiddle to illustrate the problem
Use ng-non-bindable directive.
This directive prevents the compilation of inner elements.
Markup
<body ng-app="myApp" ng-controller="myCntrl">
<code ng-non-bindable>{{x}}*{{y()}}:</code> {{x}}*{{y()}}
</body>
More on this at: https://docs.angularjs.org/api/ng/directive/ngNonBindable

Why doesn't 1-way binding work in angularjs?

I'm having trouble using one way binding in directives with an isolate scope.
If I use an equal sign for two-way binding, and use the data like so: {{d.name}}, it works.
If I use an # sign, it doesn't work. If I use an equal sign and use the data like so: {{::d.name}}, it fails also.
You can see my full example at this plunker: http://plnkr.co/edit/8bUl8pZSV8Ryru6GDq2M?p=preview
Can someone please help me understand what's happening here? Thanks.
The one-way binding syntax you are trying to use, has been introduced since Angular 1.3.
In your demo you are using version 1.2.25.
You must change the script link:
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.0/angular.js" data-semver="1.2.25"></script>
The problem with the second directive, instead, is that the # is not a one-way binding, it simply takes the attribute as text.
To use it like you would, so you need to interpolate the text before passing it to the directive, like this
<h3>Directive 2</h3>
<p ng-repeat="d in data">
<dir2 d="{{d.name}}"></dir2>
</p>
DEMO

AngularJS arguments for directives - convention

Simple question regarding arguments for AngularJS directives within markups. Let's consider the following markup that has it's own directive.
<div selectbox resource="http://resource.org/asset/1">
</div>
we are passing an argument called 'resource' - and it's ok, but just wanted to ask as it's recommended to use in HTML5 data-* prefixed attributes is it better to write
<div selectbox data-resource="http://resource.org/asset/1">
</div>
which convention is better and why?
Better use custom html attributes with data- prefix, first of all it's described as standart for custom attributes and if you want to validate your html all custom attributes without data- prefix will be invalid.
From Angular Docs
If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind).
More info:
Post about data-*
Use with css3

unnecessary watcher in angularjs

I create super simple angular app like the following
<html ng-app>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<body>{{"hello"}}</body>
</html>
I found that the $rootScope has one $watcher for the expression {{"hello"}}, it would be nice that angularjs will be smart enough to find that the expression is a constant, so there is no need to watch it again. This feature (if supported) can be useful sometime such as {{ "" | toRemdomNumber }}, {{ "key" | getResourceByKey }}. This save some memory consumption and computation when scope is in digest.
Is this possible?
I know creating a directive such as bindonce is super simple as well, what I want is that angularjs core / $interpolate service should be smart enough the parse the expression, so that unncessary $watcher will not be created.
I'm new to Angular my self, but I found this directive called bindonce on github. https://github.com/Pasvaz/bindonce It will show you how you can bind constants once. (It gets rid of their watchers after it first binds.) It even has support for filters, and it eliminates unnecessary watches.
Here is an example of bindonce used with a filter.
<div bindonce="Person">
<span bo-bind="Person.bill | currency:'USD$'"></span>
</div>
Here's an article on how to unbind the watcher yourself if you want to try that. I just skimmed over it so far. Like I said I'm kind of new so I don't understand all of it. http://www.bennadel.com/blog/2480-Unbinding-watch-Listeners-In-AngularJS.htm

Resources