Explanation of expressions and instructions in the JavaScript AngularJS framework-AngularJS

This article mainly introduces expressions and instructions in the AngularJS framework of JavaScript. It lists several common command attributes to describe, for more information, see "command attributes", which are functions bound to DOM elements. They can call methods, define behaviors, bind controllers and $ scope objects, operate DOM, and so on.

When the browser starts to parse HTML (as usual), the directive attribute on the DOM element will be parsed like other attributes.

When an Angular. when the js application is started, the Angular compiler will traverse the DOM tree (starting from the DOM element with the ng-app directive attribute, as we mentioned in the first article of this series ), parse HTML and look for these Directive property functions.

When one or more of these Directive attribute functions are found on a DOM element, they are collected, sorted, and executed in priority order.

Each directive property has its own priority, and you can find more in-depth information in our article on Directive properties (http://www.ng-newsletter.com/posts/directives.html.

The dynamic and response capabilities of Angular. js applications are all attributed to the Directive attributes. We have seen some command attributes before:

Ng-model

Your name: {{ name }}

Try it

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

$ Watch function (in use) runs in Angular. js event loop (I .e. $ digest loop), so that Angular. js can update DOM accordingly. Please follow our advanced article on $ digest loop!

In the development of Angular. js applications, we use Directive attributes to bind behavior to the DOM. The use of command attributes is critical to the dynamic and responsive nature of an application. Angular. js provides many default directive attributes. Now let's take a look at several of them and how to use them.

Several common command attributes:

{Expression }}

This double braces directive uses the $ watch () function to register a listener for the expressions in the brackets. This $ watch function enables Angular. js to automatically update views in real time.

So what is an expression?
To understand the operation of command attributes, we must first understand the expression, so here we will take a look at the fifth part of this series-expressions. We have seen expressions in previous examples, such as {person. name} and {clock }}.

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

In the final example (10*3.3 | currency), a filter is used. The following sections of this series will introduce filters in depth.

The expression is a bit like the eval (javascript) result. They are processed by Angular. js and have the following important and unique properties:

All expressions are executed in the context of scope. Therefore, all variables in the local $ scope can be used.
If the execution of an expression causes type errors or reference errors, these errors will not be thrown.
The expression does not allow any function to control the function flow (such as if/else and other conditional statements)
The expression can accept one or more filters connected in series.
Try it

Try entering "person", "clock", or other mathematical formula such as 2 + 4. You can even operate scope. For example, try entering person. name = "Ari"; person. age = 28; person or clock.

Expressions run in the scope that calls them, so an expression can access and operate everything on its scope. Therefore, you can use an expression to traverse the attributes of its scope (we will see this application in ng-repeat), call functions in the scope, or perform mathematical operations on variables in the scope.

Now, let's go back to the command attributes...

Ng-init

The ng-init command attribute is a function that runs at startup (before the program enters the running stage ). It allows us to set the initial variable value before running the program:

Hello, {{ name }}

Try it

Hello, Ari Lerner

Ng-click

The ng-click Command property registers a click event listener for the DOM element. When a click event occurs on the DOM element (that is, when the button or link is clicked), Angular. js executes the expression content and updates the view accordingly.

Add oneCurrent counter: {{ counter }}

Try it

You can also use ng-click to call functions written in controller and bound to $ scope. For example:

Say hello

Functions in controller:

app.controller('MyController', function($scope) {  $scope.sayHello = function() {   alert("hello!");  } });

Try it

Ng-show/ng-hide

The ng-show and ng-hide commands show and hide the DOM that they belong to based on the truthy value of the given expressions.

We won't go into depth here, but you should be familiar with the concepts of "truthy" and "falsy" in JavaScript variable values.

Flip the shouldShow variable 
  Showing {{ shouldShow }} 
 
  Hiding {{ shouldShow }} 

Ng-repeat

The ng-repeat command traverses each data element in a dataset and loads an HTML template to render the data. The Reusable template element is the DOM element that we have bound to this directive attribute. Each DOM element rendered using a template has its own scope.

Before explaining more, let's take a look at an example. Assume that our controller has an array of such data elements:

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

In view, we can use ng-repeat to traverse the data in this set:

 
 
  
  
  
{{ person.name }}
 
 
 

We can also use the ng-repeat expression to traverse a set of key-value pairs. For example, suppose we have a data set of a person and their favorite colors:

$scope.people = {  'Ari': 'orange',  'Q': 'purple',  'Sean': 'green' }

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

 
 
  
  
  
{{ name }}'s favorite color is {{ color }}