CODEWITHSUNDEEP
javascriptangularjs
Nair
Nair

Reputation: 7458

Why HTML code behind still shows angular code instead of plain html?

I am new to Javascript world and doing Angular.JS. I wrote a simple hello world code where I use ng-controller to assign a variable with 'Hello World' and I bind the value in HTML.

    <div ng-controller="Controller">{{DisplayData}}</div>

my controller is

function Controller($scope) { $scope.DisplayData = "Hello World"; }

When I run the code and it displays 'Hello World' properly as I expected. Out of curiosity, I checked the code behind and expecting 'Hello World' inside a div, instead it showed my HTML code with angular directives in it.
I read the doc in http://docs.angularjs.org/guide/concepts#startup expecting to get an idea why is it doing it but I am not really sure I understood.
So here are my questions; I thought HTML is static and browsers render the HTML as it is. So if we need to create anything dynamic, we eval the values and replace them with actual value through java script, before we create the final DOM objects. is the understanding wrong?

Upvotes: 0

Views: 1079

Answers (2)

atw13
atw13

Reputation: 719

When you use JavaScript to change an HTML page, you're not actually changing the code for the page, but something called the DOM, which is in memory, and is initially created by reading the code behind. What you see when you View Page Source or something like that will always be the original code that the browser obtained from the server. There are tools in most browsers to see the DOM in text form. F12 in Chrome will bring up the dev tools, for example. That will show you the results of the JavaScript manipulations.

Upvotes: 4

box86rowh
box86rowh

Reputation: 3415

When you use a Javascript framework to manipulate the page, this happens after the DOM or HTML has loaded, so the DOM that you see in the view source remains as it came from the server. If you are using Chrome and "Inspect Element" you will see the up to date html with your Hello World.

Upvotes: 1

Related Questions