We know that html is the client side scripting, while using angularjs framework in html we include "ng" in html tags.My Question is how the browser recognize or identifies the html tags which has "ng".please give the right solution for my question.
We know that html is the client side scripting, while using angularjs framework in html we include "ng" in html tags.My Question is how the browser recognize or identifies the html tags which has "ng".please give the right solution for my question.
Share Improve this question edited Feb 20, 2015 at 12:12 Danny Staple 7,3524 gold badges45 silver badges57 bronze badges asked Feb 20, 2015 at 5:05 rajaguru rrajaguru r 1411 silver badge3 bronze badges 1- 1 The browser does not understand these tags. It is the angular.js library which reads and understands them. – Kai Mattern Commented Feb 20, 2015 at 8:59
5 Answers
Reset to default 3Below point helped me in understanding "How angularjs tags are understood by the browser":
- AngularJS's HTML piler allows the developer to teach the browser new HTML syntax. The piler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. AngularJS calls these behavior extensions directives.
For detailed information on how HTML piler works, please follow the below link: https://docs.angularjs/guide/piler
Angular 1 needs the angular.js file to be included in the index.html so that it will translate the directives to browser understandable form.
While in the angular2 the typesscript is used, in which the type script piler piles or translates the typescript code into the browser understandable javascript/ecmascript automatically which will be rendered on screen.
The angular js will run on the fly in the browser while angular 2 and above needs the prepilation or can be said as translation to javascript/ecmascript. Also if the translation is mentioned with a production build flag the translated javascript/ ecmascript will be a minified one.
The browser does not have angular/ng support built in.1 The angular library (the angular.js script) must be included on the page, and that's where the magic happens.
1 though Google would like to change that.
We use ng-app directive to bootstrap the application as an angular application.Once you have this directive (ng-app="myApp") in your HTML root element all the nested ng elements are identified and are piled .
for example
angular.module('myApp', []);//module definition in JS File
<body ng-app="myApp">
<div ng-controller="myCntrl">
<input type="text" ng-model="User"/> //this will be recognized and piled
</div>
I hope this is what you were looking for.
Angular aims to teach the browser a few new things and in the process, making the browser a little smarter than it is without angular.
When you start an angular application, angular transverses the DOM quickly, looking for directives (example ng-options, ng-if, etc). This DOM transversal is done by the $pile service. After traversing the DOM and identifying the directives, angular links them to their respective views and bind them to there scope.
These directive encapsulate the HTML that the browser understands and they are exposed to the browser after the pilation process.