12 Essential AngularJS Interview Questions *

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

• Using services
• Using events
• By assigning models on $rootScope
• Directly between controllers, using $parent, $$childHead, $$nextSibling, etc.
• Directly between controllers, using ControllerAs, or other forms of inheritance

Using a service is definitely easy to test. 服务被注入，在测试中，可以使用真实的服务，也可以模拟它.

Events can be tested. In unit testing controllers, they usually are instantiated. 为了测试$rootScope上的事件，它必须被注入到测试中.

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

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

端到端测试是针对一个正在运行的应用程序执行的，这是一个完全初始化的系统. 它们通常生成一个浏览器实例，并通过用户界面实际输入命令. 编写的代码由自动化程序评估，例如Selenium服务器(webdriver)。. That program sends commands to a browser instance, then evaluates the visible results and reports back to the user.

断言由另一个库处理，对于Protractor，默认是Jasmine. Before Protractor, there was a module called Angular Scenarios, which usually was executed through Karma, and is now deprecated. 如果您想测试混合应用程序，可以使用另一个Selenium服务器，称为Appium.

Testing can be handled manually, or it can be delegated to continuous integration servers, either custom or ones provided by Travis, SauceLabs, and Codeship.

代码是异步的，尽管它是以同步方式编写的. 在幕后发生的事情是，所有这些函数都在控制流上返回承诺. There is even direct access, using “protractor.promise.controlFlow()”, and the two methods of the returned object, “.execute()” and “.await()”.

Other webdriver libraries, such as wd http://github.com/admc/wd, require the direct use of callbacks or promise chains.

The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”. 第一个可以被AngularJS作用域使用，只要它们是可访问的, such as in controllers or link functions.

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

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

And

element.on(‘$destroy’, function () {
  // respectful jQuery plugins already have this handler.
  // angular.element(document.body).off(‘someCustomEvent’);
});

The jqLite / jQuery event is called whenever a node is removed, which may just happen without scope teardown.

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

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

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

$timeout.cancel(customTimeout);

The same applies to “$interval()”.

To disable a watch, just call it.

// .$watch()返回一个注销函数，我们将其存储到一个变量中
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {
  if (newVal) {
    // we invoke that deregistration function, to disable the watch
    deregisterWatchFn();
    ...
  }
});

The flow is as follows:

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

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

The last function postLink is executed in the inverse order. 也就是说，它首先对孙辈执行，然后是子辈，然后是父级.

关于在AngularJS中如何处理指令的一个很好的解释可以在 AngularJS Tutorial: Demystifying Custom Directives post on the Toptal blog.

它依赖于$interpolation，一个由编译器调用的服务. 它计算可能包含AngularJS表达式的文本和标记. For every interpolated expression, a “watch()” is set. $interpolation返回一个函数，它只有一个参数" context ". By calling that function and providing a scope as context, the expressions are “$parse()”d against that scope.

简而言之，在每个摘要周期中，将所有范围模型与其先前的值进行比较. That is dirty checking. If change is detected, the watches set on that model are fired. 然后执行另一个摘要循环，以此类推，直到所有模型都稳定.

It is probably important to mention that there is no “.$digest()” polling. That means that every time it is being called deliberately. As long as core directives are used, we don’t need to worry, 但是，当外部代码更改模型时，需要手动调用摘要周期. Usually to do that, “.$apply()” or similar is used, and not “.$digest()” directly.

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

The first one can be enabled through the $compileProvider:

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

该调整禁止向元素附加作用域，从而使控制台中无法访问作用域. The second one can be set as a directive:

性能的提高在于注入的模块被显式地注释了, hence they don’t need to be discovered dynamically.

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

Two other popular ways are:

• Using one-time binding where possible. Those bindings are set, e.g. 在“{{::someModel}}”中，通过在模型前面加两个冒号进行插值. 在这种情况下，没有设置手表，并且在摘要期间忽略模型.
• Making $httpProvider use applyAsync:

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

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

$rootScope is the parent object of all $scope Angular objects created in a web page.

The DOM is the Document Object Model. It’s the view part of the UI. Whatever we are changing in page elements is reflected in the DOM.

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