Question

我开始学习Angular并希望全面了解这个框架是如何实际创建的。

例如，在此代码段中

<!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>

有“{{name}}”的用法。显然，纯HTML没有此功能。

Angular解析整个html文件就好了，哦，我需要在这里替换“name”的值。

如果是这样，它不会减慢整个过程（解析和解释文件所花费的时间）吗？

因此，任何关于如何理解源代码的建议都值得赞赏。

谢谢！

Answer 1

是的！ <div ng-app="">标记包含该代码的事实意味着每当页面被渲染/重新渲染时，angular.js都会变为$apply。这样，{{name}}将替换为该包装范围内ng-model等于"name"的元素的文本内容。 Tehnically angular捕获DOM渲染事件并注入其更改然后让渲染继续。所有这一切都可以通过早期包含启动angular.js子系统的脚本angular.min.js来实现。希望很清楚。

这里有一个更深入的视频 https://www.youtube.com/watch?v=fzWtSdgwgzU

关于angularJS的工作机制

1 个答案: