应该如何看Angular 源码？

最近想要去深入了解一下Angular的原理，但是发现Angular的复杂度真的是有点高，网上也没有找到类似https://github.com/answershuto/learnVue这样的源码学习笔记，所以想请教一下大家，有没有针对于Angular源码阅读的一些经验，比如按照什么样的顺序去阅读？阅读源码之前先得有哪些预备的知识(比如需要学习Zone.js)?

热心回应 · 2019-8-16 02:16:58

http://www.clipcode.net/training/clipcode-source-tour.pdf我相信你是看不下去的！

热心回应 · 2019-8-16 02:16:59

小小的实践经验：

使用 angular/cli 生成一个 hello world 程序
然后使用 TypeScript 的 path map 功能，使用 Angular 包的 TS 源码去替换 node_modules 下 Angular 编译后的 JS 代码：

不过保留了 angular/compiler 编译器包（多次实践很难直接替换这个包 TS 代码）：

这样 Angular 包的 TS 源码就在项目里了，运行 ng serve 的时候，Angular 包走的是这些 TS 源码：

但是有个小坑，还不能直接 ng serve，得在 mode_modules/@angular/core 下有个 package.json 文件，所以 copy 个文件过去：

最后，就可以 yarn serve 运行起来，走的是 Angular TS 源码。
另外，可以结合 IDE（PHPStorm/GoLand/WebStorm/VS Code 等等），实现断点调试，效率高很多，比如在 PHPStorm 里配置：

然后添加断点，项目根目录下 yarn serve 起来，点击 debug 按钮：

就可以愉快的调试代码啦，看的都是 TS 代码，爽歪歪：

在进入 angular/core 下的创建 platform 对象的 TS 源码：

lx1036 的简历

热心回应 · 2019-8-16 02:17:00

看了你给的仓库。
没有发现文章之间有顺序关系。
文章作者是按照功能点去解读对应的源码的。
你也可以按照这种方式，根据功能模块去拆分理解，不必要一个文件一个文件解读。
源码解读相当枯燥，而且可查资料较少，所以推荐按照兴趣功能点来解读。
比如你觉得Angular的双向绑定感兴趣就去找对应的代码实现进行解读和验证。
我的新书《了不起的JavaScript工程师》即将在2019年8月上架，旨在帮助初级和中级web前端工程师提升进阶，成为具有全局视野的全能型人才，欢迎有需要的同学选购~

应该如何看Angular 源码？

3 个回复