CODEWITHSUNDEEP
angularjs
user2628641
user2628641

Reputation: 2154

Working mechanism about angularJS

I am starting to learn Angular and want to get an overall idea of how this framework is actually created.

For example, this in this code snippet

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">     </script>
    <body>

        <div ng-app="">
             <p>Name : <input type="text" ng-model="name"></p>
             <h1>Hello {{name}}</h1>
        </div>

    </body>
</html>

There is the usage of "{{name}}". Clearly, plain HTML doesn't have this functionality.

So does Angular parse the whole html file to know like, oh, I need to substitute value for "name" here.

If so, won't it slow down the whole process (time spent on parsing and interpreting the file)?

So, any recommendation about how to understand the source code is appreciated.

Thank you!

Upvotes: 0

Views: 55

Answers (1)

GavinBrelstaff
GavinBrelstaff

Reputation: 3069

Yes! The fact that <div ng-app=""> tag wraps around that bit of code means that angular.js gets to $apply it's changes whenever the page gets rendered / re-rendered. That way the {{name}} is substituted with the text contents of the element with ng-model equal to "name" within that wrapper scope. Tehnically angular captures the DOM rendering event and injects its changes then lets rendering continue. All this is made possible by the earlier inclusion of the script angular.min.jswhich initiates the angular.js subsystem. Hope that is clear.

There is a more in depth video about this here https://www.youtube.com/watch?v=fzWtSdgwgzU

Upvotes: 1

Related Questions