angular框架的面试题集锦

一、angular内置过滤器一共有几种，分别是那些？

　　date：日期格式化

　　currency：货币 

　　uppercase：大写

　　lowercase：小写

　　limitTo（限制数组或字符串长度）

　　orderBy（排序）

　　number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）

　　filter（处理一个数组，过滤出含有某个子串的元素）

　　json（格式化 json 对象）

二、angular 核心？

　　AngularJS是为了克服HTML在构建应用上的不足而设计的。 AngularJS有着诸多特性，最为核心的是：

• MVC
• 模块化
• 自动化双向数据绑定
• 语义化标签、依赖注入等等

三、angular的数据绑定采用什么机制？详述原理

　　angularjs的双向数据绑定采用脏检查（dirty-checking）机制。ng只有在指定事件触发后，才进入 $digest cycle ：
　　- DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
　　- XHR响应事件 ( $http )
　　- 浏览器Location变动事件 ( $location )
　　- Timer事件( $timeout , $interval )
　　- 执行 $digest() 或 $apply()

四、依赖注入(DI)

　　让咱们能够不用本身实例化就能建立依赖对象的方法. 简单的来讲, 依赖是以注入的方式传递的. 在Web应用中， Angular让咱们能够经过DI来建立像Controllers和Directives这样的对象. 咱们还能够建立本身的依赖对象, 当咱们要实例化它们时, Angular能自动实现注入.

五、解释下什么是$rootScrope以及和$scope的区别？

　　通俗的说$rootScrope 页面全部$scope的父亲。

　　咱们来看下如何产生$rootScope和$scope吧。

　　step1:Angular解析ng-app而后在内存中建立$rootScope。

　　step2:angular回继续解析，找到{{}}表达式，并解析成变量。

　　step3:接着会解析带有ng-controller的div而后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

六、表达式 {{yourModel}}是如何工做的？

　　它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，而且进行标记，因而每碰见一个{{}}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$parse到那个做用域上。

七、factory 和 service，provider是什么关系？

　　　factory 把 service 的方法和数据放在一个对象里，并返回这个对象；service 经过构造函数方式建立 service，返回一个实例化对象；provider 建立一个可经过 config 配置的 service。

从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider，将其定义的内容放在 $get 中返回。factory 和 service 功能相似，只不过 factory 是普通 function，能够返回任何东西（return 的均可以被访问，因此那些私有变量怎么写你懂的）；service 是构造器，能够不返回（绑定到 this 的均可以被访问）；provider 是增强版 factory，返回一个可配置的 factory。

八、ng-if 跟 ng-show/hide的区别有哪些？

1. ng-if 在后面表达式为 true 的时候才建立这个 dom 节点，ng-show 是初始时就建立了，用 display:block 和 display:none 来控制显示和不显示。
2. ng-if 会（隐式地）产生新做用域，ng-switch 、 ng-include 等会动态建立一块界面的也是如此。

九、ng-repeat迭代数组的时候，若是数组中有相同值，会有什么问题，如何解决？

　　会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。固然，也能够 trace by 任何一个普通的值，只要能惟一性标识数组中的每一项便可（创建 dom 和数据之间的关联）。

 十、AngularJS的数据双向绑定是怎么实现的？

　　一、每一个双向绑定的元素都有一个watcher
　　二、在某些事件发生的时候，调用digest脏数据检测。
　　　　这些事件有：表单元素内容变化、Ajax请求响应、点击按钮执行的函数等。
　　三、脏数据检测会检测rootscope下全部被watcher的元素。
　　　　$digest函数就是脏数据监测

十一、angular 的数据绑定采用什么机制？详述原理。

　　Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch ，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到能够被 angular context 处理的事件时， $digest 循环就会触发，遍历全部的 $watch ，最后更新 dom。

十二、单页应用有哪些优缺点？

　　单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 浏览器一开始会加载必需的HTML、CSS和JavaScript，全部的操做都在这张页面上完成，都由JavaScript来控制。所以，对单页应用来讲模块化的开发和设计显得至关重要。

• 速度：更好的用户体验，让用户在web app感觉native app的速度和流畅，
• MVC：经典MVC开发模式，先后端各负其责。
• ajax：重前端，业务逻辑所有在本地操做，数据都须要经过AJAX同步、提交。
• 路由：在URL中采用#号来做为当前视图的地址,改变#号后的参数，页面并不会重载。

　　单页Web应用（single page web application，SPA）是当今网站开发技术的弄潮儿，不少传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动平台上的）也如雨后春笋般涌如今人们的面前，如Gmail、Evernote、Trello等。若是你是一名Web开发人员，却还没开发过或者甚至是没有据说过单页应用，那你已经Out好久了。
单页Web应用和前端工程师们息息相关，由于主要的变革发生在浏览器端，用到的技术其实仍是HTML+CSS+JavaScript，全部的浏览器都原生支持，固然有的浏览器由于具有一些高级特性，从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优势和缺点，网上讲解的文章有不少，这里就不展开论述了。 单页Web应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，以后全部的操做都在这张页面上完成，这一切都由JavaScript来控制。所以，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和设计的重要性不言而喻。

　　优势：

1. 分离先后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把先后端的逻辑混杂在一块儿；
2. 减轻服务器压力，服务器只用出数据就能够，不用管展现逻辑和页面合成，吞吐能力会提升几倍；
3. 同一套后端程序代码，不用修改就能够用于Web界面、手机、平板等多种客户端；

　　缺点：

1. SEO问题，如今能够经过Prerender等技术解决一部分；
2. 前进、后退、地址栏等，须要程序进行管理；
3. 书签，须要程序来提供支持；

