Angular ui-router 'ui-view' vs 'data-ui-view' [duplicate] - javascript

I have begun to learn about AngularJS and am confused about what the differences are between the ng-app and data-ng-app directives.

Most of these answers are simply saying makes template valid HTML, or HTML Validator Compliant, without explaining what THOSE terms mean, either.
I do not know for sure, but I'm guessing that these terms apply to HTML validation programs that scan your code for standards compliance - kind of like lint. They do not recognize ng-app as a valid attribute. They expect non default HTML attributes to be prefaced with
data-attribute_name_here.
So, the creators of AngularJS have created alternate names for their directives that include the data- in front of them so that HTML validator programs will "like" them.

None in terms of the runtime behavior, those are just different styles of naming directives as described here: http://docs.angularjs.org/guide/directive
Directives have camel cased names such as ngBind. The directive can be
invoked by translating the camel case name into snake case with these
special characters :, -, or _. Optionally the directive can be
prefixed with x-, or data- to make it HTML validator compliant. Here
is a list of some of the possible directive names: ng:bind, ng-bind,
ng_bind, x-ng-bind and data-ng-bind.
As you can see from reading this the data- can be used to make your HTML pass HTML validator tests/

You can declare the angular namespace <html xmlns:ng="http://angularjs.org" ng-app>

In modern browsers there is no difference, but in older IEs, they won't work unless you declare an XML namespace defining it.
There is also a validation difference in that ng-app is not valid XHTML, and will cause your webpage to fail HTML validations. Angular allows you to prefix its directives with data- or x- to allow it to validate.

You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
This will throw an error
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
This won't throw an error
<div data-ng-app="scope" data-ng-init="name='test'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" data-ng-model="name"></p>
<p data-ng-bind="name"></p>
</div>

The basic difference between these two terms is that data-ng-app validates the HTML while the latter don't.Functionality remains the same.
For more reference you can try w3Validator.

Absolutely there is no difference between the two, except that certain HTML5 validators will throw an error on a property like ng-app, but they don't throw an error for anything prefixed with data-, like data-ng-app. So using data- prefix with our angular directives is good.
Even you can make use angular directives in below mentioned ways
ng-bind, ng:bind, ng_bind, data-ng-bind, x-ng-bind

Related

What is the difference between `ng-if` and `data-ng-if`

What is the difference between ng-if and data-ng-if ?
They both seem to work in the same way, however i am not able to figure out the difference in them as not much material is available on data-ng-if.
Technically both are same, but while validating your page W3C validator without defining data- on your custom attribute it will get failed, because W3C validator doesn't know anything about your custom attribute, so you must have to explicitly define data- before your custom attribute and then W3C validator will pass your HTML
They are equivalent. The $compile service links them to the same directive.
From the Docs:
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
For example, the following forms are all equivalent and match the ngBind directive:
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
For more informaton, see
AngularJS Developer Guide - Directive Normalization
arbitary attribute
HTML 5 has introduced data attribute. With the prefix of data- we can create custom data attributes such as
<div id="thediv" data-ng-if="conditino"></div>
Both are actually one and the same.
Both are directives to specify Conditions.
You can use ng-if or prefixing ng-if with data- or x- like data-ng-if or x-ng-if.
Angular allows prefixing to its directives with data- or x- just for Validation due to "HTML5 validator".
Validation means you won't get any Warnings in Problems tab of Eclipse or any IDE that you are using like "Undefined attribute name (ng-model) at Eclipse".
You can use data-ng- instead of ng- if you want to make your page HTML valid nothing more than that.
The only difference between these two terms is that data-ng-app or x-ng-app validates the HTML while the ng-app didn't.
Functionality remains the same.

Binding Controller Property containing HTML in AngularJS

