1. 理解前端在做什么
    1. 如何将来自于服务器端或者用户输入的动态数据反映到复杂的用户界面上。
      1. 两种关系，一种是从数据到界面，一种是从界面到数据。
        1. 根据某些数据 => 生成某些界面
        2. 界面上的某些操作 => 改变一些数据 => 影响界面
      2. Data => UI，重点在于 MVX 中的 X
    2. 关于新框架的学习：https://github.com/xufei/blog/issues/33
      1. MVVM 通过类似模板的语法，描述界面状态与数据的绑定关系，然后通过内部转换，把这个结构建立起来，当界面发生变化的时候，按照配置规则去更新相应的数据，然后，再根据配置好的规则去，从数据更新界面状态。
      2. React走的是另外一个流派，就是所谓的函数式，在这个里面，推崇的是单向数据流：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）。
    3. 引出 MVVM 对比 MVC
      1. MVC模式，我们关注的是view上的事件，手动操控元素和模型的展示 MVVM模式，我们关注的是模型，自动解决元素和模型的关系
      2. MVC，MVP 和 MVVM 的图示：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
      3. 知乎话题：https://www.zhihu.com/topic/19685551
      4. 对比原有 jQuery 的方式：https://www.zhihu.com/question/22935917
      5. UI架构小史1/2/3（MVC/MVP/MVVM）：http://www.jianshu.com/p/96e26ceb2fef
      6. 英文篇，图不错：https://msdn.microsoft.com/en-us/library/hh848246.aspx
      7. 介绍 Vue 的数据绑定：https://laracasts.com/series/learning-vue-step-by-step/episodes/1
    4. 正确对待现有前端
      1. GUI 软件，只是载体是 web
      2. 自动化构建，模块化
      3. 发布，优化……
  2. AngularJS
    1. HTML扩展：Directive
      1. Misko Hevery（AngularJS的创始人之一）： AngularJS弥补了HTML在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展Web应用中的HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。
      2. 赋予了HTML更强大的能力，相当于让浏览器学习了新的语法。
      3. 回到页面构建上来说，整个页面不再是 DOM 结构，而是新的组件树。
      4. ng-xx 自带了很多 directive 便于开发者使用。
    2. 数据流：如何实现 MVVM，VM 如何对应到$scope
      1. 详细解释 MVVM 在 Angular 所对应的不同部分，如何分层，数据/操作如何互相影响
        1. Conceptual Overview：https://code.angularjs.org/1.4.9/docs/guide/concepts
        2. Controller初始化（[$service, $factory, $constant]）：M -> VM <-> V
        3. 用户输入 ng-model/ng-click 修改 vm 所对应的 $scope 上的 / $watch 的值：V <-> VM -> M
        4. 数据双向绑定：http://www.html-js.com/article/2145
      2. directive 生命周期：添加 DOM 结构 / 生成 DOM 结构之后如何操作 DOM
        1. 关键：Controller 的$scope 「参数」来自哪里？ <= 上一层
        2. compile，controller，link 的区别：http://jasonmore.net/angular-js-directives-difference-controller-link/
      3. What is the Model?：https://toddmotto.com/rethinking-angular-js-controllers/
    3. => $Scope 对象
      1. 深入理解 Angular Scope 的继承关系：http://xiaoyu2er.github.io/2016/01/23/angular-scope-in-depth/
      2. 继承关系 -> JavaScript 原型链
        1. （新的 Scope）坑，以 ng-if 举例：http://stackoverflow.com/questions/22099496/angular-js-ng-click-scope-set-doesnt-work-in-ng-if
      3. $rootScope 乃全局变量，正确/不要使用，angular.run() 初始化后 -> immutable object
      4. scope.$parent 实现共享，继承，隔离
    4. Directive 中的 scope
      1. scope:ture/false/{}： http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/
      2. 几种绑定方式<、@、=、&：https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/
        1. one-way binding: https://docs.angularjs.org/api/ng/service/$compile#-scope-
      3. $scope 和 scope 的区别：https://thinkster.io/a-better-way-to-learn-angularjs/scope-vs-scope
    5. 加强 View 中的语境：Controller As 语法
      1. 详细介绍：https://toddmotto.com/digging-into-angulars-controller-as-syntax/
      2. 为什么会出现问题：http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html
      3. 只做初始化，并没有后端 Controller 那么重
        1. 理解 this：http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers/14168699#14168699
      4. 结合路由机制：http://www.cnblogs.com/lvdabao/p/3481224.html
    6. Template VS Component
      1. Angular 提供两种选择，从而更使人混淆，ng-include
      2. Web应用组件化的权衡：https://github.com/xufei/blog/issues/22
      3. 讲清楚模板是耗材，不可复用，要多构建复用组件
        1. 画出数据流向图
  3. Best Practice
    1. => Component
      1. 模块关系 -> 组件化。整个应用形成倒置的组件树，每个组件提供对外接口，然后内部只关注自己的实现。
      2. Angular 1.x
        1. element directive
      3. Angular 1.5
        1. component directive
      4. Angular 2.0
        1. @Component
    2. 路由 Route
      1. ngRoute
        1. 能够描述界面当前状况的数据，就可以被称为状态。
        2. 单页应用开发： 程序逻辑是由url变化开始的 ，单向，由状态state驱动。
      2. ui-router
        1. multiple ng-view
      3. ngNewRouter
        1. path -> component
    3. Web Component
      1. 漫谈Web前端的『组件化』：http://leeluolee.github.io/fequan-netease/
      2. 2015前端组件化框架之路：https://github.com/xufei/blog/issues/19