从浅入深总结Angular.js的十个面试问题

1.ng-show/ng-hide和ng-if有什么区别？

我们都知道ng-show/ng-hide实际上是通过显示来隐藏和显示的。而ng-if实际上控制着dom节点的添加和删除。因此，如果我们根据不同的条件加载dom节点，ng-if的性能要优于ng-show。

其次，解释什么是$ rootrope以及它与$scope的区别。

通俗地说，$ rootrope page是所有$scope之父。

让我们看看如何生成$rootScope和$scope。

Step1:Angular解析ng-app并在内存中创建$rootScope。

Step2:angular继续解析，找到{{}}表达式并将其解析为变量。

然后，步骤3:用ng-controller解析div，并指向一个控制器函数。此时，控制器函数成为$scope对象的一个实例。

3.表达式{{yourModel}}是如何工作的？

这取决于$插值服务。初始化页面html后，会找到这些表达式并标记出来，所以每次遇到一个{{}}，就会设置一个$watch。并且$interpolation将返回一个带有上下文参数的函数。当该函数最终被执行时，它可以被视为该范围的表达式$parse。

4.《Angular》中的消化周期是多少？

在每个摘要周期中，angular总是比较范围内模型的值。一般来说，摘要周期是自动触发的，我们也可以使用$apply手动触发。

v如何取消$timeout并停止$watch()？

要停止$timeout，我们可以使用取消：

var custom time out=$ time out(function(){//your code }，1000)；$ time out . cancel(custom time out)；停下一块100美元的手表：

//.$watch()将返回一个停止注册的函数，我们将该函数存储到变量var unregister watch fn=$ root scope中。$ watch(' some globalyaavailable property '，function (newVal) { if (newVal) { //我们调用了注销函数，以禁用watch unregisterwatchfn()；}});不及物动词如何在角度指令中设置限制？范围上@、=有什么区别？

:可以在限制中单独设置

匹配属性

匹配标签

比赛类

m匹配注释

当然，您可以为多个匹配设置多个值，例如AEC。

在作用域中，@、=，分别表示绑定时的值。

@获取一个set字符串，可以自己设置，也可以通过{{yourModel}}绑定；

=双向绑定，在作用域上绑定一些属性；

用来在父作用域上执行一些表达式，我们经常设置一些要执行的函数

angular . module(' DOCSIS olationexample '，[])。控制器(' controller '，['$scope '，函数($ scope){ $ scope . alertname=function(){ alert('指令作用域')；}}]).指令(' myCustomer '，函数(){ return { restrict: 'E '，scope : { Click handler : ' ' }，template : ' button ng-Click=' testClick()' Click Me/button '，controller : function($ scope){ $ scope . testClick=function(){ $ scope . Click handle()；} } };});div ng-app=' docisolationexample ' div ng-controller=' controller ' my-customer click-handle=' alert name()'/my-customer/div/div为单向绑定。

七、列出至少三种实现不同模块间通信的方法？

1、服务

2.事件，指定绑定的事件

3.使用$rootScope

4.$parent、$$childHead等。直接用于控制器之间

5.指令指定数据绑定的属性

八、有哪些措施可以提高Angular性能

官方提倡，关闭调试，$compileProvider

myApp.config(函数($ compileProvider){ $ compileProvider . debuginfoenabled(false)；});使用绑定表达式一次，即{{:yourModel}}

减少观察者的数量

避免在无限滚动加载中使用ng-repeat

使用性能测试小工具来挖掘你的角度性能问题。我们可以使用简单的console.time()或者使用开发者工具和Batarang

console . time(' TimerName ')；//您的code console . timeend(' TimerName ')；9.你认为在Angular中使用jQuery好吗？

这是一个悬而未决的问题。虽然网上会有很多这样的争论，但普遍认为这不是一个特别好的尝试。其实我们在学习angular的时候，应该从0开始接受angular的思想和数据绑定，使用Angular自带的一些api，合理地组织和编写相关的指令和服务。Angular附带了许多API，可以完全替代jquery中常用的API。我们可以使用angular.element、$http、$timeout、ng-init等等。

我们换个角度来看。对于一个新人(熟悉jquery的人)，或许可以引入jQuery来解决问题，比如在使用插件时有更多的选择。当然，这是通过影响代码组织来提高工作效率。随着对angular理解的加深，在重构过程中，引入jQuery时的一些代码会逐渐被丢弃。(Po老板就是这样的人，希望不要被嘲笑，但是生意赶着走)

所以我觉得说这两个框架完全不能一起使用是不对的，但是要尽量遵循棱角分明的设计。

十、如何进行角度单元测试

我们可以使用karam+jasmine进行单元测试。我们通过ngMock引入angular app，并添加自己的测试用例。一个简单的测试代码：

描述(' calculator '，function () { beforeEach(模块(' calculatorApp ')))；var $控制器；before EACH(inject(function(_ $ controller _){ $ controller=_ $ controller _；}));description(' sum '，function () { it('1 1应该等于2 '，function(){ var $ scope={ }；var controller=$ controller(' CalculatorController '，{ $ scope : $ scope })；$ scope . x=1；$ scope . y=2；$ scope . sum()；expect($scope.z)。托比(3)；});});});XI。摘要

以上就是本文的全部内容，希望对大家的学习和工作有所帮助。有问题可以留言讨论。