Shulou(Shulou.com)06/02 Report--

What are the instructions and expressions of AngularJS? for this question, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Instruction attribute

So far, we have mentioned the concept of "instruction attribute" several times, but we have never delved into what it is. In fact, "instruction attributes" are functions bound to DOM elements that can call methods, define behaviors, bind controller and $scope objects, manipulate DOM, and so on.

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

When an Angular.js application starts, the Angular compiler traverses the DOM tree (starting with the DOM element with the ng-app instruction attribute, as we mentioned in this series), parses the HTML, and looks for these instruction attribute functions.

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

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

The dynamic and responsive ability of Angular.js applications should be attributed to the instruction attributes. We have seen some use cases for instruction attributes before:

Ng-model

Input ng-model= "name" name= "Name" placeholder= "Enter your name" / > Your name: {{name}}

Just try it

The ng-model directive attribute (which we used in the previous section) 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 to this value (similar to the event listener function in JavaScript).

The $watch function (when in use) runs in Angular.js 's event loop (that is, the $digest loop) to enable Angular.js to update DOM accordingly. Stay tuned for our advanced article on the $digest loop!

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

Several common instruction attributes

{{expression}}

This double curly braces instruction attribute uses the $watch () function to register a listener for the parenthesized expression. It is this $watch function that allows Angular.js to update view automatically in real time.

So, what exactly is an expression?

Expression.

To understand the operation of instruction properties, we must first understand expressions, so here we take a detour. We have seen expressions in previous examples, such as {{person.name}} and {{clock}}.

The expression looks a bit like the result of eval (javascript) at a rough glance. They are processed by Angular.js to have the following important and unique properties:

All expressions are executed in the scope context, so you can use all the variables in the local $scope.

If the execution of an expression results in type errors or reference errors, these errors will not be thrown.

Any function that controls the flow of a function is not allowed in the expression (such as conditional statements such as if/else)

The expression can accept one or more concatenated filters.

Just try it

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 run in the scope that calls them, so an expression can access and manipulate everything on its scope. Thus, you can use expressions to iterate through its scope properties (we'll see this application in ng-repeat), call functions in scope, or perform mathematical operations on variables in scope.

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

Ng-init

The ng-init instruction 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:

Hello, {{name}}

Just try it

Ng-click

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

Add one Current counter: {{counter}}

Just try it

We 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!");}})

Just try it

Ng-show / ng-hide

The ng-show and ng-hide directives show or hide a portion of the DOM depending on whether the expression is truthy.

The ng-show and ng-hide instructions show and hide the part of DOM to which they belong, depending on the truthy of the value assigned to them.

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

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

Just try it

Figure 6

Ng-repeat

The ng-repeat instruction traverses each data element in a data set and loads the HTML template to render the data. The template element that is reused is the DOM element that we bound to this instruction attribute. Each DOM element rendered with a template has its own scope.

Before we explain more, let's look at an example. Suppose we have an array of data elements 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:

{{person.name}}

Please take a look.

Ari

Q

Sean

Anand

With a slight change to the expression assigned to ng-repeat, we can also use it to iterate through a collection of pairs of key-value data. For example, suppose we have a data set of people's names and their favorite colors:

Please look at Ari Q Sean Anand

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

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

Please take a look.

Ari's favorite color is orange

Q's favorite color is blue

Sean's favorite color is green

Angular.js does not provide many directive attributes that are directly available, but it allows us to easily create our own directive attributes. Please check out our instruction attribute creation guide here: http://www.ng-newsletter.com/posts/directives.html

Instruction attributes in our application

In the previous article, our radio app only retrieved a list of audio programs from NPR API:

$scope.programs = data.list.story

Now that we've learned how to traverse a list, we can use ng-repeat to traverse the program list as we just did in our radio application:

{{program.title.$text}}

What NPR API gives us is a list with title+$text, a structure that is unique to NPR API, not Angular.js.

Now we have listed the programs and their titles, but we can't click on them and play them yet. With ng-click, we can add a click function to the HTML element:

{{program.title.$text}}

With this step, we bind a play action function to the DOM element in the list. Now, we create this play action function in PlayerController, and then we have a full-featured audio application:

/ / format.mp4.$text is the path to this audio mp4 file given to us by NPR API $scope.play = function (program) {if ($scope.playing) audio.pause (); var url = program.audio [0] .format.mp4. $text; audio.src = url; audio.play (); / / the status of the storage player is $scope.playing = true;}

Now this application is fully functional, but it is not very good-looking. And as we continue to add new features, the code will swell and become difficult to manage. We can create our own instruction attributes to help us reduce complexity.

To learn more about custom instruction attributes, take a look at our in-depth article on instruction attributes: http://www.ng-newsletter.com/posts/directives.html

To create custom directive properties, we use the directive method of the app object:

App.directive ('nprLink', function () {return {restrict:' EA', require: ['^ ngModel'], replace: true, scope: {ngModel:'=', play:'&'}, templateUrl:'/ views/nprListItem.html', link: function (scope, ele, attr) {scopescope.duration = scope.ngModel.audio [0] .room.$ text })

We will not explain the meaning of each option one by one, because we have a special in-depth article to introduce them (http://www.ng-newsletter.com / posts/directives.html). All we need to understand here is that now we can use this custom instruction attribute in HTML, which replaces its DOM element with the content in the template that our given templateUrl points to (in / views/nprListItem).

Now, our main HTML file can be kept tidy, and the view that will be used to render the contents of the list will be created in this separately extracted template file:

{{ngModel.title.$text}} Link

Notice that we use ngModel to point to the previous program data in the template file, because we set it when we created the custom instruction properties.

Now, instead of writing as many HTML as above in the main HTML file, we simply replace it with our custom instruction attribute npr-link:

To save this code base locally, make sure that you have installed the git,clone code base, and then check out the part5 branch of it. We use XHR to get the template, so you need to run the code for this chapter on the local server. In the part5 branch, we provide server-side code:

Git clone https://github.com/auser/ng-newsletter-beginner-series.git git checkout-b part5. / bin/server.sh this is the answer to the question about what the instructions and expressions of AngularJS are. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.