现前端框架情况， angular、vue(比较火)、react。react因前段时间license协议，百度要求内部停止使用react。
新的框架层出不穷：它难吗？它写得快吗？可维护性怎样？运行性能如何？社区如何？前景怎样？好就业吗？好招人吗？组建团队容易吗？不管哪个，选择一个实践就好。
一、Angular 基础
1、AngularJS核心
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。AngularJS核心是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS更关注数据展示本身，更新时会尽可能减少对DOM的破坏和重构。
注：jQuery是dom驱动，AngularJS是数据驱动。
2、AngularJS的MVVM模式
angular中关于MVVM模式的运用，Model-View-ViewMode（模型-视图-视图模型）
在angular中MVVM模式主要分为四部分：
1）View：它专注于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
2）ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作。
3）Model：它是与应用程序的业务逻辑相关的数据的封装载体。
4）Controller：这并不是MVVM模式的核心元素，但它负责ViewModel对象的初始化。
3、Angularjs执行流程：
4、单页面应用(使用ui-rounter)
单页应用是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。单页应用是一种从Web服务器加载的富客户端。
单页Web应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面上完成，这一切都由JavaScript来控制。因此，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和设计的重要性不言而喻。
二、angular UI-Router路由
通过 AngularJS 可以实现多视图的单页Web应用。
AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。
1、ui-sref 指令链接到特定状态
<a ui-sref="contacts.list">Contacts</a>
2、包含模块
angular.module('uiRouter', ['ui.router']);
3、ui-sref-active 查看当前激活状态并设置 Class
<li ui-sref-active="active"><a ui-sref="about">About</a></li>
4、ng-view
该 div 内的 HTML 内容会根据路由的变化而变化。
<div ui-view></div> 嵌套 View
5、方便获得当前状态的方法，绑到根作用域
app.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);
6、abstract 抽象模板（虚拟路由abstract:true先执行user， 再进入controller）
抽象模板不能被激活，但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板，或者它可以传递作用域变量$scope给子模板。
7、路由重定向 $urlRouterProvider
三、angular基础常见问题
1、angular 的数据绑定采用什么机制？详述原理
脏检查机制。
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。
原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往$watch队列里插入一条$watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest循环就会触发，遍历所有的$watch，最后更新 dom。
2、angularjs ng-if ng-show ng-hide区别
在使用anularjs开发前端页面时，常常使用ng-show、ng-hide、ng-if功能来控制页面元素的显示或隐藏
1、操作dom元素不同：
1）ng-show/ng-hide是通过修改样式控制元素显示与隐藏，对应的DOM元素会一直存在于当前页面中。
2）ng-if根据表达式的值动态的在当前的页面中添加删除页面元素。
2、在作用域方面
1）当一个元素被ng-if从DOM中删除时，与其关联的作用域也会被销毁。而且当它重新加入DOM中时，则会生成一个新的作用域，而ng-show和ng-hide则不会。
注：
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见。
3、angularjs scope rootscope 区别（重要）
scope是html和单个controller之间的桥梁，数据绑定就靠他了。
rootscope是各个controller中scope的桥梁。
如何产生$rootScope和$scope？
1、Angular解析ng-app然后在内存中创建$rootScope。
2、Angular会继续解析，找到{{}}表达式，并解析成变量。
3、接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。
例如：$scope.addServe = function () {}
4、angular 应用路由库及区别
1、Angular1.x 中常用 ngRoute 和 ui.router
2、无论是 ngRoute（Angular 自带的路由模块） 还是 ui.router（第三方模块），都必须以 模块依赖 的形式被引入。
3、ui.router 是基于 state （状态）的， ngRoute 是基于 url 的，ui.router模块具有更强大的功能，主要体现在视图的嵌套方面。（虚假路由）
5、ng-include 和 ng-view区别：
ng-include 指令用于包含外部的 HTML 文件
<div ng-include="'views/apply_bl.html'"></div>
使用ng-view.这个方法通过使用路由控制，可以方便的实现页面组合。
ng-include就是将多个页面的公共页面提取出来，如header.html，footer.html等，在每个页面用来引入。
四、现项目运用技术点
一、A项目 (开发模式：前端 + 后端)
1、angular 1.4.8 版本
2、组件化：1）插件 2）自定义指令 directive 来做组件化
3、Angular + ocLazyLoad动态化加载脚本
4、Angular-UI-Router 虚拟路由 [（home\console）虚拟路由来复用的]
5、requirejs异步加载
6、UI-bootstrap组件 bootstrap（ url地址改变）
7、restfulAPI 协议写相应接口
8、golang、java语言开发
二、B项目 (开发模式：前端 + node)
1、Yeoman+Angular+Gulp 环境搭建
2、angular v1.5.11 版本
3、Angular-UI-Router 虚拟路由 [（home\console）虚拟路由来复用的]
4、gulpfile 主要
1、babel es6转es5
2、gulp-uglify JS文档压缩
3、gulp-sass 编译sass文件至css文件
4、……
5、node做服务器执行过程：
一、前端。取接口，展示数据
二、后端。（接口协议要遵循 RESTful API ）
（1）node的框架Express。
node作用：
1）当服务器
2）接口设置
3）在node中，通过Sequelize操作mysql数据库之增删改查。
三、mysql（数据库）
数据库，设置具体数据。
有疑问加站长微信联系（非本文作者）