1三、{ {now | 'yyyy-MM-dd'} } 这种表达式里面，竖线和后面的参数经过什么方式能够自定义？

app.filter('过滤器名称',function(){
    return function(须要过滤的对象, 过滤器参数1, 过滤器参数2, ...){
        //...作一些事情   
        return 处理后的对象;
    }
}); 

 1四、Angular Directive中restrict 中分别能够怎样设置？scope中@,=,&有什么区别？

　　restrict中能够分别设置:

• A匹配属性
• E匹配标签
• C匹配class
• M 匹配注释

　　在scope中，@,=,&在进行值绑定时分别表示

• @获取一个设置的字符串，它能够本身设置的也可使用{{yourModel}}进行绑定的;
• = 双向绑定，绑定scope上的一些属性；
• & 用于执行父级scope上的一些表达式，常见咱们设置一些须要执行的函数

angular.module('docsIsolationExample', [])  
.controller('Controller', ['$scope', function($scope) {
  $scope.alertName = function() {
      alert('directive scope &');
  }
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      clickHandle: '&'
    },
    template: '<button ng-click="testClick()">Click Me</button>',
    controller: function($scope) {
 
      $scope.testClick = function() {
        $scope.clickHandle();
 
      }  
    }
  };
});

<div ng-app="docsIsolationExample">  
<div ng-controller="Controller">  
  <my-customer click-handle="alertName()"></my-customer>
</div>  

</div> 

 

 1五、有哪些措施能够改善Angular 性能

　　使用一次绑定表达式即{{::yourModel}}

　　减小watcher数量

　　在无限滚动加载中避免使用ng-repeat,关于解决方法能够参考这篇文章

　　使用性能测试的小工具去挖掘你的angular性能问题，咱们可使用简单的console.time()也能够借助开发者工具以及Batarang

1六、你认为在Angular中使用jQuery好么？

　　这是一个开放性的问题，尽管网上会有不少这样的争论，可是广泛仍是认为这并非一个特别好的尝试。其实当咱们学习Angular的时候，咱们应该作到从0去接受angular的思想，数据绑定，使用angular自带的一些api，合理的路由组织和，写相关指令和服务等等。angular自带了不少api能够彻底替代掉jQuery中经常使用的api，咱们可使用angular.element，$http,$timeout,ng-init等。
咱们不妨再换个角度，若是业务需求，而对于一个新人（比较熟悉jQuery）的话，或许你引入jQuery可让它在解决问题，好比使用插件上有更多的选择，固然这是经过影响代码组织来提升工做效率，随着对于angular理解的深刻，在重构时会逐渐摒弃掉当初引入jquery时的一些代码。
因此我以为两种框架说彻底不能一块儿用确定是错的，可是咱们仍是应该尽力去遵循angular的设计。

1七、列出至少三种实现不一样模块之间通讯方式？　

　　Service

   　　 events,指定绑定的事件

　　使用 $rootScope

　　controller之间直接使用$parent, $$childHead等

  　directive 指定属性进行数据绑定

1八、angular中的$http　　

　　$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

　　咱们可使用内置的$http服务直接同外部进行通讯。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

1九、写controlloer逻辑的时候 你须要注意什么？

　　1.简化代码（这个是全部开发人员都要具有的）
　　2.坚定不能操做dom节点 这个时候可能会问 为何不能啊
　　你的回答是：DOM操做只能出如今指令（directive）中。最不该该出现的位置就是服务（service）中。Angular倡导以测试驱动开发，在service或者controller中出现了DOM操做，那么也就意味着的测试是没法经过的。固然，这只是一点，重要的是使用Angular的其　　中一个好处是啥，那就是双向数据绑定，这样就能专一于处理业务逻辑，无需关系一堆堆的DOM操做。若是在Angular的代码中还处处充斥着各类DOM操做，那为何不直接使用jquery去开发呢。

20、angular和jquery的区别　

　　angular是基于数据驱动，因此angular适合作数据操做比较繁琐的项目（这里能够再提一下单页面应用，若是你不会福利又来了 http://www.zhihu.com/question/20792064）

　　jquery是基于dom驱动，jquery适合作dom操做多的项目

2一、阐述下你对mvc和mvvm的理解

　　随着代码规模愈来愈大，切分职责是大势所趋，还有为了后期维护方便，修改一块功能不影响其余功能。还有为了复用，由于不少逻辑是同样的。而MVC只是手段，终极目标是模块化和复用。

　　在angular中MVVM模式主要分为四部分：

　　　　View：它专一于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
　　　　ViewModel：它是View和Model的粘合体，负责View和Model的交互和协做，它负责给View提供显示的数据，以及提供了View中Command事件操做Model的途径；在angular中$scope对象充当了这个ViewModel的角色；
　　　　Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操做，因此模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；而　　　　　　　　　　angular中的service则是封装和处理这些与Model相关的业务逻辑的场所，这类的业务服务是能够被多个Controller或者其余service复用的领域服务。
　　　　Controller：这并非MVVM模式的核心元素，但它负责ViewModel对象的初始化，它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上，使得应用界面在启动加载的时候达到一种可用的状态。

　　mvc的界面和逻辑关联紧密，数据直接从数据库读取。mvvm的界面与viewmode是松耦合，界面数据从viewmodel中获取。因此angularjs更倾向于mvvm

　　mvvm的优势：

低耦合：View能够独立于Model变化和修改，同一个ViewModel能够被多个View复用；而且能够作到View和Model的变化互不影响；　　　　可重用性：能够把一些视图的逻辑放在ViewModel，让多个View复用；　　　　独立开发：开发人员能够专一与业务逻辑和数据的开发（ViewModemvvmdi计人员能够专一于UI(View)的设计；