Scribd
Upload
8 views

AngularJs Directives

Uploaded by

Akhil Rawat
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

AngularJs Directives

Uploaded by

Akhil Rawat
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

AngularJs Directives

Ng-bind example
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="init.js"></script>
<style>
body{
background-color:{{color}};
}
h1{
font-size:{{size}}px;
color:{{size}}
}
</style>
</head>
<body>
Ng-model
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="module.js"></script>
</head>
<body>
<div ng-controller='myController'>
<input type="text" ng-model="message"/>
<br>
{{message}}<br><br>
<h1 ng-bind="message"></h1>
</div>
</body>
</html>
Ng-init example
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="init.js"></script>
</head>
<body ng-init="a=5;b=4;">
<p>the area is:{{a*b}}</p>
<p>the area is:<span ng-bind="a*b"></span></p>
</body>
</html>
Ng-init example
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="init.js"></script>
</head>
<body>
<div ng-init="students= [
{name:'A', course:'mca', semester:'1'},
{name:'B', course:'mca', semester:'2'},
{name:'C', course:'mca', semester:'3'},
{name:'D', course:'mca', semester:'4'}
]">
</div>
<table border="1px solid">
<thead>
<tr>
<th>name</th>
<th>course</th>
<th>semester</th>
</tr>
Module and Controller
var myApp=angular.module('myModule',[]);
myApp.controller('myController',function($scope){
$scope.message="welcome mca";
});
Expressions
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div>
10+20={{10+20}}
{{1==2}}
</div>
10+20={{10+20}}
{{[name:'A', course:'mca'}].name};
{{['A','B','C','D'][1]}}
<div>
</div>
</body>
</html>

You might also like