Scribd
Upload
39 views16 pages

Class25 angularJS

1. The document discusses the $scope object in AngularJS which acts as a binding between the HTML and JavaScript. It allows adding properties to scope that are accessible in the view. 2. Examples are provided of using $scope to display data in the view using interpolation and ng-bind directives. 3. Further examples demonstrate using ng-repeat on arrays in $scope to loop and display list items.

Uploaded by

Komal Shikha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views16 pages

Class25 angularJS

1. The document discusses the $scope object in AngularJS which acts as a binding between the HTML and JavaScript. It allows adding properties to scope that are accessible in the view. 2. Examples are provided of using $scope to display data in the view using interpolation and ng-bind directives. 3. Further examples demonstrate using ng-repeat on arrays in $scope to loop and display list items.

Uploaded by

Komal Shikha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Class – 25

Date : 04-12-2020
scope
• It is pre define Java Script object.
• It is a binding part between HTML and Java Script
• When we make controller in AngularJS we pass the $scope as a argument, it
is can't be use without controller.
• When you adding properties or variable to scope object the HTML gets
access to the properties.
• View : Which is the HTML part.
• Model : Data available for current view.

• Which is Java Script function that makes / changes / removes / control the data.
p13.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="demo">
{{nm}}
<p ng-bind="nm">nm</p> <!-- when we not want to use {{}} than we use ng-bind. -->
</div>

</body>
<script>
var app=angular.module("myapp",[]);
app.controller("demo",function($scope)
{
$scope.nm="Rishikesh";
});
</script>
</html>
p14.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="demo">
<ul>
<li ng-repeat="val in nm"> {{val}} </li>

</ul>
</div>

</body>
<script>
var app=angular.module("myapp",[]);
app.controller("demo",function($scope)
{
$scope.nm=["Rishikesh","Kumar"];
});
</script>
</html>
custom16.js p16.html
var mymode = angular.module("test", []); <!DOCTYPE html>
<html ng-app="test">
mymode.controller("mycontroller", function($scope) <head>
{ <title>Angular JS Test</title>
$scope.city = ["Delhi","Mumbai"]; <script src="js/angular.min.js"></script>
}); <script src="js/custom16.js"></script>
</head>

<body>
<div ng-controller="mycontroller">
<ol>
<li ng-repeat="ss in city">{{ss}}</li>
</ol>
Output
</div>
</body>
1.Delhi
</html>
2.Mumbai
rootScope
• rootScope is used anywhere in the HTML or view without create controller.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<script src="js/angular.min.js"></script>

<script>
var app=angular.module("myapp",[]);
app.run(function($rootScope)
{
$rootScope.val="Red";
});
app.controller("demo",function($scope)
{
$scope.val="Green";
});
</script>
</head>
<body>
<div ng-app="myapp">
<ul>
<li ng-controller="demo"> Value of root scope : {{val}} </li>

<li> Value of root scope : {{val}} </li>

</ul>
</div>

</body>
</html>
custom17.js
var mymode = angular.module("test", []);

mymode.controller("mycontroller", function($scope)
{
$scope.fnm = "Rishi";
$scope.lnm = "Kr";

});
mymode.run(function($rootScope)
{
$rootScope.fnm = "Hello Rishi Outer from root scope";
$rootScope.hello=function()
{
return $rootScope.fnm + "This variable calling with the help of function";
}
});
P17.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>Angular JS Test</title>
<script src="js/angular.min.js"></script>
<script src="js/custom17.js"></script>
</head>

<body>
<div ng-controller="mycontroller">
<input type="text" ng-model="fnm">
<input type="text" ng-model="lnm">
<br>
First Name : {{ fnm }}
<br>
Last Name : {{ lnm }}
</div>
<p>{{ fnm }}</p> <!-- print value outside the controller -->
<p>{{ hello() }}</p> <!-- print value through function outside the controller -->
</body>
</html>
Custom Directive Tag in AngularJS
Create own tag for html.

custom18.js
var mymode = angular.module("test", []);

mymode.directive("rishiKumar",function (){
//for rishi-kumar we use rishiKumar for hyphan we use capital letter without space
var ht="This is custom Tag"
return {template : ht}; //template means this tag used in HTML
});

mymode.directive(“menu",function ()
{
var dropdown = "<select ng-model='city'>";
dropdown += "<option>Delhi</option>";
dropdown += "<option>Mumbai</option>";
dropdown += "<option>Patna</option>";

return { template : dropdown};


});
p18.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>Angular JS Test</title>
<script src="js/angular.min.js"></script>
<script src="js/custom18.js"></script>
</head>

<body>
<rishi-kumar></rishi-kumar>
<menu></menu> <!-- we can call directly through menu -->
<div menu></div> <!-- or we can call in div tag -->
</body>
</html>
filter in angularJS
Print in lowercase [ filter in angularJS]

P19.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>Angular JS Test</title>
<script src="js/angular.min.js"></script>
<script src="js/custom.js"></script>
</head>

<body>
<div>
<input type="text" ng-model="str"> <br>
String : {{str | lowercase}}
</div>
</body>
</html>
Print in upper case [ filter in angularJS]

P20.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>Angular JS Test</title>
<script src="js/angular.min.js"></script>
<script src="js/custom.js"></script>
</head>

<body>
<div>
<input type="text" ng-model="str"> <br>
String : {{str | uppercase}}
</div>
</body>
</html>
Print in Currency [ filter in angularJS]

p21.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>Angular JS Test</title>
<script src="js/angular.min.js"></script>
<script src="js/custom.js"></script>
</head>

<body>
<div>
<input type="text" ng-model="money"> <br>
Currency : {{money | currency }}
<br>
Currency : {{money | currency : "INR" : 4}}
</div>
</body>
</html>
Print in Sorted Order [ filter in angularJS]

p22.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>Angular JS Test</title>
<script src="js/angular.min.js"></script>
<script>
var mymode = angular.module("test", []);
mymode.controller("mycontroller", function($scope){
$scope.colors = ['red','blue','green','yellow','grey','pink'];
});
</script>
</head>
<body>
<div ng-controller="mycontroller">
<ol>
<li ng-repeat="ss in colors | orderBy : ss">{{ss}}</li>
</ol>
</div>
</body>
</html>

You might also like