angular试题
AngularJS
一、 说说你对MVC和MVVM的理解
mvc:
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈
所有通信都是单向的。
Angular它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。
组成部分Model、View、ViewModel
View：UI界面
ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；
Model：数据访问层
二、 对 bootstrap 的掌握？为什么用 angular+bootstrap 搭建后台管理系统
bootstrap是一个快速开发的响应式框架，主要是为了快速搭建ui界面，bootstrap 的web组件和js插件对pc端开发比较友好，尤其是栅格化系统可以良好兼容浏览器， 低版本浏览器可以使用bootstrap一responsive的插件兼容，js插件有各种回调机制，可以满足自己的多样开发需求，而且bootstrap使用css属性来操作样式，免去了手写原生代码的痛苦，使用angular进行数据绑定，bootstrap来搭建界面，提升开发效率
个人心得：
我在实际开发中使用ace admin这套基于boostrap的框架，可以更快速的开发，数据项通过json结构进行配置，几乎不用手写代码，提升开发效率
三、 angular中ng一if和ng-show/hide 有什么区别？
1．ng一if 在后面表达式为 true 的时候才创建这个 dom 节点，ng一show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。
2．ng一if 会（隐式地）产生新作用域，ng一switch .ng一include 等会动态创建一块界面的也是如此。
个人心得：
ng一if添加删除节点，那么肯定回创建作用域，而ng一show/hide则不会
四、 Angular中ng一click中写的表达式，可以用js原生上 的方法吗？为什么？
ng一click和原生事件完成的功能是一样的，但是ng一click做了优化，而且ng一click里面可以写表达式，运算过程，click则要单独处理，手写功能。
个人心得：
如果不在作用域里添加函数，可以配合ng一init初始化属性值，在ng一click里添加算 法或者某一功能，虽然ng一inK不推荐使用，但是侧面说明ng一click的优势
五、 内置filter都有哪些？
ng 内置的 filter 有九种：
date（日期）
currency（货币）
limitTo（限制数组或字符串长度）
orderBy（排序）
lowercase（小写）
uppercase（大写）
number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）
json（格式化 json 对象）
filter（处理一个数组，过滤出含有某个子串的元素）
filter有两种使用方法，一种是直接在页面里：
<p>{{now | date : 'yyyy一MM一dd'}}</p>
另一种是在 js 里面用：
// $filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...)
$filter('date')(now, 'yyyy一MM一dd hh:mm:ss');
六、 如何自定义filter?
在模块下挂在一个filter()方法，第一个参数传入过滤器的名字，第二个参数是回调函数，处理过滤方法的详细内容，最后返回结果，这样外部就可以根据过滤器的名字调用了
例如
|
myAppModule.filter("reverse"，function(){ return function(input,uppercase){ var out =""; for(var i=0 ; i<input.length; i++){ out = input.charAt(i)+out; } if(uppercase){ out = out.toUpperCase(); } return out; } }); |
使用：name丨reverse通过管道符调用
七、 factory、service 和 provider 是什么关系？
factory , service , provider都是angular 提供的服务
factory就是原生js里的方法，一个简单的函数
service类似原生里构造函数的过程，拥有一个构造器constructor，也就是说有 new的过程，追加属性和方法都是在this上追加的
provider是服务商当service需要配置的时候，需要使用provider提供服务，例如当使用angular进行跨域访问，需要配置jsonp信息的时候，就可以使用provider进行config的配置，简单理解是service的高级版本，provider提供一个$get的属性来返回 $provider的实例
他们都是单例模式，只实例化一次
个人理解 ：
provider > service > factory
factory用来配置简单的服务
service是在factory的基础之上加入了面向对象的思想，提供更多功能的服务
provider是在service的基础上进一步改进配置信息
factory与service在底层代码上都来源于provider
例子介绍：
我可以在factory里写一个$http( )请求，不做任何配置，参数写死
我可以在service里写一个$http( )请求，传入请求的参数可以先配置在this的属性上传入方法
我可以在provider里写一个请求，然后在config上传入要配置的参数，URL， method，data等信息，通过config来修改provider的参数，再将服务商提供的服务注入控制器controller
注意事项：
config里传入的参数是nameProvider而不是name，也就是说你的叫做 myProvider, config 里传入的参数就是myProviderProvider而不是myProvider
八、 angular的数据绑定采用什么机制？详述原理
通过$watch来监听每一次dom的变化，然后$digest来遍历循环所有的$watch 队列，发现与原来不同的值，也就是脏值则进行修改，最后通知$apply , $apply会进入angular context的执行环境，通知浏览器拿回控制权，修改相应的dom节点
个人心得：
每一个ng指令的触发都在内部触发了一个$Watch的队列，加入一组标签
<li ng一repeat="item in items">
{{ item }}
</li>
循环了 10次，那么就触发了10个item与1个ng一repeat的11个$watch的队列，
$digest会遍历循环这些队列，比较值的变化，有变化的即为脏值过程叫做dirty一checking，$digest修改完对应的值就会通知$apply()准备进入angular context的执行阶段修改dom，没有变化则不修改。也就是说我们在页面每次触发的操作，每次输入一个文字都会触发$watch，可见于react相比angular的劣势出现了
九、 两个平级界面块a和b，如果a中触发一个事件，有哪些方式能让b知道？详述原理
1．通过a的子controller将事件使用$emit传递给父controller再将事件用 $broadcast传递给b controller实现数据传递
2．也可以通过service服务，将数据保存在service之内，然后在b中调用service
个人心得：
像这种数据传递的方式其实有很多种，本质是不同作用于之间的数据传递，只要 掌握住这一点思想有很多方式解决，比如我可以尝试挂在$rootScope之上进行共 享，也可以用本地存储来存储数据，实现数据共享。方法不重要，关键是如何解决的思路。
十、 —个angular应用应当如何良好地分层？
目录结构的划分
对于小型项目，可以按照文件类型组织，比如：
css
js
controllers
models
services
filters
templates
但是对于规模较大的项目，最好按业务模块划分，比如：
css
modules
account
controllers
models
services
filters
templates
disk
controllers
models
services
filters
templates
modules下最好再有一个common目录来存放公共的东西
十一、 angular应用常用哪些路甶库，各自的区别是什 么？
ng一router，ui一touter，ui一router可以嵌套子视图
十二、 如果通过angular的directive规划一套全组件化体 系，可能遇到哪些挑战？
隔离作用域，ng一指令的作用域传递
十三、 分属不同团队进行开发的angular应用，如果要做整合，可能会遇到哪些问题，如何解决？
可能会遇到不同模块之间的冲突。比如一个团队所有的开发在moduleA下进行， 另一团队开发的代码在moduleB下
|
angular.module('myApp.moduleA'，[ ]) .factory('serviceA', function(){ ....... }) angular.module('myApp.moduleB'，[ ]) .factory('serviceA'，function(){ ...... }) angular.module('myApp'，['myApp.moduleA'，'myApp.moduleB']) |
会导致两个module下面的serviceA发生了覆盖。
个人心得：没有太好的解决方案，只能约定命名规范
十四、 angular的缺点有哪些？
不适合做交互过多的项目，因为没有选择器的存在，
导致学习成本较高，对前端不友好。但遵守AngularJS的约定时，生产力会很高，对Java程序员友好
因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取
十五、 如何看待angularl.2中引入的controller as语 法？
为angular添加this作用域链，使得angular更加像原声写法
十六、 详述angular的“依赖注入”。
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。
AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖 constant value factory service provide 核心组件。
十七、 当你简单的动态给页面插入html时，此时html带有 angular的语法不会执行的，为什么？
通过$compile进行处理，任何指令的生效都需要compile，这一步在app启动的时候angular先帮你做了，但你插入的html是没有经过compile这个步骤的，所以你手动 compile下即可。
十八、 使用ng一repeat出错：Error: [ngRepeat:dupes]，怎么回事？
Error: [ngRepeat:dupes]这个出错提示具体意思是指数组中有2个以上的相同数字。 ngRepeat不允许collection中存在两个相同Id的对象
对于数字对象来说，它的id就是它自身的值，因此，数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。
例如：在ng一repeat="itme in items "中加入rack by item.id 或者track by fnCustomld(item)。 嫌麻烦的话，直接拿循环的索引变量$index来用item in items track by $index——>ng一repeat="itme in items track by $index"
一句话总结：因为angular不允许数组中出现重复的值，所以会报错dupes错误，意思是重复的参数错误
十九、 Ng一repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？
见上题
二十、 使用第三方插件或者原生的js修改angular中的 model或者view的值时，相应的model或者view的值 不会变化，也就是angular的双向数据绑定失效，怎么回事？
angular有自己的一个上下文，所有与angular有关的代码执行（如双向数据绑定）都在这个上下文中进行，因此如果你用第三方插件或者原生的js进行操作时，此时代码是在javascript的上下文中执行，angular无法知道你是否修改model或者view的值，自然也就无法进行双向数据绑定。
解决方案是在操作之后执行$scope.$apply( )或者将操作的代码放在$scope.$apply(function( ){//操作的代码...})
二十一、 angular中注入方式有推断式注入、$inject注入、内联式注入，当然这三种方式在angular中是等效的，但推断式注入对于压缩的JavaScript代码来说是不起作用的，为什么？
因为压缩过后的 JavaScript 代码重命名了函数的参数名。在压缩js代码的时候尽量不要用推断式注入，最佳是用内联式注入的方式。
二十二、 如何看待 angular2?
相比Angularl.x，Angular2的改动很大，几乎算是一个全新的框架。
基于TypeScript (可以使用TypeScript进行开发），在大型项目团队协作时，强语言类型更有利。
组件化，提升开发和维护的效率。
还有module支持动态加载，new router，promise的原生支持等等。
迎合未来标准，吸纳其他框架的优点，值得期待，不过同时要学习的东西也更多了 (ES next、TS、Rx等）
详细参考：
