The best AngularJS directives Tutorial In 2024, In this tutorial you can learn AngularJS directives,AngularJS examples,Data Binding,AngularJS examples,Repeat HTML elements,AngularJS examples,AngularJS examples,ng-app directive,ng-init command,ng-model directive,ng-repeat instruction,Create a custom command,AngularJS examples,limited use,
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 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 .
ng-app directive tells AngularJS, <div> element is AngularJS application of the "owner."
A Web page can contain multiple run AngularJS applications in different elements. |
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:
Use ng-init is not very common. You will learn to be a better way to initialize the data in the controller chapter. |
ng-repeat instruction repeats an HTML element:
ng-repeat instruction is used in an array of objects:
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 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 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 bind HTML elements to the application data.
ng-model directive can also:
ng-repeat instruction for collection (array) of each item will clone a HTML element.
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:
You can call instruction in the following ways:
The following by way of example can output the same result:
Element name
Attributes
The class name
Note
You can limit your instruction can only be invoked by a particular way.
By addingrestrict property and set the value only "A"
, to set the command can only be called by way of property:
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.