AngularJs的源代码，学习最优秀工程师的设计思路

再牛逼的框架他的本质也是javascript代码，只要你会js代码你就能看懂！别怂！

AngularJs是一个很简单的框架（其设计思想很前卫，涉及领域很广，使得它表现出很难的特性，但是你要相信，你使用起来还是很简单的。）

我这里分析的是AngularJS v1.5.7，官网最新版的是2.x（新版的2.x比1.x改进了很多很多，改天再细致分析一遍）

我们来分析一下angular的核心文件（），打开angular.js文件，可以看到整个的代码是放到一个自动执行函数里的，类似如下：

（）（）；//一个简单的js闭包稍微复杂一点：（function(“参数”){}）（“参数”）；//所有的代码放在了这匿名function中

可以看到大概代码量3万多行，是不是感觉有点崩溃，看起来还是有点费劲的。不用担心，你只要拉到js文件最底部，这里是初始化时调用的几个函数，从这里入口，你会很顺畅的理顺整个angular的整个架构思想。如图：

在最底部，31310行代码处：

判断angular是否启动（初始化）过了，如果初始化过就提示错误，没有则return；

然后是绑定jQuery和提供公共接口API，可以看到注释很清晰。//try to bind to jquery now so that one can write jqLite(document).ready()

具体的实现你可以点击方法看一下。就是如果你引入了jQuery库就调用你引用的，没有引用则使用angular内部的一个轻量级的jQuery（jqLite）。

原文注释：// Use jQuery if it exists with proper functionality, otherwise default to us.

接下来就是初始化model等等操作。你可以打开浏览器打个断点调试一下，享受阅读全球最优秀前端工程师的代码的乐趣。

最后教你一个最简单的方式，因为js是解释型的弱类型语言，也可以说是很没有原则的语言，怎么玩都行，你可以把任意的js对象打印到浏览器页面，利用浏览器的开发者选项查看该js对象的属性，样貌。比单纯的看代码强多了。

用浏览器把angular对象打印出来是这样的：var a = angular;

我这里用的是google的chrome浏览器，可以看到angular对象的每一个熟悉，然后你想了解哪个属性点击它展开就行了。是不是很方便快捷。

好了，我这里不多啰嗦，抛砖引玉，想了解最前卫的设计思想，还是要自己动手哦。