AngularJs Directive for the beginner

Sunday, January 31st, 2016 (1 Comment)

In this article we will explore the concept AngularJs Directive, you will find many surprises as we learn it, we have used it in the previous example but did not know it was AngularJs Directive.

1. What is AngularJs Directive ?

Directives is an extension of HTML or attribute of the HTML tags that define Angular, Directive beginning with the prefix <ng->. As in the previous example, to declare a Directive Controller shall we declare ng-controller, it is too simple.

Example: we use three Directives (ng-app, ng-controller, ng-model, ng-bind, ng-init):

Demo

  • Line 8: declare ng-app Directive, it will define an application in angularJs
  • Line 9: declare ng-controller Directive to handle data
  • Line 11: ng-model Directive link data of the application to the control AngularJS of HTML input.
  • Line 14: ng-bind Directive mount data of the application AngularJs to HTML tags
  • Line 15: ng-init Directive initializes the initial value and display this value.

Output:

We will use the directive to declare ng-model and model-bind to retrieve data from the model. But for the two Directives ng-bind and ng-model know each other, then its value must be the same (ng-model = “name”, ng-bind = “name”).

2. Define AngularJs Directive

In addition to the Directive is available, AngularJs also allows users to manually create the custom of own Directive.

Example 1: Build a Directive appear content greeting “Welcome to the website lvtutorial.com”

Demo

  • Line 9: create own Directive with name is “lv-directive”.
  • Line 12: lvDirective corresponds to the lv-directive, meaning you have to set named in javascipt (angularJs) by the rule: lv-directive = lvDirective. In lvDirective, it will return an object key is template, this key is HTML. content of lvDirective.

Output:

Example 2: create form input profile using own directive

Demo

  • In this example, template will return html form

Output:

 

Tags: ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

One Comment:

  1. WilliamCax

    I truly appreciate this article.Really looking forward to read more. Awesome. Laliotis

Leave a Reply

Your email address will not be published. Required fields are marked *