Latest web development tutorials

AngularJS directives

The new property is called by AngularJS directives to extend HTML.

AngularJS built-in instructions for the application to add functionality.

AngularJS allows you to customize instruction.

AngularJS directives

AngularJS instruction is an extension of HTML attributes with the prefix ng-.

ng-app instructions to initialize a AngularJS application.

ng-init command to initialize the application data.

ng-model command the element values (such as the value of the input field) bound to the application.

Complete instructions can be found in the contents of AngularJS reference manual .

AngularJS examples

<div ng-app="" ng-init="firstName='John'">

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

</div>

try it"

ng-app directive tells AngularJS, <div> element is AngularJS application of the "owner."

Note A Web page can contain multiple run AngularJS applications in different elements.

Data Binding

In the above example {{firstName}} AngularJS expression is a data-binding expression.

AngularJS data bindings, synchronized with AngularJS AngularJS expression data.

{{FirstName}} by ng-model = "firstName" synchronization.

In the next example, two text field is computed via two synchronization instruction ng-model:

AngularJS examples

<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

try it"

Note Use ng-init is not very common. You will learn to be a better way to initialize the data in the controller chapter.

Repeat HTML elements

ng-repeat instruction repeats an HTML element:

AngularJS examples

<Div ng-app = "" ng-init = "names = [ 'Jani', 'Hege', 'Kai']">
<P> Use ng-repeat to loop through the array </ p>
<Ul>
<Li ng-repeat = "x in names">
{{X}}
</ Li>
</ Ul>
</ Div>

try it"

ng-repeat instruction is used in an array of objects:

AngularJS examples

<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>

try it"

Note CRUD AngularJS perfect support database (increase Create, read Read, Update Update, Delete Delete) applications.
Think of examples of objects into records in the database.

ng-app directive

ng-app directive defines the root element AngularJS application.

ng-app instructions when the page is loaded automatically booted (automatic initialization) applications.

Later you will learn how to ng-app by a value (for example, ng-app = "myModule") connected to the code module.

ng-init command

ng-init instruction AngularJS application defines the initial value.

Under normal circumstances, do not use ng-init. You will use a controller or module to replace it.

Later you will learn more about controllers and modules.

ng-model directive

ng-model directive bind HTML elements to the application data.

ng-model directive can also:

  • Provide verification of application data type (number, email, required).
  • Provides status for the application data (invalid, dirty, touched, error).
  • Provide CSS classes for HTML elements.
  • Bind HTML elements to the HTML form.

ng-repeat instruction

ng-repeat instruction for collection (array) of each item will clone a HTML element.


Create a custom command

AngularJS addition to the built-in instructions, we can also create custom commands.

.directive Function you can use to add custom commands.

To call a custom command, you need to add a custom command name on the HTML element.

Use hump method to name adirective, w3bigDirective, but when you need to use it -segmentation, w3big-directive:

AngularJS examples

<Body ng-app = "myApp ">

<W3big-directive> </ w3big -directive>

<Script>
var app = angular.module ( "myApp", []);
app.directive ( "w3bigDirective", function () {
return {
template: "<h1> Instruction </ h1>!"
};
});
</ Script>

</ Body>

try it"

You can call instruction in the following ways:

  • Element name
  • Attributes
  • The class name
  • Note

The following by way of example can output the same result:

Element name

<W3big-directive> </ w3big -directive>

try it"

Attributes

<Div w3big-directive> </ div>

try it"

The class name

<Div class = "w3big-directive "> </ div>

try it"

Note

<- Instruction:! W3big-directive ->

try it"

limited use

You can limit your instruction can only be invoked by a particular way.

Examples

By addingrestrict property and set the value only "A" , to set the command can only be called by way of property:

var app = angular.module ( "myApp" , []);
app.directive ( "w3bigDirective", function ( ) {
return {
restrict: "A",
template: "<h1> Instruction </ h1>!"
};
});

try it"

restrict value may be the following:

  • E is used as the element name
  • A use as an attribute
  • C is used as the class name
  • M as a comment

restrict default is EA , which can be invoked by the command element and attribute names.