AngularJS interview questions

AngularJS quiz questions

  • 1.

    When a scope is terminated, two similar “destroy” events are fired. What are they used for, and why are there two?

    Answer:

    The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”. The first one can be used by AngularJS scopes where they are accessible, such as in controllers or link functions.

    Consider the two below happening in a directive’s postLink function. 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.

    View
  • 2.

    This is a simple test written for Protractor, a slightly modified example from Protractor docs:

    it('should find an element by text input model', function() {
      browser.get('/some-url');
    
      var login = element(by.model('username'));
      login.clear();
      login.sendKeys('Jane Doe');
      var name = element(by.binding('username'));
      expect(name.getText()).toEqual('Jane Doe');
    
      // Point A
    });
    

    Explain if the code is synchronous or asynchronous and how it works.

    Answer:

    The code is asynchronous, although it is written in a synchronous manner. What happens under the hood is that all those functions return promises on the control flow. 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 https://github.com/admc/wd, require the direct use of callbacks or promise chains.

    View
  • 3.

    The most popular e2e testing tool for AngularJS is Protractor. There are also others which rely on similar mechanisms. Describe how e2e testing of AngularJS applications work.

    Answer:

    The e2e tests are executed against a running app, that is a fully initialized system. They most often spawn a browser instance and involve the actual input of commands through the user interface. The written code is evaluated by an automation program, such as a Selenium server (webdriver). That program sends commands to a browser instance, then evaluates the visible results and reports back to the user.

    The assertions are handled by another library, for Protractor the default is Jasmine. Before Protractor, there was a module called Angular Scenarios, which usually was executed through Karma, and is now deprecated. Should you want to e2e test hybrid apps, you could use another Selenium server, called 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.

    View
  • 4.

    Which means of communication between modules of your application are easily testable?

    Answer:

    Using a service is definitely easy to test. Services are injected, and in a test either a real service can be used or it can be mocked.

    Events can be tested. In unit testing controllers, they usually are instantiated. For testing events on $rootScope, it must be injected into the test.

    Testing $rootScope against the existence of some arbitrary models is testable, but sharing data through $rootScope is not considered a good practice.

    For testing direct communication between controllers, the expected results should probably be mocked. Otherwise, controllers would need to be manually instantiated to have the right context.

    View
  • 5.

    List at least three ways to communicate between modules of your application using core AngularJS functionality.

    Answer:

    Common ways to communicate between modules of your application using core AngularJS functionality include:

    • 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
    View
  • 6.

    What is controller in AngularJS

    Answer:

    In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.

    When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.

    If the controller has been attached using the controller as syntax then the controller instance will be assigned to a property on the new scope.

    View

© 2017 QuizBucket.org