Module: M2-R5: Web Design & Publishing
Chapter: Javascript
Directives in AngularJS are markers on DOM elements (attributes, elements, comments) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior. They extend HTML functionality. Examples are ng-app, ng-model, ng-repeat, etc.
<!DOCTYPE html> <html ng-app="myApp"> <head><title>ng-app Example</title></head> <body> <h1>AngularJS App Example</h1> </body> </html>
<div ng-app="myApp">
<input type="text" ng-model="name">
<p>Hello, {{ name }}!</p>
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="message"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.message = "Hello from ng-bind!";
});
</script>
<div ng-app="myApp">
<ul>
<li ng-repeat="item in ['Apple','Banana','Orange']">{{ item }}</li>
</ul>
</div>
<div ng-app="myApp">
<button ng-click="count = count + 1">Click Me</button>
<p>Clicked: {{ count }} times</p>
</div>
<div ng-app="myApp"> <button ng-click="visible = !visible">Toggle</button> <p ng-show="visible">This text is visible!</p> </div>
<div ng-app="myApp"> <input type="checkbox" ng-model="checked"> Show message <p ng-if="checked">Checkbox is checked!</p> </div>
<div ng-app="myApp">
<p ng-init="greeting='Hello AngularJS'">{{ greeting }}</p>
</div>
<div ng-app="myApp">
<button ng-click="red = !red">Toggle Red</button>
<p ng-class="{redClass:red}">This text changes color</p>
</div>
<style>
.redClass { color: red; font-weight: bold; }
</style>
<div ng-app="myApp">
<p ng-style="{color: myColor, 'font-size': '20px'}">Styled text</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("ctrl", function($scope){
$scope.myColor = 'blue';
});
</script>
Login with Google