AngularJS introductory tutorial AngularJS instructions_AngularJS

WBOY

Release： 2016-05-16 15:05:03

Original

1656 people have browsed it

Friends who are familiar with HTML know that HTML has many attributes. For example, the href attribute of the tag can be used to specify the URL address of the link, and the type attribute of the 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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

AngularJS directive example

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

Copy after login

The

ng-app directive tells AngularJS that the current

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>

Copy after login

The above example will be parsed into the following HTML

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

Copy after login

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>

Copy after login

will be parsed into the following HTML:

<ul>
<li>Jani, Norway</li>
<li>Hege, Sweden</li>
<li>Kai, Denmark</li>
</ul>

Copy after login

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>

Copy after login

The above example parses into:

Custom instructions!

Instructions can be called in the following ways:

Element name:

Attribute:

Class name:

Comment:

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

Copy after login

AngularJS above will only allow property calls.