home

Angularjs Directives

Angularjs Directives are used to extend html. Directives is the key part of angularjs methodology.

Directive always starts with ng-prefix, here you some directive list which is mostly used.

ng-ap – starts (initializes) an a angularjs application.

ng-init – container of data(initializes application data).

ng-model – binds the value of html controls.

ng-repeat - repeats the each html in the loop based on the data availability.

Angularjs ng-app directive

ng-app directive is the owner of the application this is a root element also its initialized as ng app(angularjs application). Then only remaining programs and all will load.

We have a simple div containing with ng-app directive.

<div ng-ap=""> angularJS application initialization</div>

Angularjs ng-init directive

ng-init is like a javascript array store the variable along with values. Below example will explain the clear picture of ng-init.

<div ng-init="persons=[
{name:'Mike zio', age:23, salary:25000},
{name:'mark VK Ab', age:36, salary:644000},
{name:'Obama', age:43, salary:500000},
{name:'Jhon Ab', age:23, salary:3000},
{name:'larry page Ab', age:36, salary:4000},
{name:'Robert WZ', age:65, salary:9000}]"></div>

Angularjs ng-model directive

ng-model defines the variable (model) to be used and binds the value of html into controls. Follow the below example code about ng-model directive.

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

Angularjs ng-repeat directive

The name of directive itself describes the meaning what it is. ng-repeat directive repeats the required things in context.

<ul ng-repeat="persons in people">