AngularJS directive _ AngularJS

AngularJS commands are used to expand HTML. This article introduces AngularJS commands in the AngularJS getting started tutorial. If you are interested, you can learn about them. HTML has many attributes. For example, the href attribute of a tag can be used to specify the URL of a link, The type attribute of the tag can be used to specify the input type. AngularJS commands are used to add functions to AngularJS applications by extending HTML attributes.

AngularJS commands are used to expand HTML. These are all special attributes starting with the ng-prefix. We will discuss the following commands:

Commonly used AngularJS commands

The ng-app command initializes an AngularJS application.

The ng-init command initializes application data.

The ng-model command binds the element value (for example, the value of the input field) to the application.

Ng-app command

The ng-app command starts an AngularJS application. It defines the root element. It automatically initializes or starts applications that load web pages containing AngularJS applications. It is also used to load AngularJS applications of various AngularJS modules. In the following example, the default AngularJS application uses the ng-app attribute of the p element.

...

Ng-init command

The ng-init command initializes the data of an AngularJS application. It is used to set the variables used in the application. In the following example, the countries array is initialized. Use the JSON syntax to define the countries array.

...

Ng-model command

The ng-model command defines the model/variable used in AngularJS applications. In the following example, we define a model named "name.

...
Enter your Name: 

Ng-repeat command

The ng-repeat command repeats every item in the html Element Set. In the example below, we have iterated the array countries.

...
List of Countries with locale:
 
 

  
  
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
 
 

AngularJS command example

In the input box, try to enter:
Name:
You entered: {firstName }}
 

Ng-app Command tells AngularJS current

The element is an AngularJS application. The ng-init command is used to initialize data, which is equivalent to defining variables in javascript. Data Binding in AngularJS synchronizes AngularJS expressions with AngularJS data. {FirstName} is synchronized through ng-model = "firstName. The above example will synchronously display the content you entered in the input box on the page.

Note:

A web page can contain multiple AngularJS applications running in different elements.
Using ng-init to initialize data is not very common. You will learn a better way to initialize data in subsequent chapters.

Ng-repeat command

The ng-repeat command repeats an HTML element, which is equivalent to an each loop in javascript.

Use ng-repeat to loop the Array
 
 

  
  
{X }}
 
 

The above example will be parsed into the following HTML

 
 

  
  
Jani
  
  
Hege
  
  
Kai
 
 

Ng-repeat acts on the object array:

Loop object:
 
 

  
  
{X. name + ',' + x. country }}
 
 

It will be parsed into the following HTML:

 
 

  
  
Jani, Norway
  
  
Hege, Sweden
  
  
Kai, Denmark
 
 

Custom commands

In addition to the built-in commands of AngularJS, we can also create custom commands. You can use the. directive function to add custom commands. To call a custom command, you must add a custom command name to the HTMl element. Use the camper method to name an instruction, askh5Directive, but when using it, it needs to be separated by-: askh5-directive

Script var app = angular. module ("myApp", []); app. direve ve ("askh5direve ve", function () {return {template: "Custom command! "};}); Script

The preceding example is parsed as follows:

Custom commands!

You can call commands in the following ways:

Element name:

Attribute:

Class Name:

Note:

Restrict

The restrict value can be:

E. Only element names are allowed.

A is only applicable to attributes.

C is only applicable to Class names.

M is only applicable to comments.

The default restrict value is EA, that is, the command can be called through the element name and attribute name.

Var app = angular. module ("myApp", []); app. directive ("askh5Directive", function () {return {restrict: "A", template: "Custom command! "};});

The AngularJS above will only allow attribute calls.

Related reading:

AngularJS expression in AngularJS getting started tutorial

The above content is the AngularJS instruction for getting started with AngularJS, which I hope to help you!