AngularJS Expressions First AngularJS Application

AngularJS Directives

AngularJS directives are used to extend HTML. They are prefixed with ng--Let's discuss the following directives with prefix ng-

ng-app −This directive starts the AngularJS application.
ng-init −This directive initializes application data.
ng-model −This directive defines variable models used in AngularJS.
ng-repeat −This pseudo-instruction repeats HTML elements for each item in a collection.

ng-app directive

ng-The app directive starts the AngularJS application. It defines the root element. When loading a web page containing an AngularJS application, it will automatically initialize or bootstrap the application. It is also used to load various AngularJS modules. In the following example, we use the ng-app attribute of the <div> element to start the AngularJS application.-The app property defines the default AngularJS application.

<div ng-app = "">
　　　...</div>

ng-init directive

ng-The init directive initializes AngularJS application data. It is used to assign values to variables. In the following example, we initialized a set of countries. We define countries using JSON syntax/the array of regions.

<div ng-app = "" ng--US　
　　　{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
　　　...</div>

ng-model directive

ng-The model directive defines models used in AngularJS applications./variable. In the following example, we define a variable namednamemodel.

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

ng-repeat directive

ng-The repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate over countries/region array.

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

Online Examples

The following example shows the usage of all the above directives.

testAngularJS.htm

Example

<html>
　　　<head>
　　　　　　<title>AngularJS Directives</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>Example Application</h1>
　　　　　　
　　　　　　<div ng-app = "" ng--US　
　　　　　　　　　{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">　
　　　　　　　　　<p>Please enter your name:　<input　type　=　"text"　ng-model　=　"name"></p>
　　　　　　　　　<p>Hello　<span　ng-bind　=　"name"></span>!</p>
　　　　　　　　　<p>Country list with regions:</p>
　　　　　　
　　　　　　　　　<ol>
　　　　　　　　　　　　<li　ng-repeat　=　"country　in　countries">
　　　　　　　　　　　　　　　{{　'Country:　'　+　country.name　+　', Locale:　'　+　country.locale　}}
　　　　　　　　　　　　</li>
　　　　　　　　　</ol>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Test See‹/›