Learning jQuery

Q31. What is ng-bind directive and how to use it?
Ans: ng-bind directive is used for displaying any model property value. It is same as {{ expression }}. But it is advisable to use ng-bind over expression. The reason is, when AngularJS is not loaded (for any reason), then ng-bind directive will not be visible. But in case of expression, whatever you have put within double curly brackets will be displayed in plain text.

<div ng-controller="MyController">
  <h1>My website address is <span ng-bind="website"></span></h1>
</div>

Q32. What is ng-model directive and how to use it?
Ans: ng-model directive is used to bind model's property to any input control like textbox, dropdown etc. It binds the view into the model.

<div ng-controller="MyController"> 
  Enter any text : <input type="text" name="search" ng-model="search" />
  <h2>You have searched for <span ng-bind="search"></span> !</h2> 
</div>

And your model has a property named "search".

var myApp = angular.module('myApp', []);
    myApp.controller('MyController', ['$scope',
      function($scope) {
        $scope.search = 'nothing';
      }
    ]);

And if the property doesn't exist on the scope, it will be created implicitly and added to the scope. But then what's the difference between ng-model and ng-bind?. Well, ng-bind directive is used only for display purpose or one way data binding Model -> View, where ng-model can be used for two way data binding Model -> View and View -> Model. Like in above example, when you change input type text, it is updating the model as well.

Q33. What is ng-controller directive and how to use it?
Ans: ng-controller directive is used to attach controller to view. You must have seen use of this directive in previous examples. Go to Part-3 to read more about ng-controller.

Q34. What is ng-repeat directive and how to use it?
Ans: ng-repeat directive is just like for-each loop in C#. Its like you iterate through a parent collection and process every child element. ng-repeat directive does exactly the same. Consider, you have following data and you want to display this in bulleted list.

$scope.users = [
    {name: 'John',age: 25}, 
    {name: 'Adams', age: 29}, 
    {name: 'Chris', age: 31}, 
    {name: 'Eric', age: 19}, 
    {name: 'Jon', age: 29}, 
    {name: 'Ronald', age: 27}, 
    {name: 'Ben', age: 37}, 
    {name: 'Joe', age: 26}, 
    {name: 'Henry', age: 22}, 
    {name: 'Linda', age: 16}, 
];

And in your view,

<ul>
   <li ng-repeat="user in users">
     {{user.name}} - {{user.age}} years.
   </li>
</ul>

Q35. What are filters and how to use it?
Ans: Filters in Angular allows to select a subset of items using expression. Filters can be added to expressions and directives using a pipe character. Suppose we want to sort the names (previous question demo) and display the result, then we can use "orderBy" filter.

<ul>
   <li ng-repeat="user in users | orderBy:'name' ">
      {{user.name}} - {{user.age}} years.
   </li>
</ul>

Another filter is "limitTo"

<ul>
   <li ng-repeat="user in users | limitTo:5 ">
      {{user.name}} - {{user.age}} years.
   </li>
</ul>

And you can also use filters with expression. For example, if you want to display name in uppercase then

<ul>
   <li ng-repeat="user in users ">
      {{user.name | uppercase}} - {{user.age}} years.
   </li>
</ul>

Below are list of filters supported by Angular.

• filter: Selects a subset of items from array and returns it as a new array.
• currency: Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used.
• number: Formats a number as text.
• date: Formats date to a string based on the requested format.
• json: Allows you to convert a JavaScript object into JSON string.
• lowercase: Converts string to lowercase.
• uppercase: Converts string to uppercase.
• limitTo: Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit.
• orderBy: Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers.

Q36. What is ngShow and ngHide directives and how to use it?
Ans: ng-show and ng-hide directive allow to show or hide elements based on expression value. This is quite useful as you don't have to do showing or hiding yourselves with CSS or JavaScript.

<div ng-hide="true">I'm hidden.</div>
<div ng-show="true">I'm shown.</div>

Or you can pass model values in expression.

<div ng-show="prop1"></div>

So when $scope.prop1 is truthy (element is visible).

var myApp = angular.module('myApp', []); 
myApp.controller('MyController', ['$scope',
   function($scope) {
     $scope.prop1 = true;
     $scope.prop2 = false;
   }
]);

You can also pass function() as expression which returns true or false.

<div ng-hide="IsInputCorrect()"></div>

Q37. What is ng-click and ng-change directive and how to use it?
Ans: The best part about AngularJS directives are that they are self explanatory. Just looking at the name, one can imagine what should be use of the directive. ng-click directive allows you to specify custom behavior when an element is clicked. And ng-change directive is used to find out when any value gets changed for input, select control.

Q38. What is ng-submit directive and how to use it?
Ans: ng-submit directive is used to submit the form. But it only works when your form doesn't contain any action attribute. You can pass a function name to ng-submit and when form is submitted, the function will get called.

<form ng-submit="submit()" ng-controller="SubmitController">

Q39. What is Module in AngularJS and what is angular.module?
Ans: "Module" in AngularJS is like container which can be used to contain different part of your application like controller, services, directives etc. Creating modules not only helps separating the code into individual concerns but makes them reusable and also improves unit-testability. Module can work independently and they can be dependent on other modules.Using angular.module, we can create module in AngularJS.

angular.module(‘module-name’,[dependencies]);

Every module should have a unique name, which is specified in the first parameter. Second parameter is an array, which may contain names of other dependent modules or services. If the module is not dependent then array should be left blank.

// Creating module with no dependency
var myModule = angular.module('myModule', []); 
//OR Creating module with dependency on other modules 
angular.module('myApp', ['dependency1', 'dependency2']);

Q40. What is Data binding in AngularJS and how it works?
Ans: Data binding in generic term is "a process that establishes a connection between the application UI and business logic." Same is true in case of Angular. Data-binding in Angular apps is the automatic synchronization of data between the model and view components. There are two types of bindings.

One Way - One way data binding is when model values are assigned to the HTML elements using data binding syntax like expression or ng-bind directive. But the change in HTML elements don't change the values in the model. So its one-way. We have already seen demo using ng-bind directive (Q31).

Two Way - In simple terms two-way data binding is when the model changes, the view reflects the change, and vice versa. Two-way bindings in AngularJS are created with the ng-model directive. Practically, two-way bindings can be applied only to those elements that allow the user to provide a data value, which means the input, textarea, and select elements. We have already seen demo using ng-model directive (Q32).

That completes Part-4. If you have not read Part 1, Part 2 and Part 3 then do read and keep visiting for upcoming set of interview questions and answers. You can also subscribe to RSS feed, follow us on Facebook and twitter to get the updates about this blog.

You can also Download jQuery Interview Questions free eBook.