12个AngularJS面试必备问题 *

使用AngularJS核心功能在应用模块之间进行通信的常见方法包括:

• Using services
• Using events
• By assigning models on $rootScope
• 直接在控制器之间使用 $parent, $$childHead, $$nextSibling, etc.
• 直接在控制器之间使用 ControllerAs, or other forms of inheritance

使用服务肯定很容易测试. 服务被注入，在测试中，可以使用真实的服务，也可以模拟它.

Events can be tested. 在单元测试控制器中，它们通常是实例化的. 为了测试$rootScope上的事件，它必须被注入到测试中.

针对任意模型的存在测试$rootScope是可测试的, 但是通过$rootScope共享数据并不是一个好的做法.

对于测试控制器之间的直接通信，可能应该模拟预期的结果. 否则，需要手动实例化控制器以获得正确的上下文.

端到端测试是针对一个正在运行的应用程序执行的，这是一个完全初始化的系统. 它们通常生成一个浏览器实例，并通过用户界面实际输入命令. 编写的代码由自动化程序评估，例如Selenium服务器(webdriver)。. 该程序向浏览器实例发送命令, 然后评估可见结果并向用户报告.

断言由另一个库处理，对于Protractor，默认是Jasmine. Before Protractor, 有一个模块叫Angular Scenarios, 通常是通过卡玛来执行的, and is now deprecated. 如果您想测试混合应用程序，可以使用另一个Selenium服务器，称为Appium.

Testing can be handled manually, 也可以委托给持续集成服务器, 无论是定制的还是特拉维斯提供的, SauceLabs, and Codeship.

代码是异步的，尽管它是以同步方式编写的. 在幕后发生的事情是，所有这些函数都在控制流上返回承诺. 甚至可以使用“量角器”直接访问.promise.controlFlow() "，以及返回对象的两个方法".execute()” and “.await()”.

其他webdriver库，如wd http://github.需要直接使用回调或承诺链.

第一个是AngularJS事件, “$destroy”, 第二个是jqLite / jQuery事件“$destroy”. 第一个可以被AngularJS作用域使用，只要它们是可访问的, 例如在控制器或链接函数中.

考虑下面两个发生在指令的postLink函数中的情况. The AngularJS event:

scope.$on(‘$destroy’, function () {
  // handle the destroy, i.e. clean up.
});

And

element.on(‘$destroy’, function () {
  // jQuery插件已经有了这个处理程序.
  // angular.element(document.body).off(‘someCustomEvent’);
});

每当删除节点时，jqLite / jQuery事件被调用, 如果不拆除范围，这可能会发生.

两者的关键都是将函数的结果赋值给一个变量.

To cleanup the timeout, just “.cancel()” it:

var customTimeout = $timeout(function () {
  // arbitrary code
}, 55);

$timeout.cancel(customTimeout);

同样适用于“$interval()”.

To disable a watch, just call it.

// .$watch()返回一个注销函数，我们将其存储到一个变量中
var deregisterWatchFn = $rootScope.$watch(' someGloballyAvailableProperty '， function (newVal) {
  if (newVal) {
    //我们调用注销函数来禁用手表
    deregisterWatchFn();
    ...
  }
});

The flow is as follows:

首先，执行" $compile() "函数，它返回两个链接函数，preLink和postLink. 该函数对每个指令执行，从父指令开始，然后是子指令，然后是孙子指令.

其次，每个指令执行两个函数:控制器和prelink函数. 执行顺序还是从父元素开始，然后是子元素，然后是孙子元素，依此类推.

最后一个函数postLink以相反的顺序执行. 也就是说，它首先对孙辈执行，然后是子辈，然后是父级.

关于在AngularJS中如何处理指令的一个很好的解释可以在 AngularJS教程:揭秘自定义指令 post on the Toptal blog.

它依赖于$interpolation，一个由编译器调用的服务. 它计算可能包含AngularJS表达式的文本和标记. 对于每个插入的表达式，都会设置一个“watch()”. $interpolation返回一个函数，它只有一个参数" context ". 通过调用该函数并提供一个作用域作为上下文, 表达式是" $parse() " d.

简而言之，在每个摘要周期中，将所有范围模型与其先前的值进行比较. That is dirty checking. 如果检测到更改，则触发该模型上设置的手表. 然后执行另一个摘要循环，以此类推，直到所有模型都稳定.

可能有必要提一下，没有“.$digest()” polling. 这意味着每次调用都是故意的. 只要使用了核心指令, we don’t need to worry, 但是，当外部代码更改模型时，需要手动调用摘要周期. Usually to do that, “.使用$apply() "或类似的，而不是".$digest()” directly.

官方推荐的两种生产方法是禁用调试数据和启用严格的DI模式.

第一个可以通过$compileProvider来启用:

myApp.配置(function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
});

该调整禁止向元素附加作用域，从而使控制台中无法访问作用域. 第二个可以设置为一个指令:

性能的提高在于注入的模块被显式地注释了, 因此不需要动态地发现它们.

您不需要自己注释，只需使用一些自动构建工具和库即可.

Two other popular ways are:

• 尽可能使用一次性绑定. Those bindings are set, e.g. 在“{{::someModel}}”中，通过在模型前面加两个冒号进行插值. 在这种情况下，没有设置手表，并且在摘要期间忽略模型.
• 使$httpProvider使用applyAsync:

myApp.配置(function ($httpProvider) {
  $httpProvider.useApplyAsync(true);
});

它只执行一次附近的摘要调用，使用零超时.

$rootScope is the parent object of all $scope 在网页中创建的Angular对象.

DOM是文档对象模型. It’s the view part of the UI. 我们在页面元素中所做的任何更改都会反映在DOM中.

BOM是浏览器对象模型，它指定了全局浏览器对象 window, localstorage, and console.