First of all: I am absolutely new to AngularJS but worked on MVC-projects in other languages.
I try to bind a Property containing HTML.
This is the code:
HTML:
<div ng-controller="MyController">
<p>{{About}}</p>
</div>
JS:
.controller('MyController', ['$scope', function($scope) {
$scope.About="This is me<br/>and not you!"
}
Now the HTML is encoded which I do not want (the <br/> should result in line breaks)
I already tried <p ng-bind-html="About"></p> but that resulted in no output at all
You need to allow html in your text which Angular does not by default.
Plunker: http://plnkr.co/edit/K4KRCQi4Rpe99MJel5J2?p=preview
Angular Docs for $sce
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as
safe to use for that context. One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html. We refer to
these contexts as privileged or SCE contexts.
<div ng-controller="htmlChar" ng-bind-html="about"></div>
<script>
angular.module("app",[])
.controller("htmlChar",function($scope, $sce){
$scope.about= $sce.trustAsHtml("This is me<br/>and not you!");
});
angular.bootstrap(document,["app"]);
</script>
You shoudln't need to insert html through model binding in AngularJS since the philosophy of the framework is to keep the HTML (page's structure and style) intact and only bind the data to be shown inside that HTML.
If you really need to bind HTML tags into your data you need to use the $sanitize service.
You have to use angular compile functionality here, go through the link to get more information angular compile

Hyphen in attribute value causing AngularJs validation break

I just noticed that if i have a hyphen in the form name attribute or the input's name attribute, AngularJS validations don't work.
This doesn't work if i try to validate the fields
<form name="signup-form">
</form>
The below works perfectly
<form name="signupform">
</form>
Can someone please explain why AngularJs doesn't work in the first case? And if we were to have "-" work, how can we do that?
The problem is that the name you put into the name attribute is also the name for the JavaScript property under which the form is published on the scope (e.g. for using it inside your controller). An attribute name containing a hyphen is not valid JavaScript though. I'm pretty sure there is no way around it.
It can be done... when referencing the form in the controller you may do so using the array notation. e.g.
$scope['my-form']['my-input'];
When binding in the template you can also use array notation like so:
<div ng-if="this['my-form']['my-input'].$invalid">There is an error</div>

Angular directive inserts wrong DOM node

I have an app with many forms. Each field has several HTML elements, so I thought I could extract some directives (one per type of field) to keep my forms tidy.
I've created a sample app to demonstrate the problem, but I'm getting inconsistent behavior. In the sample app, a <link /> element replaces the <input />. In my real app, <input /> just gets removed from the DOM completely. I feel like this should be easy; why doesn't it work?
To answer your stated question, it's because you told it to, with ng-transclude. That replaces the contents of the tag with the original element, which I don't think you wanted; you probably wanted the original contents to be transcluded as the label instead.
This is probably what you're looking for:
<div class="form-group" >
<label for="{{htmlId}}" ng-transclude></label>
<input id="{{htmlId}}" class="form-control" type="text" ng-model="model" />
<span ng-repeat="error in errors">{{error}}</span>
</div>
I've moved the tranclusion into the label. While this works, I would also recommend the style of actually passing a label attribute, rather than transclude it, just for the sake of having a consistent API and simpler code; it's functionally equivalent, though, so don't let me bully you.
Also, you've got a few errors in your .js as well. First, you want to use = in your scope instead of &
scope: {
model: '=',
errors: '='
},
& is used to pass methods, while = is used for objects (this is a simplification). Since your model and errors are objects, you'll want to use = instead.
Finally, in your example, your html template and your directive's template don't have the same name... you've got an extra 's' in your .js, but that's probably just in the plunker and not your real app.

Display raw HTML markup from CKEditor in Angular template

I use CKEditor in my AngularJS Application. When I try to display the text that I saved from the TextEditor, it doesn't take the style. For Example if I want to display a sentence it appears as:
<p>How old are you</p>
instead of :
How old are you
I tried using ng-bind:
<div ng-bind="Item.Header"></div>
and the regular binding method:
<h3>{{Item.Header}}</h3>
But both methods didn't work. Is there a solution for this issue?
You should use "ngBindHtmlUnsafe". Since this command doesn't sanitize the expression, but you should only use it if you trust the source.
So the html will be written as follows:
<div ng-bind-html-unsafe="Item.Header"></div>

Categories

Resources