|
AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix. We're going to discuss following directives −
ng-app − This directive starts an AngularJS Application.
ng-app directiveng-init − This directive initializes application data. ng-model − This directive defines the model that is variable to be used in AngularJS. ng-repeat − This directive repeats html elements for each item in a collection. ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application. In following example, we've defined a default AngularJS application using ng-app attribute of a div element.
<div ng-app = "">
ng-init directive... </div> ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application. In following example, we'll initialize an array of countries. We're using JSON syntax to define array of countries.
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
ng-model directive... </div> ng-model directive defines the model/variable to be used in AngularJS Application. In following example, we've defined a model named "name".
<div ng-app = "">
ng-repeat directive... <p>Enter your Name: <input type = "text" ng-model = "name"></p> </div> ng-repeat directive repeats html elements for each item in a collection. In following example, we've iterated over array of 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> |
copyright © 2014 - all rights riserved by javatechnologycenter.com