Vous êtes sur la page 1sur 2

AngularJS Screening Test

Following tests needs to be implemented online using Plnkr. Please do not change URLs. In order to
commit your work just save your data into same instance of Plnkr (same URLs).

1.Events Propagation Test

https://plnkr.co/edit/SlUNEyXVs7nkLlaWPC0L?p=preview

We have an Angular Application with a single Controller and 3 instances of (3 scopes). We would like
to increment the "count" variable from middle scope for both root scope and leaf scope. Please add
two buttons in middle scope view area, one to increase counter of root scope and another one to
increase count of leaf scopes.

2.Scoping Scopes

https://plnkr.co/edit/3hfV5HUiWjzueZlfHkBw?p=preview

We have an Angular application with 3 nested controllers, the requirement is that when the user
types something into the input of main controller, the name variable get updated in all places
where it is bound in the view, but when types something into the input text of last controller, only
one name variable gets updated, the one related to last controller scope. Please adjust code in
order to update all bindings when you change the "name" from grandChild controller.

3. JavaScript Events in Angular

https://plnkr.co/edit/AgEFUJRxWDUndJBg3eex?p=preview

Lets suppose we have an angular app with a button, when you click that button, a text should
appear in the view. As requirement we have to handle the onClick event of the button with VanillaJs.

E.g.

document.getElementById(btn).onclick = function (e) {

});

Notes: Even when for this challenge you cant use directives (see the constraint above), We strongly
recommend to use directives to handling events all the time, when working with AngularJS, try to
avoid to use JavaScript Event handling in real life projects. For the sake of this challenge as a
constraints requirement, we cant use the ng-click directive. As a result, the code doesnt work, so,
the challenge is to solve it without use ng-* AngularJS directive.
4. Angular Scope Reset Test

https://plnkr.co/edit/YK7y7zTL6C7io0W702cs?p=preview

We have an Angular application where we want to create a starting point with the default data in
the Angular scope, so we can create a reset button and restore the scope to the initial values. Please
use a reset button and implement a reset the variable to default data in the Angular scope.

5. Controller Communication

https://plnkr.co/edit/h1YuqqDg1GrQ7AIJGTx6?p=preview

We have two controllers in an AngularJS application and we need to make a change to a variable in
one controller and click a button that will going to talk to the second controller. The challenge for
you is to implement the talkToCtrl2() function, so when you click the button the data in the input
text get passed to Ctrl2 and gets printed in the view.

6. Directives communication:

https://plnkr.co/edit/r8xKWFB2dZp0AjboL37f?p=preview

We have the following use case. Two directives non nested needs to communicate between them.
At least in one direction, from hello directive to bye directive. You need to adjust the code in such
way that bye directive should display "Bye, John Doe!" and then on each change on input in hello
directive, immediately the name should change in bye directive accordingly.

Note: Please do not adjust HTML in index.html. There is no controller in between to have a common
scope. Feel free to add new components like filters, new directives, factories, service, providers etc.

Vous aimerez peut-être aussi