AngularJS introductory tutorial AngularJS instructions_AngularJS

Friends who are familiar with HTML know that HTML has many attributes. For example, the href attribute of the 3499910bf9dac5ae3c52d5ede7383485 tag can be used to specify the URL address of the link, and the type attribute of the d5fd7aea971a85678ba271703566ebfd tag can be used to specify the type of input. AngularJS directives add functionality to AngularJS applications by extending HTML attributes.

AngularJS directives are used to extend HTML. These are special properties starting with the ng- prefix. We will discuss the following directives:

Common AngularJS commands

The

ng-app directive initializes an AngularJS application.

The ng-init directive initializes application data.

The

ng-model directive binds element values ​​(such as the value of an input field) to the application.

ng-app directive

The

ng-app directive starts an AngularJS application. It defines the root element. It automatically initializes or starts the application that loads the web page containing the AngularJS application. It is also used to load various AngularJS modules into AngularJS applications. In the example below, we define the default AngularJS application using the ng-app attribute of the div element.

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

ng-init command

The ng-init directive initializes the data of an AngularJS application. It is used to put values ​​into variables used in applications. In the following example, we will initialize the countries array. Use 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 directive

ng-model directive defines models/variables used in AngularJS applications. In the example below, we define a model named "name".

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

ng-repeat directive

The

ng-repeat directive repeats each item in a collection of html elements. In the example below, we have iterated over 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 directive example

<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div> 

The

ng-app directive tells AngularJS that the current dc6dce4a544fdca2df29d5ac0ea9906b element is an AngularJS application. The ng-init directive is used to initialize data, which is equivalent to defining variables in JavaScript. Data binding in AngularJS synchronizes AngularJS expressions and AngularJS data. {{ firstName }} is synchronized through ng-model="firstName". The above example will simultaneously display the content you enter in the input box on the page.

Attention

A web page can contain multiple AngularJS applications running in different elements.
It's not very common to use ng-init to initialize data. You'll learn a better way to initialize data in subsequent chapters.

ng-repeat directive

The ng-repeat directive will repeat an HTML element, which is equivalent to the each loop in JavaScript

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

The above example will be parsed into the following HTML

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

ng-repeat works on object arrays:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</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 command

In addition to AngularJS’s built-in directives, we can also create custom directives. You can add custom directives using the .directive function. To call a custom directive, the custom directive name needs to be added to the HTMl element. Use camelCase to name a directive, askh5Directive, but need to be separated by - 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 : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

The above example parses into:

4a249f0d628e2318394fd9b75b4636b1Custom instructions!473f0a7621bec819994bb5020d29372a

Instructions can be called in the following ways:

Element name: 6864244c5133c8be482ad78135864b813c099c703ad56dc8c4d20f130b6633bb

Attribute: 215a28f1b197530e83ae97e8b7faab7416b28748ea4df4d9c2150843fecfba68

Class name:246c50ea82720d6a9056246ce10521a416b28748ea4df4d9c2150843fecfba68

Comment: 2a0289206c8078df31cf4f0ce271e1f3

restrict use

restrict value can be the following:

E can only be used in element names

A only available for attributes

C can only be used with class names

M only for comments

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

var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});

AngularJS above will only allow property calls.

Related reading:

AngularJS introductory tutorial - AngularJS expressions

The above content is the AngularJS instructions of the AngularJS introductory tutorial introduced by the editor. I hope it will be helpful to everyone!