Angularjs Introductory Tutorial Angularjs instruction _angularjs

Friends who are familiar with HTML know that HTML has many attributes. For example, the href attribute of the <a> tag can be used to specify the URL address of the link,<input> the type attribute of the label to specify input types. The ANGULARJS instruction is to add functionality to the ANGULARJS application by extending the attributes of the HTML.

The ANGULARJS directive is used to extend HTML. These are the special attributes from the ng-prefix first. We will discuss the following instructions:

Common ANGULARJS directives

The ng-app instruction Initializes a ANGULARJS application.

The ng-init instruction initializes the application data.

The Ng-model directive binds an element value (such as the value of an input field) to an application.

Ng-app directives

Ng-app command to start a ANGULARJS application. It defines the root element. It automatically initializes or launches the application that loads the Web page containing the ANGULARJS application. It is also used to load various ANGULARJS modules ANGULARJS applications. In the following example, we define the default ANGULARJS application using the Ng-app attribute of the DIV element.

<div ng-app= "" > ...
</div>

Ng-init directives

The ng-init instruction initializes the data for a ANGULARJS application. A variable that is used to put a value in an application. In the following example, we will initialize the countries array. Use the JSON syntax to define the countries array.

<div ng-app= "" ng-init= "countries=[{locale: ' en-us ', Name: ' United States '},
{locale: ' EN-GB ', Name: ' United Kingdom '},
{locale: ' en-fr ', Name: ' France '}] ' > ...
</div>

Ng-model directives

The Ng-model directive defines the model/variable that is used in the ANGULARJS application. In the following example, we define a model named "name".

<div ng-app= "" > ...
<p>enter your name: <input type= "text" ng-model= "Name" ></p>
</div>

Ng-repeat directives

The ng-repeat instruction repeats each item in the collection of HTML elements. In the following example, we have iterated the array countries.

<div ng-app= "" > ...
<p>list of Countries with locale:</p>
<ol>
<li ng-repeat= ' country in Countries ' >
{{' Country: ' + country.name + ', Locale: ' + Country.locale}}
</li>
</ol>
</div >

ANGULARJS Instruction Sample

<div ng-app= "" ng-init= "Firstname= ' John '" >
<p> try to enter:</p> in the input box
<p> name: <input type = "text" ng-model= "FirstName" ></p>
<p> you entered as: {{FirstName}}</p>

The ng-app instruction tells Angularjs that the current <div> element is a ANGULARJS application, and the ng-init instruction is used to initialize the data, equivalent to the defined variables in JavaScript. The data binding in Angularjs synchronizes the ANGULARJS expression with the ANGULARJS data. {{FirstName}} is synchronized by ng-model= ' FirstName '. The example above will show you what you entered in the input box on the page.

Attention

A Web page can contain multiple ANGULARJS applications running in different elements.
It is not uncommon to initialize data using Ng-init. You'll learn a better way to initialize data in subsequent chapters.

Ng-repeat directives

The ng-repeat instruction repeats an HTML element, which is equivalent to each loop in JavaScript

<div ng-app= "" ng-init= "names=[' Jani ', ' Hege ', ' Kai ']" >
<p> use ng-repeat to cycle array </p>
<ul >
<li ng-repeat= "x in Names" >
{{x}}
</li>
</ul>
</div>

The above example will parse into the following HTML

<ul>
<li>Jani</li>
<li>Hege</li>
<li>Kai</li>
</ul>

Ng-repeat is acting on an array of objects:

<div ng-app= "" ng-init= "names=[
{name: ' Jani ', Country: ' Norway '},
{name: ' Hege ', Country: ' Sweden '},
{name: ' Kai ', Country: ' Denmark '}] ' >
<p> Loop object:</p>
<ul>
<li ng-repeat= "X in Names" >
{x.name + ', ' + X.country}}
</li>
</ul>
</div>

will be parsed into the following HTML:

<ul>
<li>jani, norway</li>
<li>hege, sweden</li>
<li>kai, Denmark </li>
</ul>

Custom directives

In addition to ANGULARJS built-in directives, we can also create custom directives. You can use the. directive function to add custom instructions. To invoke the custom directive, you need to add a custom directive name on the HTMl element. Use the Hump method to name an instruction, askh5directive, but it needs to be-split when using it: askh5-directive

<body ng-app= "myApp" >
<askh5-directive></askh5-directive>
<script>
var app = Angular.module ("myApp", []);
App.directive ("Askh5directive", function () {return
{
Template: '  
 

The above example resolves:

Instructions can be invoked in several ways:

Element name:<askh5-directive></askh5-directive>

Properties: <div askh5-directive></div>

Class Name: <div class= "Askh5-directive" ></div>

Note:<!--directive: askh5-directive-->

Restrict limit use

Restrict values can be the following:

E is only used for element name

A only Property use

C only used for class name

M limited to annotation use

Restrict the default value is EA, which means that the directive can be invoked by element name and property name.

var app = Angular.module ("myApp", []);
App.directive ("Askh5directive", function () {return
{
restrict: "A",
Template: " 
 

The angularjs above will only allow property calls.

Related reading:

The ANGULARJS expression of the Angularjs introductory tutorial

The above content is a small series to introduce the ANGULARJS introductory tutorial Angularjs instructions, I hope to help you!