AngularJS Views and Directives

AngularJS – Directives Introduction

In the first text of this tutorial you saw how AngularJS splits an application into views, controllers and models (MCV). This section will dive appear into how to design AngularJS views.

Before we start, first of all setup a sample AngularJS application on which you can use to play around with this example:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.j2eebrain.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
 
<body ng-app="myapp">
 
  <div ng-controller="MyFirstController" >
      <span></span>
  </div>
 
  <script>
    angular.module("myapp", [])
    .controller("MyFirstController", function($scope) {
      //empty controller function
    });
  </script>
 
</body>
</html>

AngularJS Directives

An AngularJS views mix data from the model into a Hyper Text Markup Language (HTML) templates. You can also utilize AngualrJS directives to tell AngularJS how to combine the data into the HTML template. This text provides the most commonly used in AngularJS Directives.

The Interpolation Directives

Interpolation directives are very important directives in AngularJS. An interpolation directive inserts the output of an expression into the Hyper Text Markup Language (HTML) template. This directive you mark where to insert the expression using this sign { {  } }. Example:

<div ng-controller="MyFirstController" >
    <span>{{myData.text}}</span>
</div>

An HTML template is contained within the dive attribute with the ng-controller element. In the Hyper Text Markup Language (HTML) template is a span element, and inside this is interpolation directives. Interpolation directive provides instructs AngularJS to insert the data value myData.text at the given exact location.

An interpolation directive can insert data returned from functions if the model objects. Example:

<div ng-controller="MyFirstController" >
      <span>{{myData.textf()}}</span>
  </div>
 
  <script>
    angular.module("Meraj Ansari", [])
    .controller("MyFirstController", function($scope) {
      $scope.myData = {};
      $scope.myData.textf = function() { return "A text from a function"; };
    });
  </script>

This example, provide the interpolation directive { {myData.textf()} } will call the myData.textf() function on the $scope$ model and object, and inbuilt the text exchanged from that function into that the Hyper Text Markup Language (HTML) template.

The ng-bind Directive

READ  AngularJS Scopes

The ng-bind directive is different to the interpolation directive. This directive uses it by inserting an ng-bind element you want AngularJS to insert into. Example:

<div ng-controller="MyFirstController" >
  <span ng-bind="myData.textf()"></span>
</div>

This will insert the data returned from the myData.text() function into the whole body of structure the span element. This point is noted how { {  } } are not important around the expression inside the ng-bind directive.

Conditional Rendering

An AngularJS can show or hide HTML depending on the nature of data in the model. You can do so utilizing a set of AngularJS directives which is created specifically for that purpose.

The ng-show + ng-hide Directives

These directives are used to show or hide an HTML element depending on the data in the model. These two directives provide the same thing, but are each other’s opposites. Example:

<div ng-controller="MyFirstController" >
      <span ng-show="myData.showIt"></span>
      <span ng-hide="myData.showIt"></span>
  </div>
 
  <script>
    angular.module("myapp", [])
    .controller("MyFirsrtController", function($scope) {
      $scope.myData = {};
      $scope.myData.showIt = true;
    });
  </script>

This example provides two span elements. One is an ng-show directive and the second is an ng-hide directive. Both directives look at the myData.show it Boolean variable to consider if they should show or hide the span element. An ng-show directive will show the element if the model’s value is right and the hide’s element if the model’s value is wrong. The ng-hide directive provide will do alternative and hide the span element if the element if the model’s value is right and the show it if the model is wrong.

The ng-switch Directive

This directive is used if you want to add or remove HTML elements from the DOM based on data in the model. Example:

<div ng-controller="MyFirstController" >
    <div ng-switch on="myData.switch">
        <div ng-switch-when="1">Appear when the switch is 1</div>
        <div ng-switch-when="2"> Appear when the switch is 2</div>
        <div ng-switch-default> Appear when the switch is anything else than 1 and 2</div>
    </div>
</div>
 
<script>
    angular.module("myapp", [])
    .controller("MyFirstController", function($scope) {
      $scope.myData = {};
      $scope.myData.switch = 3;
    });
</script>

This example contains a div element with an ng-switch attribute and an on attribute. The on attribute provide which data in the model to switch on.