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

Question

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?

atw13 · Accepted Answer · 2013-03-29 17:41:39Z

4

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.

answered Mar 29, 2013 at 17:41

atw13

7193 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

box86rowh · Accepted Answer · 2013-03-29 17:40:06Z

1

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.

answered Mar 29, 2013 at 17:40

box86rowh

3,4252 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest