Explain the expressions and instructions in the ANGULARJS framework of JavaScript _ANGULARJS

A directive attribute is a function bound to a DOM element that can invoke methods, define behavior, bind controller and $scope objects, manipulate the DOM, and so on.

When the browser starts and parses HTML (as usual), the instruction attributes on the DOM element are parsed like other attributes.

When a angular.js application is started, the angular compiler traverses the DOM tree (starting with the DOM element with the Ng-app instruction attribute, as we mentioned in the first installment of this series), parsing the HTML and looking for the instruction attribute functions.

When one or more such instruction property functions are found on a DOM element, they are collected, sorted, and then executed in order of precedence.

Each instruction attribute has its own priority, and in our feature article on instruction attributes (http://www.ng-newsletter.com/posts/directives.html), you can find more in-depth information.

The dynamics and responsiveness of angular.js applications are attributed to instruction attributes. We've looked at some of the instruction properties before:

Ng-model

<input ng-model= "name" name= "name" placeholder= "Enter Your name"/>
 
 

Try

The Ng-model instruction attribute (which we used in previous chapters) is used to bind the value of the DOM text input box to the $scope model in controller. The specific implementation process is to bind a $watch function (similar to the event listener function in JavaScript) to this value.

The $watch function (when used) runs in the Angular.js event loop (that is, the $digest loop), allowing Angular.js to update the DOM accordingly. Please pay attention to our advanced articles on the $digest cycle!

In the development of angular.js applications, we use instruction attributes to bind behavior to the DOM. The use of instruction attributes is the key to the dynamic and responsive ability of an application. Angular.js provides a number of default instruction attributes, now let's look at a few of them and how to use them.

Several common instruction attributes:

{{expression}}

This double brace instruction property, using the $watch () function, registers a listener with the expression in parentheses. It is this $watch function that allows angular.js to automatically update view in real time.

So what exactly is a formula?
To understand the operation of instruction attributes, we must first understand the expression, so here we go around and look at the fifth part of the series--the expression. In the previous example we have seen expressions such as {{Person.name}} and {{clock}}.

{{8 + 1}}9
{{person}}{' name ': ' Ari Lerner '}
{* 3.3 | currency}}$33.00

In the final example (3.3 | currency) a filter is used. The next section of this series will delve into the filter.

The expression is a bit like the result of an eval (JavaScript). They are processed by angular.js and thus possess the following important and unique properties:

All expressions are executed in the context of scope, so you can use variables from all local $scope.
If the execution of an expression results in a type error or a reference error, these errors will not be thrown.
There is no function in the expression that controls the function flow (such as if/else and other conditional statements)
An expression can accept one or more filters that are concatenated.
Try

Try typing "person", "clock" or other mathematical expressions such as 2+4. You can even manipulate scope, for example, try typing person.name = "Ari"; Person.age = 28; person or clock

Expressions are run in the scope where they are invoked, so an expression can access and manipulate everything on its scope. Thus, you can use an expression to traverse the properties of its scope (which we will see in ng-repeat), invoke the function in scope, or perform mathematical operations on variables in scope.

Now, let's go back to the instruction attribute ...

Ng-init

The Ng-init Directive property is a function that runs at startup (before the program enters the run phase). It allows us to set the value of the initial variable before the program runs:

<b ng-init= ' name = ' Ari Lerner ' >hello, {{name}}</b>

Try

Hello, Ari Lerner

Ng-click

The Ng-click Directive property registers a click event listener for the DOM element. When a Click event occurs on this DOM element (that is, when this button or link is clicked), Angular.js executes the contents of the expression and updates the view accordingly.

<button ng-click= "counter = counter + 1" >add one</button> current
counter: {{counter}}

Try

We can also use Ng-click to invoke functions written in controller and bound to $scope, for example:

<button ng-click= "SayHello ()" >say hello</button>

Functions in the controller:

App.controller (' Mycontroller ', function ($scope) {
  $scope. SayHello = function () {
   alert ("hello!");
  }
 });

Try

Ng-show/ng-hide

The Ng-show and Ng-hide directives Show and hide the part of the DOM to which they belong, based on the authenticity (truthy) of the value of the expression given to them.

We're not going to drill down here, but you should be familiar with the "Truthy" and "falsy" concepts of variable values in JavaScript.

<button ng-init= "shouldshow = True" ng-click= "shouldshow =!shouldshow" >flip the Shouldshow Variable</button >
 <div ng-show= "Shouldshow" >
   
 

Ng-repeat

The ng-repeat instruction traverses each data element in a data set, and the HTML template is loaded to render the data. The template element that is reused is the DOM element in which we bind the instruction attribute. Each DOM element that uses a template rendering has its own scope.

Before we have more explanations, let's look at an example. Suppose we have an array of such a data element in our controller:

$scope. Roommates = [
  {name: ' Ari '},
  {name: ' Q '},
  {name: ' Sean '},
  {name: ' Anand '}
 ];

In view we can use Ng-repeat to traverse the data in this collection:

<ul>
  <li ng-repeat= "person in roommates" >{{person.name}}</li> </ul>

With a slight change to the expression given to ng-repeat, we can also use it to traverse a collection of pairs of key-value data. For example, suppose we have a data collection of names and their favorite colors:

$scope. People = {
  ' Ari ': ' Orange ',
  ' Q ': ' Purple ',
  ' Sean ': ' Green '
 }

To traverse it, we can assign the ng-repeat instruction attribute to this expression: (key, Value) in object:

<ul>
  <li ng-repeat= "(name, color) in people" >{{name}} ' s favorite the color is {{color}}}
  </li>
   </ul>