Angular JS
·
Angular Js
is client side scripting, JavaScript framework. It is implemented by MISKO
HERERY and Adam Abrons in 2009.
·
It is maintained by Google Cooperation.
·
Angular Js
We can use to develop dynamic webs. It is simplified code of JavaScript
providing structure programming to create webs.
·
Angular Js
support MVC Pattern to implement Applications. It reduce complexity of
application development and increase reusability.
·
Using
design patterns we can separate business login from presentation layer.
·
MVC Stands for Model, View, and Controller.
·
Angular Js
Support Dynamic databinding means, if we update a variable output also will
update by itself.
·
Angular Js
support two way data binding concept .According to this concept if we update
variable (data) view will update (Output) and if we update view (output)
automatically variable will update.
·
Angular Js
Support Routing Concept according to this concept we can load the output of
another web in current without reloading.
·
It will increase performance of application.
·
We can also call this Concept as Single Application (SPA).
·
Angular Js
Support Different types of image slides and advanced web controllers like Date
picker or calendar picker or color picker, etc...
·
Angular Js is a cross browser.
·
Angular Js is very easy to perform unit
testing because of MVC structure.
·
Angular Js
is providing no of services to execute functionality .Ex: $Http, $window, etc.
·
Angular Js is very flexible to work with Ajax
concepts.
·
Angular Js is flexible to develop responsive
webs.
·
Angular
Js-2 is fully compatible with mobile functionality. It is based on mobile
architecture.
·
Angular Js is very flexible to work with
cookies.
1
HTML Tags:
·
Html tags are mainly divided into two types.
1) Container.
2)
Non Container.
Container:
Container can hold other elements if you want
to group multiple elements one entity we can use containers,
Ex: paragraph, tables, span, body.
Container is divided into two types
1) Inline Elements.
2) Block Elements.
Inline:
It doesn’t have new line before and after.
Ex: span, Anchor, etc…
Block:
It can contain new lines after and before.
Ex: div, paragraph, etc…
Non-Container
Non-container cannot hold any other element
used to receive some day or instructions from user.
Ex: Text Area, Textbox, etc...
Introduction of JavaScript
·
JavaScript
is client side script used to apply dynamic functionalities on html controls we
can also validate html controls.
·
Angular Js
is implemented using JavaScript, Both script declaration syntax is similar.
·
Using script tag we can declare JavaScript in
web.
·
Angular js-2 &Angular Js -4 working based
on TYPESCRIPT
·
Basic Program
to understand JavaScript. <! DOCTYPE html>
<Html>
<Head>
<meta
charset="utf-8">
<meta name="viewport"
content="width=device-width"> <title>Basic JavaScript
Program</title>
<script
type=’text/JavaScript’ language=”JavaScript”>
Alert
(“HELLO”)
</script>
</head>
<Body>
<img
src=”img1.jpeg” width=”100”>
<script>
Alert
(“From Body”)
</script>
<input type=”Button” value=”Click”
onclick=”JavaScript: alert (“From Button”)/>
</body>
</html>
We can also declare JavaScript in HTML s we
can include Script externally.
External JavaScript declaration is good for
Reusability.
.Js File
Alert (“scott”)
Alert (“Tiger’)
.Html File:
<Html>
<Head>
<script
src=”MyScript.js”>
</script>
</head>
<Body>
<h1>
Hello</h1>
</body>
</html>
Angular Js-1:
·
Angular Js
is providing number of directives (Properties) modules, services, etc…
·
To use this
functionality we need to include Angular library in the Html .
·
Using script tag we can include angular Js
Library in html.
·
Lets see how we include angular Js in script
tag.
<Script
src=”Angular.js”>
</Script>
Directive
·
Directive is nothing but an attribute (or)
property.
·
Angular Js is providing number of directives
to use with Html tags.
·
Every Directive is having prefix with “ng”.
·
Ng stands for Angular.
·
Directive is combination of name and values.
·
Ex: ng-init, ng-repeat, ng-show, etc…
1). Ng-App:
·
This is
starting point of Angular Js application without Declaration of ng-app.
·
We can use angular Js functionality in html s.
·
We can declare this attribute within body tag
or any other html tag.
Ex:
<body ng-app=””>
// code
</body>
Or
<body>
<p
ng-app=””>
</p>
<body>
2). Ng-init:
·
Ng-init
using this directive we can initialize variables in Angular Js Application.
3). Ng-Bind:
·
To bind a variable with in the html element.
·
It is one way binding.
Example Program:
<html>
<head>
<script src=”angular.min.js”>
</Script>
</head>
<body ng-app=”” ng-init=”x=200;y=400”>
<p ng-bind=”x”></p> <h1>ng-bind=”y”</h1>
</body>
</html>
4). Ng-Model:
·
It is two way data binding directive
·
When we update in view automatically data also
gets updated.
Ex:
<html>
<head>
<script src=”angular.min.js”>
</Script>
</head>
<body
ng-app=”” ng-init=”x=200;y=’Scott’”>
<p
ng-bind=”x”></p>
<h1>ng-bind=”y”</h1>
<input
ng-model=”y”>
</body>
</html>
Expression:
·
Using Expression we can bind variable in Html
DOM.
·
Expression is enclosed with double curly
braces ({{}}).
·
It is one way databinding.
·
We can use this expressions without any Html Tags.
·
We can use Html Element Properties.
<html>
<head>
<script
src=”angular.min.js”>
</Script>
</head>
<body ng-app=””
ng-init=”x=200;y=’Scott’”> {{x}}{{y}}
<h1>{{x}}</h1>
</body>
</html>
Note: At the time of calling Expression
no need to use any angular Js directive.
Array:
·
Array is the collection of elements, We can
store any type of values in array.
·
Angular Js is loosely typed coupled.
·
Array is collection of heterogeneous elements.
·
We can store any type of values in arrays.
·
Difference
between normal variable &Array is normal variable can store single value,
array can store collection of values.
·
Every
Element contain index start with [0] and ends with [total number of elements-1]
<html>
<head>
<script
src=”angular.min.js”>
</Script>
</head>
<body
ng-app=”” ng-init=”arr=[10,200,30,’scott’]”>
{{ar[2]}}
</body>
</html>
Ng-Repeat:
·
Using this directive we can run a loop through
the element of the array
<html>
<head>
<script src=”angular.min.js”>
</Script>
</head>
<body ng-app=””
ng-init=”arr=[10,200,30,’scott’,100,200]”> <li ng-repeat=”x in arr”>
{{x}}
</li>
</body>
</html>
Drop Down List:
<html>
<head>
<script
src=”angular.min.js”>
</Script>
</head>
<body ng-app=””
ng-init=”arr=[‘PHP’,’scott’,’JQuery’,’java’]”> <select>
<option
ng-repeat=”y in arr”>
{{x}}
</option>
</select>
</li>
</body>
</html>
Ng-Repeat in Image Property:
<html>
<head>
<script src=”angular.min.js”>
</Script>
</head>
<body ng-app=”” ng-init=”arr=[‘img1.jpeg’,’
img2.jpeg’,’ img3.jpeg’,’ img4.jpeg’]”>
<img ng-repeat=”iname
in arr”src={{iname}} width=100 height=100>
</body>
</html>
Note: ng-repeat is working based on values if there is any
duplicate values available in array ng-repeat
functionality will stop.
If we want to get duplicate elements we should
track element by index instead of values.
Syntax:
<li ng-repeat=”v in arr track by $index”
ng-bind=”v”></li>
Ng-show:
·
To display
or to hide elements Syntax
·
Ng-show
=”true”---Ã Display
·
Ng-show
=”False”--Ã Hide
Ng-Hide:
·
To display
or to hide elements Syntax
·
Ng-hide
=”true”---Ã Hide
·
Ng- hide
=”False”--Ã Display
Events:
·
Number of
event attributes are available to execute some statements based on actions
(Events) what we are performing on that control.
·
Available Event Attributes are
1.
Ng-click
2.
ng-mouseover
3.
Ng-mouseout
4.
Ng-keyup
5.
Ng-keydown…………….etc.,,,
<html>
<head>
<script src=”angular.min.js”>
</Script>
</head>
<body
ng-app=”” ng-init=”x=img1.jpeg”>
<img
src={{x}} width=100 ng-mouseover=”x=’img2.jpeg’”ng-click =’x=”img3.jpeg”’
ng-mouseout=”x=’img1.jpeg’’> {{x}}
</body>
</html>
RadioButton:
<script
src=”angular.min.js”>
<body
ng-app=”” ng-init=”x=true”>
<input type=”radio” name=”gn”
ng-click=”x=true” checked> Registration <input type=”radio” name=”gn”
ng-click=”x=true” checked> Login <div ng-show=”x”>
<h2>
Registration</h2>
Username:<input>
<br>
Password:<input>
<br>
Email:<input>
<br>
<input
type=”button” value=”Register”>
</div>
<div
ng-hide=”x”>
<h2>
Login</h2>
Username:<input>
<br>
Password:<input>
<br>
<input
type=”button” value=”Login”>
</div>
{{x}}
</body>
Module:
·
In angular Js module is collection of
controllers, services, filters etc...
·
Number of preimplemented (predefined) Modules
are available.
·
We can also create user defined module.
Module
Controller
Services Filters
Using angular.module function. We can create
Syntax:
Angular.Module
(modulename,[dependency module])
Ex:app=angular.module(“MyApp”,[‘ng-cookies’])
Controller:
·
Controller
is a collection of data and function we can create number of controllers in a
module.
·
Using controller function we can create
controllers in module
Syntax:
Module
.ref.controller(controller Name,call back function)
Ex:
app.controller(“c1”,function(){})
We can call module from html document using
ng-app directive.
Syntax:
Ng-app=”module name”
To call controller ng controller is directive
Syntax:
Ng-controller =”name of the controller”
Ex:
<script
src=”angular.min.js”>
</Script>
App=angular.model(“myapp”,[])
App.controller(“ct1”,function(){
Alert(“Controller
is created”)
})
</script>
<body ng-app=”myapp”
ng-controller=”ct1”> </body>
Program with Multiple controllers:
<script
src=”angular.min.js”>
</Script>
App=angular.model(“myapp”,[])
App.controller(“ct1”,function(){
Alert(“From
ct1”)
})
App.controller(“ct2”,function(){
Alert(“From ct2”)
})
</script>
<body ng-app=”myapp”
ng-controller=”ct1”> <p ng-controller=”ct2”>
</p>
</body>
$Scope:
·
$Scope is
predefined service to provider gobal accessibitlity to the variables and
functions of the controller by default controller members we cannot access from
html elements using $scope service we can access.
·
Angular js
providing number of services with functionality, we need to initialize these
services in controller callback function signature.
<script
src=”angular.min.js”>
</Script>
angular.model(“myapp”,[]).controller(“ct1”,function($Scope){
$scope.sno=100
$scope.fun1=function(x)
{
Alert(x)
}
})
</script>
<body ng-app=”myapp”
ng-controller=”ct1”> <button ng-click=”fun1(10)”> Click</button>
<input type=”button”ng-click=”fun1(1234)”
value=”clickme”> </body>
Program buy writing function
outside:
<script
src=”angular.min.js”>
</Script>
angular.model(“myapp”,[]).controller(“ct1”,fun1)
function
fun1($Scope)
{
$scope.sno=100
$scope.abc=function(x)
{
Alert(x)
Alert(“From Fun1”)
}
}
</script>
<body ng-app=”myapp”
ng-controller=”ct1”> {{sno}}
<input type=”button” ng-click=”abc(10)”
value=”click”> </body>
Program to create Two text boxes
with Addistion and substraction buttons:
<script
src=”angular.min.js”>
</Script>
angular.model(“myapp”,[]).controller(“ct1”,cbkfun)
function
cbkfun ($Scope)
{
$scope.t1;
$scope.t2;
$scope.res;
$scope.funadd=function(){
$scope.res=parseInt($scope.t1)+
parseInt($scope.t2)
}
$scope.funsub=function(){
$scope.res=parseInt($scope.t1)-
parseInt($scope.t2)
}
}
</script>
<body
>
NO1<input
type=”text” ng-module=”t1”/>,<br>
NO2<input type=”text”
ng-module=”t2”/>,<br>
Result<input
type=”text” value=”{{res}}/>
<input type=”button” ng-click=”funadd()”
value=”+”> <input type=”button” ng-click=”funsub()” value=”-”>
</body>
Object:
·
Object is collection of properties.
·
Property is combination of name and value.
·
Object properties we should enclose with “{}”
<script
src=”angular.min.js”>
<body
ng-app=”” ng-init=”obj={uname:’scott’.city:Hyderabad’}”>
<h1>{{obj.uname}}</h1>
<h2>{{obj.city}}</h2>
</body>
<style>
Th{
Color:Silver;
Background-color:black;
}
Tr:nth-child(even){
Background-color:lightBlue;
}
Tr:nth-child(odd){
Background-color:lightgreen;
}
</Style>
<script src=”angular.min.js”> <body
ng-app=”” ng-init=”obj=[ {uname:’Chaitanya’.city:’Hyderabad’}, {uname:’Ramalakshumma’.city:’Rajampet’},
{uname:’charitha’.city:’Rajampet’}, {uname:’Krishna Reddy’.city:’Rajampet’}
]”>
<table
border=’2’>
<th>
UserName</th>
<th>
City</th>
<tr
ng-repeat=”x in obj”>
<td>{{x.uname}}>/td>
<td>{{x.city}}</td>
</tr>
</table>
</body>
Ng-if:
·
using this directive we can check the
conditions.
·
We can also display (or) hide html elements
using “ng-if”.
<script
src=”angular.min.js”></script>
<body
ng-app=”” ng-init=”x=false”>
<img
src=’img1.jpeg’ width=100 ng-if=”x”>
<img src=’img2.jpeg’ width=100 >
</body>
Program
by using condition in ng-if
<script src=”angular.min.js”></script>
<body ng-app=”” ng-init=”x=300;y=200”> <div ng-if=”x>y”>
x is Big
<div>
<div ng-if=”x<y”>
Y is Big
<div>
</body>
Ng-switch:
·
Using this
attribute we can check a variable with no of cases and displaying the matching
case value.
Ng-Switch-when:
·
to check the values with switch value.
Ng-switch-default:
·
to display default content, if no match is
found.
Example program for switch:
<script
src=”angular.min.js”></script>
<body
ng-app=”” ng-init=”x=’’”>
<select ng-model=”x”>
<option>
Apple</option>
<option>
mango</option>
</select>
<div
ng-switch=”x”>
<div
ng-switch-when=”Apple”>
<h2>
Apple</h2>
Price : 100/-
Kg
</div>
<div
ng-switch-when=”mango”>
<h2>
mango</h2>
Price :
200/- Kg
</div>
<div ng-switch-default>
<h1>
Please Select Valid option</h1>
</div>
</div>
</body>
$Route Scope:
·
Using this
service we can access members of one controller to another controller.
·
We need to do initialization for this service
then we can access it.
·
Using this
service we can provide global accessibility to data of the controller.
·
Controller data can be access from any
location using $RouteScope .
<script src=”angular.min.js”>
</Script>
App=angular.model(“myapp”,[])
App.controller(“ct1”,function($Scope){
$Scope.x=100;
})
App.controller(“ct2”,function($Scope){
$RootScope.y=100;
})
<body ng-app=”myapp”
ng-controller=”ct1”> {{x}}{{y}}
<p ng-controller=”ct2”>
{{y}{{x}}
</p>
</body>
Ng-class:
·
Using this attribute we can call class
selector into html element.
<script
src=”angular.min.js”>
</Script>
<style>
.abc{
Color:red;
Text-decoration:underline;
Font-size:20px;
Font-family:”arial”;
}
.def{
Color:green;
Text-decoration:none;
Font-size:25px;
}
</style>
<body
ng-app=”” ng-init=”x=300”>
<div ng-class=”x” ng-mouseover=”x=’def’”
ng-mouseout=”x=’abc’”> Welcome to Angular Js…..
</div>
</body>
Ng-include:
·
To include
a file in current Html program.( we have to Write one HTML program and we have
to provide reference of the location where new html file is available.
Home.html
<script
src=”angular.min.js”>
</Script>
<body
ng-app=”” ng-init=”x=p1.html’”>
<div
ng-include=”x”>
</div>
Hello
…welcome home!!!!!!!!!!
</body>
ContactUs.html
<script
src=”angular.min.js”>
</Script>
<body
ng-app=”” ng-init=”x=p1.html’”>
<div
ng-include=”x”>
</div>
Hello
…welcome To Contact Us!!!!!!!!!!
</body>
Aboutus.html
<script
src=”angular.min.js”>
</Script>
<body
ng-app=”” ng-init=”x=p1.html’”>
<div
ng-include=”x”>
</div>
Hello
…welcome To AboutUs!!!!!!!!!!
</body>
P1.html.
<a
href=”home.html”> Home</a>
<a href=”Contactus.html”> Contact US</a>
<a href=”Aboutus.html”> AboutUs</a>
$Event:
$Event is an object providing properties about
current action or current event.
Event. Type:
Using this property we can get the type of
event what is executed.
Program:
<script src=”angular.min.js”>
</Script>
function
funcon($Scope)
{
$scope.fun1=function(e)
{
Alert(e.type)
}
}
App=angular.model(“myapp”,[]);
app.controller(“ct1”,funcon)
</script>
<body
ng-app=”myapp” ng-controller=”ct1” ng-click=”fun1($event)” ng-
mouseover=”fun1($event)”>
<p>
Welcome</p>
</body>
$Event.clientX:
Using this property we can get ‘x’ position of
mouse cursor.
$Event.clientY:
Using this property we can get ‘y’ position of
mouse cursor.
These properties are available in mouse
related events.
<script
src=”angular.min.js”>
</Script>
<style>
Body{
Height:100%;
}
</style>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.msg=”Welcome”;
$scope.fun1=function(ev)
{
$scope.msg=”X
axis is:”+ev.clientX+”y axis is:”+ev.clientY
}
})
</script>
<body
ng-app=”myapp” ng-controller=”ct1” ng-mousemove=”fun1($event)”>
<div>{{msg}}</div>
</body>
Program for Position of Image with
respective X-axis and Y-axis:
<script src=”angular.min.js”>
</Script>
<style>
Body{
Height:100%;
}
</style>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.xp=100;
$scope.yp=100;
$scope.fun1=function(ev)
{
$scope.xp=+ev.clientX;
$scope.xp=ev.clientY
}
})
</script>
<body ng-app=”myapp” ng-controller=”ct1”
ng-mousemove=”fun1($event)”> <p ng-style=”{color:’Red’}”>
Welcome</p>
<img
src=img1.jpeg”ng-style=”{width:30,top:yp,position:absolute,left:xp}>
</body>
$event.button:
To get mouse button information which is
clicked by user.
<script
src=”angular.min.js”>
</Script>
<style>
Body{
Height:100%;
}
</style>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.fun1=function(ev)
{
If(e.Button==2)
{
Alert(“Cannot
Use Right Click”)
}
}
})
</script>
<body
ng-app=”myapp” ng-controller=”ct1” >
<img src=img1.jpeg”
width=”100”ng-mousedown=”fun1($event)”> </body>
$Event.key
To get information of key selected by user .
It is available with keyboard related
events(ng-keyUp,ng-keydown,etc)
<script
src=”angular.min.js”>
</Script>
<style>
Body{
Height:100%;
}
</style>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.fun1=function(ev)
{
Alert(e.key)
}
})
</script>
<body
ng-app=”myapp” ng-controller=”ct1” > <input ng-keyup=”fun1($event)”>
</body>
keyCode:
·
To get unique code value of input character.
·
Unique code
is same as ASCII code value but it contains same value for capital and small
alphbets(65-90)
<script
src=”angular.min.js”>
</Script>
<style>
Body{
Height:100%;
}
</style>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.fun1=function(ev)
{
Alert(e.keyCode)
}
})
</script>
<body
ng-app=”myapp” ng-controller=”ct1” > <input ng-keyup=”fun1($event)”>
</body>
Example program for entering only
numbers
<script
src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.msg=”
“;
$scope.fun1=function(e)
{
$scope.msg=””;
If(e.keyCode<48e.keyCode>57)
{
$scope.msg=”Enter
Number Only”;
e.proventDefault()
}
}
})
</script>
<body
ng-app=”myapp” ng-controller=”ct1” >
<input type=”text”
ng-keydown=”fun1($event)”>
<div>
{{msg}}
</div>
</body>
preventDefault()
The
preventDefault() method cancels the event if it is cancelable, meaning that the
default action that belongs to the event will not occur.
For example, this
can be useful when:
25
·
Clicking on a
"Submit" button, prevent it from submitting a form
·
Clicking on a
link, prevent the link from following the URL
Note: Not all events
are cancelable. Use the cancelable
property to
find out if an event is cancelable.
Note: The
preventDefault() method does not prevent further propagation of an event
through the DOM. Use the stopPropagation() method to handle this.
<script
src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.msg=”
“;
$scope.t1=””;
$scope.t1=””;
$scope.fun1=function(e)
{
If($scope.t1.length==0)
{
Alert(”Enter
UserName”);
e.proventDefault()
}
Else
If($scope.t2.length==0)
{
Alert(”Enter
password”);
e.proventDefault()
}
}
})
</script>
<body ng-app=”myapp” ng-controller=”ct1”
> <Form action=p1.html ng-submit=”fun1($event)”> Username:<input
type=”text” ng-model=”t1”> <br>
password:<input type=”text”
ng-model=”t2”> < br >
<input
type= submit value=”enter”>
<div>
{{msg}}
</div>
</body>
$Http Service:
·
Using this
service we can create AJAX object in browser to get information from server.
·
Ajax is web
technology to send request to server without sending current web.
·
Ajax Stands for Asynchronous JavaScript and
XML.
Asynchronous:
·
It is a
process of sending request to server without waiting for previous response .
JavaScript:
·
Using
JavaScript document object model we can create Ajax object and send that object
to server.
XML:
·
Data Between browser & server transfer in
the form of xml.
Sometimes we need to get update from server
without submitting current web we can archive this concept using Ajax.
HttpSevice providing no of Methods.
GET():
·
We use get() method to transfer Ajax object.
·
If we use
get() method data transmission between browser and server is fast .but it is
not encoding data that’s why it is not secure.
Post():
·
To transfer Ajax Object with post method.
·
Post method
encodes data that’s why it is secure then Get(). But its performance is slow.
Then():
·
This method
will execute when Ajax object request and response completed successfully we
should place a call back function to execute some statements. After Ajax object
functionality is completed.
Data:
·
Using this property we can get response text
of Ajax object.
<script
src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.msg=”
“;
$scope.fun1=function(e)
{
$http.get(“p2.html”).then(function(x)
{
$scope.msg=x.data
})
}
})
</script>
<body ng-app=”myapp” ng-controller=”ct1”
> Welcome
<input type=”Button” value=”getData”
ng-click=”Fun1()”> </body>
<script
src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.msg=”
“;
$window.setInterveral(function()
{
$http.get(“p2.html”).then(function(x)
{
$scope.msg=x.data
})
}
})
</script>
<body ng-app=”myapp” ng-controller=”ct1”
> Welcome
<input type=”Button” value=”getData”
ng-click=”Fun1()”> </body>
<script
src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope,$http)
{
$scope.fun1=function(){
{
$http.({url:”p2.html”,Method:post”}).then(function(dt)
{
Alert(dt.data)
},function(){
Alert(“not
available”)
})
}
})
</script>
<body ng-app=”myapp” ng-controller=”ct1”
> Welcome
<input type=”Button” value=”click”
ng-click=”Fun1()”> </body>
$Window:
·
using this service we can got the information
about current window.
·
It is providing no of properties and methods.
$window.alert:
·
To display message box.
$Window.prompt:
·
To display input dialog box
<script
src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,fun1)
Function
fun1($window)
{
Var
rv=$window.prompt(“Enter Username”))
$window.alert(rv)
}
</script>
<body ng-app=”myapp” ng-controller=”ct1”
> </body>
$Window.confirm:
·
Display confirmation dialog box on browser to
user/Client.
$Window .Print:
·
Display print properties dialog box on
browser.
<script
src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,fun1)
Function fun1($window)
{
Var
rv=$window.confirm(“Do you wann take print”))
$window.print()
}
</script>
<body ng-app=”myapp” ng-controller=”ct1”
> </body>
$Window.Location:
·
Using this property we can redirect from
current to other .
<script
src=”angular.min.js”>
</Script>
<script>
angular.model(“myapp”,[]).controller(“ct1”,fun1)
function fun1($window,$scope)
{
$scope.fun2=function(){
{
$window.location=”https://www.google.co.in”
}
$scope.fun3=function(){
{
$window.location=”https://www.facebook.com”,
“_blank” ,”width=200,height=150,scrollbars=yes,menu bar=yes”)
}
}
</script>
<body ng-app=”myapp” ng-controller=”ct1”
> Welcome
<input
type=”Button” value=”Goo” ng-click=”Fun2()”>
<input type=”Button” value=”Foo”
ng-click=”Fun3()”> </body>
$window.setTimeout:
·
to call a function or to execute set of
statements after specified time.
$window.setInterval:
·
To execute setoff statements for every regular
interval of time period.
<script
src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,fun1)
Function
fun1($window,$scope)
{
window.setInterval(function
())
{
Alert(“Hi”)
}
},1000)
}
</script>
<body ng-app=”myapp” ng-controller=”ct1”
> </body>
